leaflet.markercluster实现聚合_markerclustergroup

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";
1
2
3
4

3.实例化 markerCluster

createMakerCluster = L.markerClusterGroup()
1

leaflet.markercluster 引用成功之后，会挂载至Leaftet 对象下。

4.添加点到 makerClusterGroup

this.modal8PointGeoList.map((item) => {
          let marker = L.marker(item._latlng)
          createMakerCluster.addLayer(marker)
        });
1
2
3
4

modal8PointGeoList是我调用接口获取到后台的数据处理后的点数组，通过遍历点数组添加点到makerClusterGroup

5.将 makerClusterGroup 加载到地图中

map.addLayer(createMakerCluster)
1

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})
1
2
3
4
5
6
7

在定义marker的时候在L.marker()方法里添加一个icon属性

7.添加bindPopup事件

let marker = L.marker(item._latlng , {icon: DefaultIcon}).bindPopup(item._html, {
                className: "stationInfo",
                direction: "top",
              }).openPopup();
1
2
3
4

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21