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 相关文章推荐
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
详解js闭包
Sep 02 Javascript
javascript二维数组转置实例
Jan 22 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
JS函数基本定义与用法示例
Jan 15 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 Javascript
原生js+canvas实现验证码
Nov 29 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
laravel学习教程之关联模型
2016/07/30 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
List Installed Software Features
2007/06/11 Javascript
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
json的使用小结
2016/06/08 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
python编程羊车门问题代码示例
2017/10/25 Python
Python算法之图的遍历
2017/11/16 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
深入了解python列表(LIST)
2020/06/08 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
程序员岗位职责
2013/11/11 职场文书
个人简历自我评价
2014/02/02 职场文书
2014教师年度工作总结
2014/11/10 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
社区活动总结范文
2015/05/07 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
Redis高并发缓存架构性能优化
2022/05/15 Redis