（一）Vue-CLI and Leaflet：起步 - 在 Vue-CLI 中使用 Leaflet

（二）Vue-CLI and Leaflet:地图基本操作（放大，缩小，平移，定位等）

（三）Vue-CLI and Leaflet: 添加 marker, polyline, polygon

（四）Vue-CLI and Leaflet: 添加 tooltips 和 popup

（五）Vue-CLI and Leaflet: 点、线、面 绘制 与 量测

（六）Vue-CLI and Leaflet: 添加各类图图层 ( AGS, OGC )

（七）Vue-CLI and Leaflet: 图层控制基本功能的实现

（八）Vue-CLI and Leaflet: AGS 属性查询与点图查询

（九）Vue-CLI and Leaflet: 点聚合 Leaflet.markercluster

一、概述

第五篇文章收到了一个评论。网友@Rackar 问到了如何正确引入 Leaflet.markercluster。

其实不难，这里使用就简单介绍一下 Leaflet.markercluster 的用法。

什么是 Leaflet.markercluster ？

有过地理信息系统开发经验的同学，应该对 makercluster 不陌生。在 h5 技术流行之前，为了改善在地图中展示海量点数据的效果，常用的方法就是采用点聚合的方式提升用户体验。就是我们要实现的功能，效果如下图所示：

这里的功能是实现是在之前文章的工程中实现的。

二、代码实现

1）引入 Leaflet.markercluster

正式代码之前，一定要仔细阅读 Leaflet.markercluster 的官方文档。然后，必须要做的事情就是在工程中安装插件。同时要注意下方的文件说明，讲的就是工程中必须要引用的文件。

在我们的工程 map.js 引入

// src\utils\map.jsimport "leaflet/dist/leaflet.css";import $L from "leaflet";// 引入 leaflet.markercluster
import "leaflet.markercluster/dist/MarkerCluster.css"
import "leaflet.markercluster/dist/MarkerCluster.Default.css"
import "leaflet.markercluster";// 解决默认 maker 无法显示的问题
import icon from "leaflet/dist/images/marker-icon.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";
let DefaultIcon = $L.icon({iconUrl: icon,shadowUrl: iconShadow
});
$L.Marker.prototype.options.icon = DefaultIcon;......复制代码

这里注意一定要引入 leaflet 之后 引入 leaflet.markercluster，否则会找不到 leaflet 对象，同时必须的 css 文件，这样才算完全引入。

2) 使用 leaflet.markercluster

引入完成之后，接着就到了如何使用。参考官网的示例，使用方法很简单。

1. 示例化 markerCluster。makerClusterGroup 实际山是一个图层；
2. 向添加 点 到 makerClusterGroup 中；
3. 将 makerClusterGroup 加载到地图中

（1）示例化 markerCluster

在 map.js 中添加 构造 makerClusterGroup 的方法

// src\utils\map.jsconst createMakerCluster = () => {return $L.markerClusterGroup();
};复制代码

leaflet.markercluster 引用成功之后，会挂载至 我们引入的 Leaftet 对象下。

（2）添加点到 makerClusterGroup

为了得到较好的显示效果，这里我添加了一个在当前地图的可视范围下添加随机坐标点的方法:

// src\utils\map.jsconst getRandomLatLng = map => {let bounds = map.getBounds(),southWest = bounds.getSouthWest(),northEast = bounds.getNorthEast(),lngSpan = northEast.lng - southWest.lng,latSpan = northEast.lat - southWest.lat;return $L.latLng(southWest.lat + latSpan * Math.random(),southWest.lng + lngSpan * Math.random());
};复制代码

(3) 将 makerClusterGroup 加载到地图中

以上所有的准备工作完成之后，我们就可以在 map.vue 中调用了, 这里添加随机点的数量为 10000

// src\views\Map.3.vue<template><div class="map-container" id="map-container"></div>
</template><script>
export default {name: "mapView",components: {},data() {return {map: null,OSMUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"};},mounted() {this.map = this.$utils.map.createMap("map-container", {maxZoom: 18});this.$utils.map.createTileLayer(this.map, this.OSMUrl, {});this.map.setView([51.505, -0.09], 13);let cluster = this.$utils.map.createMakerCluster();for (let i = 0; i < 10000; i++) {let latlng = this.$utils.map.getRandomLatLng(this.map);let maker = this.$utils.map.createMakerByLatlng(latlng);cluster.addLayer(maker);}this.map.addLayer(cluster);}
};
</script>
<style lang="less">
.map-container {position: absolute;left: 0;top: 0;width: 100%;height: 100%;
}
</style>复制代码

运行效果：

在 map.vue 调用时，map 对象中的 maxZoom 属性是必须的，否则在创建 **makerClusterGroup ** 会报错：

maxZoom 的作用决定 聚合点 可以放大到的最大 层级。直接用效果图来看 maxZoom 大小的区别：

maxZoom = 8, 当地图缩放至最大层级时，点击聚合点出现的效果如下：

maxZoom = 18, 当地图缩放至最大层级时，聚合点可完全释放出所有点：

三、总结

到此 使用 leaflet.markercluster 实现点聚合的功能就完成了。根据官网的信息，此聚合点还支持很多功能，如修改聚合点的边界样式，修改样式，事件响应以及自定义样式等功能，到具体使用场景下可根据自己的需求使用相应的功能。