mapbox - 如何启用默认 Mapbox POI 标记的点击？

Question

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

不是作为图层包含的自定义 POI 标记，而是每个 map 中包含的默认 POI 标记？

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

中央车站、坎布里亚酒店、Homewood Suites、美汁源公园等

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

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

例如，如果用户点击下面的 Minute Maid Park POI 图标，是否可以将用户重定向到关联的 OSM 地点？ (https://www.openstreetmap.org/way/129025430)

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

Answer 1

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

每次单击具有此样式的 map 上的任何城市点，都会返回所有这些图层中的 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);
          });
        });

因此，只需为您感兴趣的图层或图层类型创建一个过滤器...(我建议您从任何类型 symbol 图层或 ID landuse、poi-label、国家公园、transit-label...)

这是我用 a sample on how to locate POIs on default layers 创建的一个快速 fiddle 。我刚刚添加了 4 层，您可以轻松创建一个更好的过滤器以满足您的需求。