leaflet 大数据处理 点聚合功能

官方文档：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();