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, "整改点检测点位图");