leaflet聚合(MarkerCluster)-标记过多,缩小后显示数量

1. 参考官方文档:https://github.com/Leaflet/Leaflet.markercluster

2. 效果图如图所示:

    

3. npm install leaflet.markercluster  运行此命令下载leaflet的markercluster插件

4. angular4中放入到angular.json中(css样式和js文件)

"node_modules/leaflet.markercluster/dist/MarkerCluster.css",

"node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css",

 

"node_modules/leaflet.markercluster/dist/leaflet.markercluster.js",

5. 在相应的ts(js)中调用,

     markerLayer用现在的

   

var heatMarkerLayer = L.markerClusterGroup();

     代替原来的标记点位组

   

var heatMarkerLayer = L.featureGroup();

     给标记组添加标记heatMarkerlayer,

 

  heatMarkerLayer.addLayer(marker);

  ......

  最后把定位点组heatMarkerLayer添加到地图上

this.leafletService.addOverlay(heatMarkerLayer, "整改点检测点位图");

 

转载自:https://blog.csdn.net/qq_34790644/article/details/82702011

You may also like...