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 實現點聚合的功能就完成了。根據官網的信息，此聚合點還支持不少功能，如修改聚合點的邊界樣式，修改樣式，事件響應以及自定義樣式等功能，到具體使用場景下可根據本身的需求使用相應的功能。