leaflet 多个图层做聚合_leaflet聚合

使用到的点位聚合插件是 leaflet.markercluster-src

git 地址:https://github.com/Leaflet/Leaflet.markercluster#customising-the-clustered-markers

使用方法

1.把相关css/js 引入项目文件夹后 使用import导入

import "./css/screen.css"
import "./css/MarkerCluster.css"
import "./css/MarkerCluster.Default.css"
import "./js/leaflet.markercluster-src"
1
2
3
4

2.创建加载点位的变量，我这里有10种类型图标,先定义变量 用于存放生成的marker 组

let polyMarkers={
  station:[],
  moun:[],
  patrol:[],
  physical:[],
  car:[],
  face:[],
  video:[],
  phone:[],
  wifi:[],
  high:[]
}
 markerArr.forEach((item)=>{
      polyMarkers[item]=L.markerClusterGroup();
    }) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.分组加载点位,这里markerArr主要用于匹配上面定义的polyMarkers 添加多个聚合组

let markerArr=["station","moun","patrol","physical","car","face","video","phone","wifi","high"]
let data=[
    {
				"id": 2,
				"lat": "36.386719",
				"lng": "119.047852",
				"title": "岗亭1",
				"type": "moun",
				"state": 1
			}, {
				"id": 3,
				"lat": "28.300781",
				"lng": "115.532227",
				"title": "岗亭2",
				"type": "moun",
				"state": 1
			}, {
				"id": 4,
				"lat": "36.964249",
				"lng": "118.073521",
				"title": "警务站1",
				"type": "station",
				"state": 1
			}, {
				"id": "37032101001316004014",
				"lat": "36.949660778045654",
				"lng": "118.09536159038544",
				"title": "车载12_巡特警x鲁xC-2898警",
				"type": "patrol",
				"state": 1
			}, {
				"id": "37032101001316004013",
				"lat": "36.960850954055786",
				"lng": "118.09093058109283",
				"title": "车载07_巡特警鲁xxxcC-2789警",
				"type": "patrol",
				"state": 1
			}, {
				"id": 32,
				"lat": "",
				"lng": "",
				"title": "巡逻队员高",
				"type": "physical",
				"state": 0,
				"iconType": "workPeople",
				"cid": "3"
			}, {
				"id": 33,
				"lat": "",
				"lng": "",
				"title": "执勤民警",
				"type": "physical",
				"state": 0,
				"iconType": "workPeople",
				"cid": "2"
			}, {
				"id": 34,
				"lat": "",
				"lng": "",
				"title": "xxxxx",
				"type": "physical",
				"state": 1,
				"iconType": "workPeople",
				"cid": "2"
			}
]
 //地图图标默认全选
  const [markerTo, setMarkerTo] = useState({
    station: true,
    stationData: [],
    moun: true,
    patrol: true,
    physical: true,
    unPhysical: true,
    car: true,
    face: true,
    video: true,
    phone: true,
    wifi: true,
    status: true,
    high: true
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

4.点位样式，数据循环添加marker, 其中L.markerClusterGroup(); 就是生成当前聚合组，至此可以实现多种点位类型加载

const polyMarker=data=>{
  
    if(map){
      data.forEach((elem,index)=>{
        let iconHtml = ``,opts=``;
        iconHtml = iconTemplate(elem);
        opts=L.icon({
          iconUrl: iconHtml,
          iconSize: [20, 20],
          iconAnchor: [12, 12],
          className: `${
            elem.state
              ? `device device-${index} marker-status-${elem.type} `
              : `device  marker-status-${elem.type}  unnormal `
          }`
        });
        let marker = L.marker([elem.lat, elem.lng], { icon: opts });
        marker.data = elem;
        marker.bindTooltip(`<span>${elem.title}</span>`, {
          offset: [10, -10],
          direction: "right"
        });
        markers.push(marker);
        marker.addEventListener('click',function(e){
          markerIconShow(elem)
        })
        markerArr.forEach((item)=>{
          if(elem.type==item){
              if(elem.state==2){
                unPolyMarkers[item].addLayer(marker)
              }else{
                polyMarkers[item].addLayer(marker)
              }
          
          }
        })
      })
      markerArr.forEach((item)=>{
        map.addLayer(polyMarkers[item])
        map.addLayer(unPolyMarkers[item])
       })
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

ps:效果图

5.若要对地图的marker进行显示隐藏 只需要把对应的聚合组删除掉即可,假设你有几个按钮，点击之后隐藏添加事件即可，

markerValue就是你点击的当前按钮的type值，通过比对删除对应的图层，其中使用eval 来计算出需要显示的type+Data ,得到在上面对数据进行分组的数据。

 //地图底部图标切换 地图点位的marker
  const markerToggle = (e, type) => {
     setMarkerValue(type);
    setMarkerTo({
      ...markerTo,
      [type]:!markerTo[type],
      status:2
    })
  };  


  //加载，隐藏地图marker
  useEffect(() => {
    if (markerTo.status == 2) {
        polyMarkers[markerValue].clearLayers()    
      } else {
        let data=eval(markerValue+"Data")
        polyMarker(data)
      }
    }
  }, [markerTo]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

效果图:

7.若有需求想要改变每个聚合的样式，只需要在初始化聚合组时候进行 iconCreateFunction ，这样就可以自定义样式了，以及添加你自己想要添加的数据

 markerArr.forEach((item,index)=>{
      polyMarkers[item]=L.markerClusterGroup({iconCreateFunction: function(cluster) {
        return L.divIcon({ html: `<div class="polyMarker-box    marker-status-${item}">
        <span class="polyMarker-box-${item} polyMarker-${item} "></span>
       <span> ${cluster.getChildCount()}</span></div>` });
      }});
    })
1
2
3
4
5
6
7

效果图