leaflet 点聚合（点击后散开）

ahh1005

已于 2022-04-08 10:29:36 修改

阅读量2.3k

点赞数 2

文章标签：前端街景地图

于 2021-11-16 10:49:15 首次发布

本文链接：https://blog.csdn.net/liyan_yanna/article/details/121350582

版权

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);

2、聚合

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

 // 聚合点点击事件，点击展开点
 markerClusterer.on('clusterclick', function(e) {
 	e.layer.zoomToBounds()
})

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)