Leaflet中使用markerCluster实现点聚合效果
生活随笔
收集整理的這篇文章主要介紹了
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中使用layerGroup
- 下一篇： Nginx映射本地json文件，配置解决