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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
Vue3.0的优化总结
Oct 16 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 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
多人战的战术与战略
2020/03/04 星际争霸
PHP+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
php生成略缩图代码
2012/07/16 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
php中错误处理操作实例分析
2019/08/23 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
Django 解决由save方法引发的错误
2020/05/21 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
幼儿园园长自我鉴定
2013/10/22 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
关于教师节的广播稿
2014/09/10 职场文书
田径运动会通讯稿
2014/09/13 职场文书
担保书格式
2015/01/20 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
中学生运动会广播稿
2015/08/19 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
2019学生会干事辞职信
2019/06/27 职场文书