mapbox控制缩放等级来显示隐藏视图里所有要素popup

贴个群号

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

同时打开所有popup

在Mapbox中，要同时打开图层的所有要素的弹窗，可以使用以下步骤：

1创建一个新的地图样式，并在该样式中添加要素图层。例如，您可以在Mapbox Studio中创建一个新的地图样式，然后添加一个GeoJSON源和相应的图层。

2在图层的属性中，确保“Interactive”选项被启用。这将允许用户与图层中的要素进行交互，并且可以通过点击要素来打开弹窗。

3使用Mapbox GL JS或其他Mapbox SDK加载地图，并将其绑定到页面元素。

4使用Mapbox GL JS的queryRenderedFeatures()方法查询图层中的所有要素，并使用forEach()方法迭代每个要素。

5对于每个要素，获取它的几何信息和属性信息，并将这些信息用于创建弹窗内容。

6使用Mapbox GL JS的Popup类创建一个新的弹窗，并将其添加到地图上。

7将弹窗内容设置为每个要素的属性信息，并将弹窗的位置设置为每个要素的几何信息。

8显示弹窗，以使所有要素的弹窗都同时打开。

以下是示例代码，展示了如何实现此操作：

map.on('load', function() {
  // 获取图层ID
  var layerId = 'my-layer';
  
  // 查询图层中的所有要素
  var features = map.queryRenderedFeatures({ layers: [layerId] });
  
  // 迭代每个要素，创建并打开弹窗
  features.forEach(function(feature) {
    // 获取要素的属性信息和几何信息
    var properties = feature.properties;
    var geometry = feature.geometry;
    
    // 创建弹窗内容
    var popupContent = '<h3>' + properties.title + '</h3>' +
                       '<p>' + properties.description + '</p>';
    
    // 创建新的弹窗，并将其位置设置为要素的几何信息
    var popup = new mapboxgl.Popup()
      .setLngLat(geometry.coordinates)
      .setHTML(popupContent);
      
    // 将弹窗添加到地图上并打开
    popup.addTo(map);
  });
});

请注意，这段代码仅供参考，并且可能需要根据您的具体情况进行自定义调整。

控制缩放等级展示popup

使用vue组件的方式挂载popup的方式在我的另一篇博客中

https://blog.youkuaiyun.com/Sakura1998gis/article/details/113383948?spm=1001.2014.3001.5502

注意HTML的dom元素不能以数字开头，但是我们需要绑定不一样的名字，建议使用zoomed，当缩放动作结束的时候判断

          
		import Vue from 'vue'
		import PopupVue from '@/components/popup/Popup'
		const PopupItem = Vue.extend(PopupVue)
		
		//控制缩放到一定层级 才会展示popup
          let popupZoomArray = []
          map.on('zoomend',layerID,()=>{
            if(map.getZoom()>=11){
              // 查询图层中的所有要素
              var features = map.queryRenderedFeatures({ layers: layerID] });
              // console.log(features)
              // 迭代每个要素，创建并打开弹窗
              features.forEach(function(feature) {
                // 获取要素的属性信息和几何信息
                var properties = feature.properties;
                var geometry = feature.geometry;
                
                // 创建弹窗内容   绑定一个唯一popupID，用于挂载时候找到对应的ID
                const popupHTML = `<div id="popup${properties.id}-detail"></div>`
                // 创建新的弹窗，并将其位置设置为要素的几何信息
                let popupZoomItem = new mapboxgl.Popup({
                  closeButton: false
                }).setLngLat(geometry.coordinates)
                  .setHTML(popupHTML)
                  .setMaxWidth('none')
                  .addTo(map)
                // 将弹窗添加到地图上并打开
                // popup.addTo(map);
                
                new PopupItem({propsData:{popupContent: {
                  name:name,
                  item:item,
                  item1:properties,
                  isStringIdenx:''
                }}}).$mount(`#popup${properties.id}-detail`)
                popupZoomArray.push(popupZoomItem)
              })
            }else{
              popupZoomArray.forEach(e=>{
                e.remove()
              })
              popupZoomArray =[]
              // popup.remove()
            }
          })

往往这样操作完，还有一个问题
就是其实这个方法并不是图层里面的所有要素，只是你视角里面看到的要素，比如图层里面有一百个要素，但是你视角里面只有10个，那么这个缩放动作完成后，只有10个要素同时展示了popup，其他并没有加载，而这时，你平移视角到其他区域，就会看不到其他要素的popup，所以这时候，我们还需要一个方法，就是moveend

          //控制缩放到一定层级 才会展示popup
          let popupMoveArray = []
          map.on('moveend',layerID, () => {
            if(map.getZoom()>=11){
              // 查询图层中的所有要素
              var features = map.queryRenderedFeatures({ layers: [layerID] });
              // console.log(features)
              // 迭代每个要素，创建并打开弹窗
              features.forEach(function(feature) {
                // 获取要素的属性信息和几何信息
                var properties = feature.properties;
                var geometry = feature.geometry;
                
                // 创建弹窗内容
                const popupHTML = `<div id="popup${properties.id}-detail"></div>`
                // 创建新的弹窗，并将其位置设置为要素的几何信息
                let popupMoveItem =  new mapboxgl.Popup({
                  closeButton: false
                }) 
                  .setLngLat(geometry.coordinates)
                  .setHTML(popupHTML)
                  .setMaxWidth('none')
                  .addTo(map)
                // 将弹窗添加到地图上并打开
                // popup.addTo(map);
                
                new PopupItem({propsData:{popupContent: {
                  name:name,
                  item:item,
                  item1:properties,
                  isStringIdenx:''
                }}}).$mount(`#popup${properties.id}-detail`)
                popupMoveArray.push(popupMoveItem)
              })
            }else{
              // popup.remove()
              popupMoveArray.forEach(e=>{
                e.remove()
              })
              popupMoveArray = []
            }
          });

注意这个用于存放所有元素popup的数组必须放在动作外面。