leaflet聚合效果(markercluster)
1.下载插件
npm install leaflet.markercluster
运行此命令下载leaflet的markercluster插件
2.引入插件
// 引入 leaflet.markercluster
import "leaflet.markercluster/dist/MarkerCluster.css"
import "leaflet.markercluster/dist/MarkerCluster.Default.css"
import "leaflet.markercluster";
3.实例化 markerCluster
createMakerCluster = L.markerClusterGroup()
leaflet.markercluster 引用成功之后,会挂载至Leaftet 对象下。
4.添加点到 makerClusterGroup
this.modal8PointGeoList.map((item) => {
let marker = L.marker(item._latlng)
createMakerCluster.addLayer(marker)
});
modal8PointGeoList是我调用接口获取到后台的数据处理后的点数组,通过遍历点数组添加点到makerClusterGroup
5.将 makerClusterGroup 加载到地图中
map.addLayer(createMakerCluster)
6.设置默认点的图标
import icon from "@/assets/images/modal8/blueIcon.png";
DefaultIcon = L.icon({
iconUrl: icon, //设置图标
iconSize: [22,36] //设置图标大小
});
let marker = L.marker(item._latlng , {icon: DefaultIcon})
在定义marker的时候在L.marker()方法里添加一个icon属性
7.添加bindPopup事件
let marker = L.marker(item._latlng , {icon: DefaultIcon}).bindPopup(item._html, {
className: "stationInfo",
direction: "top",
}).openPopup();
8.设置聚合圈的颜色
.marker-cluster-large div {
background-color: rgba(24, 144, 255, 0.6) !important;
color: #fff;
}
.marker-cluster-medium div {
background-color: rgba(24, 144, 255, 0.6) !important;
color: #fff;
}
.marker-cluster-small div {
background-color: rgba(24, 144, 255, 0.6) !important;
color: #fff;
}
.marker-cluster-small {
background-color: transparent;
}
.marker-cluster-medium {
background-color: transparent;
}
.marker-cluster-large {
background-color: transparent;
}