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 打开页面window.location和window.open的区别
Mar 17 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
javascript中数组的定义及使用实例
Jan 21 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
关于Vue中$refs的探索浅析
Nov 05 Javascript
通过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
用Flash图形化数据(二)
2006/10/09 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
理解Javascript_10_对象模型
2010/10/16 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
Python去除列表中重复元素的方法
2015/03/20 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
Python实现图像的垂直投影示例
2020/01/17 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
通过cmd进入python的步骤
2020/06/16 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
自我鉴定范文300字
2013/10/01 职场文书
行政助理岗位职责
2013/11/10 职场文书
社区春季防火方案
2014/06/02 职场文书
专业见习报告范文
2014/11/03 职场文书
家装电话营销开场白
2015/05/29 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript