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查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 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简单命令代码集锦
2007/09/24 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
Python File(文件) 方法整理
2019/02/18 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
python如何实现递归转非递归
2021/02/25 Python
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
暑假实习求职信范文
2013/09/22 职场文书
关于毕业的广播稿
2014/01/10 职场文书
户籍证明的格式
2014/01/13 职场文书
教导处工作制度
2014/01/18 职场文书
法制宣传月活动方案
2014/05/11 职场文书
保护环境建议书300字
2014/05/13 职场文书
幼师求职自荐信
2014/05/31 职场文书
年终晚会活动方案
2014/08/21 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript