Leaflet中使用markerCluster实现点聚合效果
场景
Leaflet中添加标记、折线、圆圈、多边形、弹窗显示点击处坐标:
Leaflet中添加标记、折线、圆圈、多边形、弹窗显示点击处坐标_BADAO_LIUMANG_QIZHI的博客-CSDN博客
在上面实现地图上添加marker标记的功能之后,如果点位特别多,怎样实现聚合效果。
官方提供了插件
官方插件github地址:
https://github.com/Leaflet/Leaflet.markercluster
示例地址:
Leaflet debug page
按照其官方示例代码的源代码,本地复现。
注:
博客:
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
1、新建css样式文件,这是官方示例代码中所使用的聚合样式文件
MarkerCluster.css
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}.leaflet-cluster-spider-leg {/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}
MarkerCluster.Default.css
.marker-cluster-small {background-color: rgba(181, 226, 140, 0.6);}
.marker-cluster-small div {background-color: rgba(110, 204, 57, 0.6);}.marker-cluster-medium {background-color: rgba(241, 211, 87, 0.6);}
.marker-cluster-medium div {background-color: rgba(240, 194, 12, 0.6);}.marker-cluster-large {background-color: rgba(253, 156, 115, 0.6);}
.marker-cluster-large div {background-color: rgba(241, 128, 23, 0.6);}/* IE 6-8 fallback colors */
.leaflet-oldie .marker-cluster-small {background-color: rgb(181, 226, 140);}
.leaflet-oldie .marker-cluster-small div {background-color: rgb(110, 204, 57);}.leaflet-oldie .marker-cluster-medium {background-color: rgb(241, 211, 87);}
.leaflet-oldie .marker-cluster-medium div {background-color: rgb(240, 194, 12);}.leaflet-oldie .marker-cluster-large {background-color: rgb(253, 156, 115);}
.leaflet-oldie .marker-cluster-large div {background-color: rgb(241, 128, 23);
}.marker-cluster {background-clip: padding-box;border-radius: 20px;}
.marker-cluster div {width: 30px;height: 30px;margin-left: 5px;margin-top: 5px;text-align: center;border-radius: 15px;font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;}
.marker-cluster span {line-height: 30px;}
2、新建js文件leaflet.markercluster-src.js,这是实现聚合效果的核心js文件
代码较多,可以直接从github或者示例代码中下载
3、新建marker点位数据源的js文件,realworld.388.js
数据量较大,同上直接下载
4、修改js与css路径后实例化markerCluster
//实例化markerClustervar markers = L.markerClusterGroup();
5、循环将marker数据源中的点marker添加进markerClusterGroup中
//循环将点marker添加进markerCluserGroupfor (var i = 0; i < addressPoints.length; i++) {var a = addressPoints[i];var title = a[2];//LatLng表示具有特定纬度和经度的地理点var marker = L.marker(new L.LatLng(a[0], a[1]), {title: title});//绑定点击弹窗事件marker.bindPopup(title);//将点marker添加进markerCluserGroupmarkers.addLayer(marker);}
6、将markerClusterGroup添加到地图上
//将markerClusterGroup添加到地图上map.addLayer(markers);
7、完整示例代码
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>leaflet使用markercluster实现聚合</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}</style><link rel="stylesheet" href=".css/MarkerCluster.css" /><link rel="stylesheet" href="./css/MarkerCluster.Default.css" /></head><body><div id="map"></div><script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><script src="./js/leaflet.markercluster-src.js"></script><script src="./js/realworld.388.js"></script><script type="text/javascript">var map = L.map('map').setView([36.09, 120.35], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: ''}).addTo(map);//实例化markerClustervar markers = L.markerClusterGroup();//循环将点marker添加进markerCluserGroupfor (var i = 0; i < addressPoints.length; i++) {var a = addressPoints[i];var title = a[2];//LatLng表示具有特定纬度和经度的地理点var marker = L.marker(new L.LatLng(a[0], a[1]), {title: title});//绑定点击弹窗事件marker.bindPopup(title);//将点marker添加进markerCluserGroupmarkers.addLayer(marker);}//将markerClusterGroup添加到地图上map.addLayer(markers);</script>
</body></html>
8、效果
Leaflet中使用markerCluster实现点聚合效果相关推荐
- Leaflet中使用Leaflet-MiniMap插件实现小地图效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上,怎样使用插件实现小地图效果如 ...
- Leaflet中使用leaflet-sidebar插件实现侧边栏效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上,怎样使用插件实现地图侧边栏效 ...
- LeaFlet学习之聚合效果
leaflet实现聚合效果是通过插件进行的,虽然leaflet是轻量级的但是,许多功能都是没有依赖插件来完成,关于这有缺点也有有点,通过这几天对leaflet感觉一直都在依靠插件完成,本身就两个主题类 ...
- Leaflet中通过leaflet-measure插件实现测距测面效果
场景 Leaflet中原生方式实现测距: Leaflet中原生方式实现测距_BADAO_LIUMANG_QIZHI的博客-CSDN博客 Leaflet中原生方式实现测量面积: Leaflet中原生方式 ...
- vue 引入json地图_使用vue引入maptalks地图及聚合效果的实现
1.安装maptalks.js npm install maptalks --save 2.安装聚合mapkercluster npm install maptalks.markercluster 3 ...
- Leaflet中使用Leaflet-echarts3插件实现航班航线动态模拟
场景 Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图: Leaflet中使用leaflet-echarts插件实现Echarts的Migration ...
- Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)
场景 Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1224 ...
- Leaflet中通过setZIndex实现图层层级控制
场景 Leaflet中使用layerGroup图层组实现图层切换: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/12232650 ...
- Leaflet中原生方式实现测量面积
场景 Leaflet中原生方式实现测距: Leaflet中原生方式实现测距_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面实现测量距离的基础上,实现测量面积效果如下 注: 博客: ...
最新文章
- 网上的一篇spring security详解教程,觉得不错,转过来了
- Nagios安装部署与Cacti整合文档超精细版本
- 不知道怎么用GitHub怎么当程序员?拿出十分钟,包你会
- 自动化设计-框架介绍 TestCase
- 【十七届恩智浦智能车】平衡单车——控制篇(串级)
- 好汉歌计算机音乐,好汉歌歌曲赏析
- vs 的 tfs 账号更改
- 54 计算机与信息科学类,关于信息科学与技术学院自动化类及计算机类2019级大类分专业学生名单公示的通知...
- 模态框获取页面请求数据
- WINDOWS如何使用CMD修复硬盘命令来解决硬盘问题?
- 为什么要用 picture 标签代替 img 标签?
- 计算机网络怎么查看连接打印机驱动,如何查找打印机驱动的方法-电脑自学网...
- 图数据库(八):Neo4j中Cypher语言with关键字
- 洛谷 4828 Nagisa loves Tomoya 题解
- 北大学生弘扬民族文化,注意这些细节,编修家谱没有想象中那么困难
- 免费文件恢复、数据恢复、误删恢复
- 卫星发现了一个重要信号,中国正在热起来
- 分布式ID生成器 | 架构师之路
- Python:生成斐波那契数列(Fibonacci)
- 解决 npm install Error: EACCES: permission denied, mkdir node_modules/gifsicle/