脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → mapboxgl区划标签不遮盖

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

您可能感兴趣的文章:

相关文章

  • 前端防抖(Debounce)和节流(Throttle)的概念、区别、应用场景及实现方法

    前端防抖(Debounce)和节流(Throttle)的概念、区别、应用场景及实现方法

    这篇文章主要介绍了前端开发中常用的防抖（Debounce）和节流（Throttle）技术的相关资料,文章还提供了JavaScript的防抖和节流实现示例,并展示了如何在实际项目中结合使用这两种技术以达到最佳效果,需要的朋友可以参考下
    2025-01-01
  • JavaScript闭包原理及作用详解

    JavaScript闭包原理及作用详解

    闭包是指内部函数总是可以访问其所在的外部函数中声明的变量和参数，即使在其外部函数被返回（寿命终结）了之后。这篇文章将为大家详细介绍一下闭包的原理，作用及用途，快来跟随小编一起学习一下吧
    2021-12-12
  • javascript实现跟随鼠标移动的图片

    javascript实现跟随鼠标移动的图片

    这篇文章主要为大家详细介绍了javascript实现跟随鼠标移动的图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • js、jquery实现列表模糊搜索功能过程解析

    js、jquery实现列表模糊搜索功能过程解析

    这篇文章主要介绍了js、jquery实现列表模糊搜索功能过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • js使用数组判断提交数据是否存在相同数据

    js使用数组判断提交数据是否存在相同数据

    判断提交数据是否存在相同数据，在本文将为大家介绍使用数组做到这一点，感兴趣的朋友可以参考下
    2013-11-11
  • js实现日期天数、时分秒的倒计时完整代码

    js实现日期天数、时分秒的倒计时完整代码

    这篇文章主要给大家介绍了关于js实现日期天数、时分秒的倒计时的相关资料,实现倒计时功能首先是得到目标时间,然后用当前时间减去目标时间,最后将时间差传化为天数、时、分、秒,需要的朋友可以参考下
    2023-11-11
  • JavaScript实现网页tab栏效果制作

    JavaScript实现网页tab栏效果制作

    这篇文章主要为大家详细介绍了JavaScript实现网页tab栏效果制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • 小程序实现密码输入框

    小程序实现密码输入框

    这篇文章主要为大家详细介绍了小程序实现密码输入框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • Javascript中的arguments对象

    Javascript中的arguments对象

    这篇文章主要介绍了Javascript中的arguments对象 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • ECMAScript 6即将带给我们新的数组操作方法前瞻

    ECMAScript 6即将带给我们新的数组操作方法前瞻

    这篇文章主要介绍了ECMAScript 6即将带给我们新的数组操作方法前瞻,需要的朋友可以参考下
    2015-01-01

最新评论