mapbox实现展示范围内指定图层要素的全部popup

贴个群号

WebGIS学习交流群461555818，欢迎大家

效果图

缩放到一定层级之后，再显示范围内的气泡，不在屏幕范围内的不展示，然后地图移动的时候，就展示新的屏幕范围内的气泡，屏幕范围外的不展示。
点击对应的图例，可以关闭对应要素的气泡，其他的气泡不关闭依然展开。

原理和源码

将问题分解，要实现以上的效果，需要实现以下几个步骤

1，一定缩放等级展示，比如zoom到了12之后展示，小于12的话，聚成一坨，展示效果也不好看
2，如何获取屏幕范围内的所有要素
3，批量生成气泡
4，屏幕移动和缩放等动作，改变范围时候，如何更新气泡
5，在同一图层下。不展示某一个属性的要素的时候，如何关闭对应的气泡，点开的话，如何又重新打开气泡

将问题分解之后，其实发现实现起来并不难。以上的问题我们将其一一解决。
解决1：这个是很好解决的，无非就是一个if else的判断，判断当前的zoom，使用map.getZoom()就可以获取当前范围内的zoom等级

      if(map.getZoom()<11){
        //
      }else{
       //
      }

解决2：获取屏幕内范围内的所有要素，可以使用queryRenderedFeatures方法，这个方法默认的就是接受范围内的所有要素，如果指定一个图层id的话，那么就是获取的范围内该图层的所有要素

解决3，利用上面的方法获取上面的要素后，得到的是一个要素数组，将其遍历，一个一个的生成

      let features = map.queryRenderedFeatures({ layers: [layerID] });
      // console.log(features)
      // 迭代每个要素，创建并打开弹窗
      features.forEach(function(feature) {
        // 获取要素的属性信息和几何信息
        let properties = feature.properties;
        let geometry = feature.geometry;


        getPopup(properties,layerID,map)
      })

解决4，监听moveend，zoomend等动作，每次更新的时候，消除之前的全部图层，重新执行上面的逻辑重新生成气泡

解决5，其实不用去找对应要素的气泡，这个动作完成时，直接清除范围内的所有气泡，重新执行上面的逻辑重新生成气泡

但是其实这上面这些都不是难点，难点是如何实时的保存这些气泡的dom，在新版的mapbox里面，map对象下有一个专门的属性会实时的保存地图挂载的所有气泡，但是老版本，比如我们使用的cgcs2000版本的mapbox并没有这个属性，而且如果图层多的时候，比如有两个图层，我们直接消除全部气泡，会把另外一个图层的气泡也全部消除，然后再重新生成的话，那可能两个图层写的地方离得很远，要跨组件调用那个生成的方法更是一种灾难。
于是我这里想了一个办法，就是地图初始化的时候，我手动维护一个数组，用于存放所有的气泡，但是要给气泡绑定一个属性，就是图层的ID，添加图层的时候，就向这个数组里面push进去新的气泡，操作这个图层改变显示在图中的要素的时候，就只从绑定对应图层id的要素里面清除，而不是清除全部。这样就可以完美解决了。