leaflet 点聚合（点击后散开）

1、创建地图

map = L.map('canvas_id', {
	maxZoom: 18,
	minZoom: 1,
	zoom: _zoom,
	center: [_center.lat, _center.lng],
	contextmenu: true,   // 右键点击事件，需要leaflet.contextmenu.min.js插件
    contextmenuWidth: 140,
     contextmenuItems: [{
         text: '关联设备...',
         callback: showCoordinates
     }]
})
 L.supermap.tiandituTileLayer(
   {
        layerType: 'img',
        key: '1d109683f4d84198e37a38c442d68311'
    }
).addTo(map);
L.supermap
    .tiandituTileLayer({
        isLabel: true,
        key: '1d109683f4d84198e37a38c442d68311'
    })
    .addTo(map);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2、聚合

 //删除原来的标注
 markerClusterer && markerClusterer.clearLayers && markerClusterer.clearLayers()
 
 // 初始化点聚合
 markerClusterer = L.markerClusterGroup({
	spiderfyOnMaxZoom: false,
	showCoverageOnHover: false,
	zoomToBoundsOnClick: true
 })

 // 聚合点点击事件，点击展开点
 markerClusterer.on('clusterclick', function(e) {
 	e.layer.zoomToBounds()
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3、点

let point = new L.marker([lat, lng], {icon: _selfIcon})
point.addEventListener('mouseover', function(e) {
	// 鼠标悬浮事件, 打开一个弹窗
	L.popup({minWidth: 100})
		.setLatLng(e.latlng.lat, e.latlng.lng)
		.setContent(_content)
		.openOn(map)
})
point.addEventListener('mouseout', function(e){
	// 鼠标移走关闭弹窗
	map.closePopup()
})

// 把点添加到 markerClusterer 
markerClusterer.addLayer(point)
// 把 markerClusterer 添加到 map 中
markerClusterer.addTo(map)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17