如何启用默认 Mapbox POI 标记的点击?

Rya*_*yan 2 geojson mapbox mapbox-gl mapbox-gl-js mapbox-marker

是否可以使 Mapbox 上的默认 POI 标记可操作/可点击?

不是作为图层包含的自定义 POI 标记,而是每个地图中包含的默认 POI 标记?

在下面的屏幕截图中,您可以看到蓝色和棕色的默认 POI 标记:

Central StationCampbria HotelHomewood SuitesMinute Maid Park, ETC。

这些 POI 标记会在缩放时显示,并且不会作为单独的图层添加。我想让它们变得可行。

理想的行为是弹出地图,其中包含相关的 OSM POI 信息,例如 Google 地图。但即使直接链接到 OSM 位置也是可以接受的。

例如,如果用户单击Minute Maid Park下面的 POI 图标,是否可以将用户重定向到关联的 OSM 位置?(https://www.openstreetmap.org/way/129025430

我可以通过 GeoJSON 源/图层使用自定义标记来执行此操作,但我想访问所有默认 POI 标记,而不是一小部分自定义标记。

默认 MapBox POI

jsc*_*tro 6

是的你可以!这完全取决于您感兴趣的样式的哪些层。例如,mapbox://styles/mapbox/streets-v11有 111 层来表示数据。

在此输入图像描述

每次单击具有此样式的地图上的任何城市点都会返回所有这些图层中的 1 到 20 个要素。看来您知道如何做到这一点,但为了解释清楚,您可以通过单击访问所有这些内容,如下所示:

        map.on('style.load', function() {

          map.on('click', function(e) {
            let l = map.getStyle().layers; // here you can get all the layers of the style

            var features = map.queryRenderedFeatures(e.point, {
              layers: ['poi-label', 'transit-label', 'landuse', 'national-park']
            }); // this filters the features in these 4 layers
            new mapboxgl.Popup()
              .setLngLat(e.lngLat)
              .setHTML('you clicked here: <br/>' + features[0].properties.name)
              .addTo(map);
          });
        });
Run Code Online (Sandbox Code Playgroud)

symbol因此,只需为您感兴趣的图层或图层类型创建一个过滤器...(我建议您从任何类型图层或使用 ids landusepoi-labelnational-parktransit-label...开始)

这是我用一个关于如何在默认图层上定位 POI 的示例创建的快速小提琴。我刚刚添加了 4 层,您可能可以轻松创建一个更好的过滤器以满足您的需求。

在此输入图像描述