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


Posted in Javascript onJuly 01, 2020

 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区划标签避让不遮盖实现的代码详解

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

Javascript 相关文章推荐
JavaScript的eval JSON object问题
Nov 15 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
javascript时间差插件分享
Jul 18 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
Vue左滑组件slider使用详解
Aug 21 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 #Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 #Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 #Javascript
vue实现购物车列表
Jun 30 #Javascript
vue实现简单图片上传
Jun 30 #Javascript
vue基于better-scroll仿京东分类列表
Jun 30 #Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 #Javascript
You might like
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
php a simple smtp class
2007/11/26 PHP
php简单获取目录列表的方法
2015/03/24 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
react 生命周期实例分析
2020/05/18 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
用python写爬虫简单吗
2020/07/28 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
证券期货行业个人的自我评价
2013/12/26 职场文书
十八大感想感言
2014/02/10 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
保护动物的标语
2014/06/11 职场文书
大学生在校表现评语
2014/12/31 职场文书
党支部季度考核意见
2015/06/02 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
修辞手法有哪些?
2019/08/29 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python