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

更新时间：2020年07月01日 09:55:04 作者：yuruke

Mapbox是一个可以免费创建并定制个性化地图的网站。这篇文章主要介绍了mapboxgl区划标签避让不遮盖实现方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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区划标签不遮盖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

mpvue实现微信小程序快递单号查询代码
这篇文章主要介绍了mpvue实现微信小程序快递单号查询，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-04-04
第五章之BootStrap 栅格系统
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。本文给大家介绍BootStrap 栅格系统的相关资料,需要的朋友可以参考下
2016-04-04
JS实现类似百叶窗下拉菜单效果
百叶窗下拉菜单效果非常棒，今天小编给大家分享一段js代码实现类似百叶窗下拉菜单效果，需要的朋友参考下
2016-12-12
JavaScript操作 url 中 search 部分方法函数
这篇文章主要介绍了JavaScript操作 url 中 search 部分方法函数的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
详解A标签中href=""的几种用法
这篇文章主要介绍了a标签中href=""的几种用法 ,需要的朋友可以参考下
2017-08-08
JS实现电影票选座的项目示例
电影院选座基本上每个人都用到过，本文主要介绍了JS实现电影票选座的项目示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
用JS剩余字数计算的代码
函数中首先给maxChars变量指定了值(输入区内最多可用的字符数，注意，该变量是个可用于计算的数值)
2008-07-07
cypress中丰富的调试工具使用方法
这篇文章主要为大家介绍了cypress中丰富的调试工具及使用示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
前端面试运行npm run xxx发生过程原理解析
这篇文章主要为大家介绍了前端面试运行npm run xxx过程原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
JS XMLHttpRequest原理与使用方法深入详解
这篇文章主要介绍了JS XMLHttpRequest原理与使用方法,结合实例形式深入分析了JS XMLHttpRequest相关原理、使用方法及操作注意事项,需要的朋友可以参考下
2020-04-04