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 getElementsByClassName函数
Apr 01 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
vue实现点击按钮下载文件功能
Oct 11 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
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
javascript History对象原理解析
2020/02/17 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
python三引号如何输入
2020/07/06 Python
python 实现有道翻译功能
2021/02/26 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
夜大毕业生自我鉴定
2013/10/31 职场文书
在校生自我鉴定
2014/01/23 职场文书
四年级科学教学反思
2014/02/10 职场文书
致长跑运动员加油稿
2014/02/20 职场文书
新年爱情寄语
2014/04/08 职场文书
会计求职自荐信
2014/06/20 职场文书
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
js前端图片加载异常兜底方案
2022/06/21 Javascript