leaflet 大数据处理 点聚合功能

官方文档:https://github.com/SINTEF-9012/PruneCluster

引入文件;





添加随机点

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

你可能感兴趣的:(leaflet)