mapboxgl区划标签避让不遮盖实现的代码详解

网络编程 2024/10/31 佚名

3 2 1

帝王谷资源网 Design By www.wdxyy.com

Mapbox GL JS是一个JavaScript库，使用WebGL渲染交互式矢量瓦片地图和栅格瓦片地图。WebGL渲染意味着高性能，MapboxGL能够渲染大量的地图要素，拥有流畅的交互以及动画效果、可以显示立体地图并且支持移动端，是一款十分优秀的WEB GIS开发框架。

常见的 mapbox.js和mapbox-gl.js的异同点？

相同点：

1.都是由Mapbox公司推出的免费开源的JavaScript库

2.都可以作为前端渲染矢量瓦片交互地图的工具

3.它们的样式设置都支持Mapbox Style

不同点：

1.mapbox.js是Leaflet的一个插件，使用方式是通过结合Leaflet使用

2.mapbox-gl.js是Leaflet的一个插件，使用方式是通过结合Leaflet使用

3.使用mapbox-gl.js的浏览器必须支持WebGL渲染，在旧的浏览器中是不支持mapbox-gl.js的，而mapbox.js则没有此限制

下面看下mapboxgl区划标签避让不遮盖实现的代码。

mapboxgl地图区划标签采用Marker实现导致密集区域会相互遮盖

new mapboxgl.Marker(el)
    .setLngLat([dataTemp.lon,dataTemp.lat])
    .addTo(map);

经过查阅资料后决定采用Source cluster方式解决，clusterRadius可以根据地图缩放自动聚合检测，聚合半径可设置

1、首先添加一个addSource

  map.addSource(sourceId, {
   "type": "geojson",
   "data": {
     "type": "FeatureCollection",
     "features": _this.formatData(datas,map) 
   },
   "cluster": true,
   "clusterRadius": 35 // 聚合半径
  });

2、添加区划标签图层

 map.addLayer({//添加区划标签图层
   'id': layerId,
   'type': 'symbol',
   'source': sourceId,
   'layout': {
    'visibility': 'visible',
    'text-field': ['get', 'regionname'],
    'text-font': ['Helvetica Neue', 'Arial', 'Helvetica', 'sans-serif'],
    'text-offset': [0, 0],
    'text-anchor': 'top',
    'text-size':14,
   },
   'paint':{
    'text-color':'#000000',
    
   }
  });

3、鼠标经过区划文字弹出小窗口展示信息，此处采用Popup方便后期扩展

map.on('mouseenter', layerId, function(e) {
   let markerData = e.features[0].properties;
   _this.clearMarker(map);//先清除上次的弹窗
   _this.addMarker(markerData,map);//打开本次区划弹窗
  });
addMarker(){
  let className = 'region-selected-marker-box region-selected-marker-box-';
  let html = "自定义现实内容"；
  var popup = new mapboxgl.Popup({
   offset: [20,5], 
   className: className,
   anchor:'left',
   closeButton:false
  })
   .setLngLat([lon,lat])
   .setHTML(html)
   .setMaxWidth("300px")
   .addTo(map);
 }

到此，地区区划标签主动避让就已经实现了，此种方式的优势是不需要重复计算，利用地图cluster属性即可实现，clusterRadius可以设置聚合半径

总结

mapboxgl区划标签不遮盖,mapboxgl区划标签

标签：

mapboxgl区划标签不遮盖,mapboxgl区划标签

帝王谷资源网 Design By www.wdxyy.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

帝王谷资源网 Design By www.wdxyy.com

评论“mapboxgl区划标签避让不遮盖实现的代码详解”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年10月31日

mapboxgl区划标签避让不遮盖实现的代码详解

mapboxgl区划标签不遮盖,mapboxgl区划标签

详解vue3.0 diff算法的使用(超详细)

通过angular CDK实现页面元素拖放的步骤详解

评论“mapboxgl区划标签避让不遮盖实现的代码详解”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接