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的数组必须放在动作外面。

### 在 Mapbox 中为 Marker 添加文字标签 为了在 Mapbox 地图上为标记 (Marker) 增加文字标签或注释,可以利用 `mapbox-gl-js` 库提供的功能来实现自定义标注。具体来说,可以通过创建带有 HTML 内容的弹窗(Popup),当点击某个位置上的图标时显示相应的描述信息;或者是通过设置 SVG 或者 DOM 节点作为 marker 的内容,在其中嵌入文本。 对于简单的文本标签需求,通常推荐使用 Popup 方式,因为这种方式更加灵活且易于管理[^1]: ```javascript // 创建一个新的地图实例 var map = new mapboxgl.Map({ container: 'map', // 容器 ID style: 'mapbox://styles/mapbox/streets-v11', center: [-74.5, 40], // 初始视图中心坐标 zoom: 9 // 缩放级别 }); // 向地图添加一个 marker 并关联 popup 显示文本 var el = document.createElement('div'); el.className = 'marker'; new mapboxgl.Marker(el).setLngLat([-74.5, 40]) .addTo(map); // 设置并绑定popup到这个marker上面去 var popup = new mapboxgl.Popup({ offset: 25 }) .setText('这是我的地点') // 可以是动态变量 .addTo(map); // 将popup与marker关联起来 new mapboxgl.Marker(el) .setPopup(popup) // 给marker设定popup属性 .setLngLat([-74.5, 40]) // 设定经纬度 .addTo(map); // 加载至地图对象中 ``` 如果希望直接在 marker 上展示固定的文字而不是依赖交互式的 popups,则可能需要更复杂的操作,比如构建自定义的 marker 图像或是采用其他可视化库配合使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值