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实现此目的，该方法返回在给定边界框中渲染的要素数组。但是，如果省略边界框参数，则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
    }
  }
});

检查地图框视口中是否存在GeoJSON源

1 个答案: