检查 mapbox 视口中是否存在 GeoJSON 源

Question

我有一张包含多个 GeoJSON 图层的地图，每个图层都有自己独特的图层名称：

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 评估这三个图层中的任何一个是否在视口中。如果是，我会采取行动向叠加层添加一个按钮。但是，我在查找有关如何检查图层是否在视口内的传单以外的任何文档时遇到问题。我发现了一些似乎不适用的标记。

Answer 1

您可以使用 queryRenderedFeatures 实现此目的，其中 returns 在给定边界框内呈现的特征数组。但是，如果您省略边界框参数，queryRenderedFeatures 将在整个视口内进行查询。您还可以使用 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
    }
  }
});

检查 mapbox 视口中是否存在 GeoJSON 源

Check if a GeoJSON source is present in mapbox viewport

mapbox

mapbox-gl-js