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

时间 2019-11-09

标签 vue cli leaflet 聚合 leaflet.markercluster markercluster 栏目设计模式繁體版

原文原文链接

1、概述

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

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

什么是 Leaflet.markercluster ？

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

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

2、代码实现

1）引入 Leaflet.markercluster

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

在咱们的工程 map.js 引入less

// 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 文件，这样才算彻底引入。dom

2) 使用 leaflet.markercluster

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

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

（1）示例化 markerCluster

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

// src\utils\map.js

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

复制代码

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

（2）添加点到 makerClusterGroup

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

// 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()
  );
};


const createMakerByLatlng = (latlng, options) => {
  return $L.marker(latlng, options);
};

复制代码

(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, 当地图缩放至最大层级时，聚合点可彻底释放出全部点：

3、总结

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