leaflet使用markercluster实现聚合_markerclustergroup

1、安装插件

npm install leaflet.markercluster

2、引入插件

// 引入 leaflet.markercluster
import "leaflet.markercluster/dist/MarkerCluster.css"
import "leaflet.markercluster/dist/MarkerCluster.Default.css"
import "leaflet.markercluster";

3、实例化markercluster

markerClusterGroup = L.markerClusterGroup()

4、添加点到markerClusterGroup

markerClusterGroup.addLayer(marker)

5、将markerClusterGroup添加到地图中

map.addLayer(markerClusterGroup)

6、设置聚合圈的颜色

.marker-cluster-large div {
    background-color: rgba(254, 179, 0, 0.7) !important;
    color: #fff;
}
.marker-cluster-medium div {
    background-color: rgba(0, 167, 254, 0.7) !important;
    color: #fff;
}
.marker-cluster-small div {
    background-color: rgba(4, 241, 205, 0.7) !important;
    color: #fff;
}
.marker-cluster-small {
    background-color: rgba(4, 241, 205, 0.3);
}
.marker-cluster-medium {
    background-color: rgba(0, 167, 254, 0.3);
}
.marker-cluster-large {
    background-color: rgba(254, 179, 0, 0.3);
}