mapbox - 检查 Mapbox 视口(viewport)中是否存在 GeoJSON 源

Question

我有一个包含多个 GeoJSON 层的 map ，每个层都有自己唯一的层名称:

var map = new mapboxgl.Map({
  container: 'map',
  center: [-97.5651505, 37.89549,],
  zoom: 4
});

var sources = {
  'ord': 'chicago',
  'pit': 'pittsburgh',
  'atl': 'atlanta'
};

map.on('load', function () {
  for (var s in sources) {

    map.addSource(s, { type: 'geojson', data: `/geojson/${s}.json` });
    map.addLayer({
      'id': sources[s],
      'type': 'fill',
      'source': s,
      'layout': {
        'visibility': 'visible'
      },
      'paint': {
        'fill-color': '#088',
        'fill-opacity': 0.5
      }
    });
  }
});

我想检查用户是否放大到超过缩放级别 13，评估这三个图层中的任何一个是否在视口(viewport)中。如果是，我将采取行动向叠加层添加一个按钮。但是，除了有关如何检查图层是否位于视口(viewport)内的传单之外，我在查找任何文档时都遇到问题。我发现一些提及的标记似乎并不适用。

Answer 1

您可以通过queryRenderedFeatures来实现这一点它返回给定边界框中呈现的特征数组。但是，如果省略边界框参数，queryRenderedFeatures 将在整个视口(viewport)内进行查询。您还可以使用 options.layers 参数将查询限制为特定图层，以避免获取大量底层样式的要素(例如街道和湖泊)。您可以在 zoomend 事件监听器中执行此查询以获得所需的结果。把它们放在一起看起来像这样:

map.on('zoomend', () => {
  if (map.getZoom() > 13) {
    const visibleFeatures = map.queryRenderedFeatures(null, {layers: ['ord', 'pit', 'atl']});
    // if none of the layers are visible, visibleFeatures will be an empty array
    if (visibleFeatures.length) {
      // figure out which layers are showing and add your button
    }
  }
});