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

（五）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.js

import "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

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

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

（1）示例化 markerCluster

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

// src\utils\map.js

const createMakerCluster = () => {
  return $L.markerClusterGroup();
};

复制代码

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

（2）添加点到 makerClusterGroup

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

// src\utils\map.js

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

转载于:https://juejin.im/post/5d04b127f265da1b855c53e6