在地图中可能出现点位过多，显示过于密集的情况，这个时候直接显示点位效果并不是很好
我们用到的插件是Leaflet.markercluster。这个插件可以自动聚合一定范围的点位，并且显示聚合的点位数量，当地图放大超过聚合阈值时则显示原始点位。
初始化地图后，我们先在地图上添加两个marker
L.marker([30.65, 104.06]).addTo(map);
L.marker([30.64, 104.06]).addTo(map);
现在的效果应该是这样，两个marker挨得比较近，如果数量更多，就非常不利于查看
先引入插件
<!-- 给原始标记添加过渡动画效果 -->
<link rel="stylesheet" href="./css/MarkerCluster.css" />
<!-- 聚合点样式CSS -->
<link rel="stylesheet" href="./css/MarkerCluster.Default.css" />
<script src="./js/leaflet.markercluster-src.js"></script>
使用插件
// 创建图层let pointLayer = L.markerClusterGroup({
// 配置项});
pointLayer.addLayer(L.marker([30.65, 104.06]));
pointLayer.addLayer(L.marker([30.64, 104.06]));
map.addLayer(pointLayer);
在使用插件后我们可以看到两个marker聚合成了一个点位，点击这个聚合点地图会自动缩放到可以展示原始点的层级
这是一些常用的配置项（机翻）
-
showCoverageOnHover：当您将鼠标悬停在群集上时，它会显示其标记的边界。
-
ZoomToBoundsOnClick：当您单击集群时，我们会缩放到其边界。
-
SpiderfyOnMaxZoom：当您单击底部缩放级别的群集时，我们会对其进行蜘蛛化，以便您可以看到其所有标记。 （注意：如果集群内的所有项目仍然以最大缩放级别或disableClusteringAtZoom选项指定的缩放级别聚集，则 Spiderfy 会在当前缩放级别发生）
-
removeOutsideVisibleBounds：为了提高性能，将从地图中删除距离视口太远的簇和标记。
-
SpiderLegPolylineOptions：允许您指定PolylineOptions来设计蜘蛛腿的样式。默认情况下，它们是{ weight: 1.5, color: '#222', opacity: 0.5 }
插件还支持自定义聚类标记、自定义 Spiderfy 形状位置等功能具体请查看GitHub
