Vue工程搭建Leaflet项目第五弹：聚类分析

前言

将物理或抽象对象的集合分成由类似的对象组成的多个类的过程被称为聚类。由聚类所生成的簇是一组数据对象的集合，这些对象与同一个簇中的对象彼此相似，与其他簇中的对象相异 ---- 百度百科

总之就是将相似的对象组成一个集合，leaflet 的聚类实现可以通过下载 leaflet.markercluster 插件来实现。将geoJSON对象添加进markerClusterGroup即可实现聚类效果；我这里是使用随机生成的坐标集传递进去。

一、下载 leaflet.markercluster

在终端输入以下命令

npm install leaflet.markercluster --save

二、引入依赖

引入css和js文件（以下三个文件都要引入，具体查看自己下载插件的版本和路径）

import “leaflet.markercluster/dist/MarkerCluster.css”;

import “leaflet.markercluster/dist/MarkerCluster.Default.css”;

import “leaflet.markercluster”;

三、生成随机坐标

// 生成随机坐标
    generateRandomCoords() {
      const coordinates = [];
      // 获取地图视野边界
      const bounds = window._map.getBounds();
      // 西南点坐标
      const southWest = bounds.getSouthWest();
      // 东北点坐标
      const northEast = bounds.getNorthEast();
      // 经差
      const lngSpan = northEast.lng - southWest.lng;
      // 纬差
      const latSpan = northEast.lat - southWest.lat;
      for (let i = 0; i < 50; i++) {
        coordinates.push(
          L.latLng(
            southWest.lat + latSpan * Math.random(),
            southWest.lng + lngSpan * Math.random()
          )
        );
      }
      this.coordinates = coordinates;
    },
           

四、生成聚类图层

// 生成聚类图层
    generateCluster() {
      // 聚类图层组
      const clusterGroup = L.markerClusterGroup({
        showCoverageOnHover: false, // 当鼠标移到聚类图层上时是否显示覆盖范围
        zoomToBoundsOnClick: true, // 单击聚类图标时是跳转到以聚类图标为中心
        chunkedLoading: true,
        maxClusterRadius: 40 // 最小聚类距离，默认80
      });
      // 添加聚类图层组到地图
      clusterGroup.addTo(window._map);
      // 装载marker
      const markerList = [];
      const features = this.coordinates;
      // console.log(jsonData);
      if (features.length) {
        features.forEach(feature => {
          // 此处的iconUrl 应以import的方式导入，不然会报错
          const icon = L.icon({
            iconUrl: Icon,
            iconSize: [25, 50]
          });
          const marker = L.marker(feature, {
            icon: icon
          });
          markerList.push(marker);
        });
        // 添加marker图层到聚类图层组
        clusterGroup.addLayers(markerList);
      }
    }
  }
           

五、效果展示

欢迎大家关注我的公众号，我也会在公众号同步更新。

若大家对进阶打怪有兴趣的话，欢迎订阅以下专栏

地址：WebGIS入门和进阶实战

项目地址，请查阅

地址：leaflet-app