官方文档:https://github.com/SINTEF-9012/PruneCluster
引入文件;
<link rel="stylesheet" href="static/leaflet/leaflet.css" />
<script src="static/leaflet/leaflet.js" type="text/javascript"></script>
<!-- 点聚合 -->
<script src="static/map/dist/PruneCluster.js"></script>
添加随机点
var leafletView = new PruneClusterForLeaflet();
//leafletView.Cluster.Size = 80;
var size = 10000;
for (var i = 0; i < size; ++i) {
var marker = new PruneCluster.Marker(59.91111 + (Math.random() - 0.5) * Math.random() * 0.00001 * size, 10.752778 + (Math.random() - 0.5) * Math.random() * 0.00002 * size);
leafletView.RegisterMarker(marker);
}
map.addLayer(leafletView)
重置marker属性、设置监听事件
//覆盖PreapareLeafletMarker方法
leafletView.PrepareLeafletMarker = function(leafletMarker, data) {
// 重置marker图标
leafletMarker.setIcon(
L.icon({
iconUrl: Math.random() > 0.5 ? 'helicopter.png' : 'airplane.png',
iconSize: [48, 48]
})
);
// 监听marker点击事件
leafletMarker.on('click',function(e){
console.log(e.target)
})
};
事件方法
// 重置图标
leafletView.RedrawIcons()
// 移除图标
leafletView.RemoveMarkers()
// 添加
leafletView.RegisterMarker()
// 设置集群区域,数字越大合并标记越多
leafletView.Cluster.Size = 87;
// 更改刷新,做任何更改必须调用
leafletView.ProcessView();