leaflet 点聚合（Leaflet.markercluster）

一、安装

npm i leaflet

npm i leaflet.markercluster

二、引入

import * as L from "leaflet";

import "leaflet/dist/leaflet.css";

// 聚合 

import "leaflet.markercluster/dist/MarkerCluster.css";

import "leaflet.markercluster/dist/MarkerCluster.Default.css";

import "leaflet.markercluster";

三、 使用

//聚合图层

 const markerClusterLayer = L.markerClusterGroup({

      showCoverageOnHover: false, // 为true时,当鼠标悬停在点上时，它会显示它聚合的边界

      zoomToBoundsOnClick: true, //  为true时,当鼠标点击某个点时，会缩放到它的边界范围

      chunkedLoading: true,

      maxClusterRadius: 50, // 聚类从中心标记覆盖的最大半径（以像素为单位）,默认值 80

    }).addTo(a.map); 

//矢量图层

var layers = [];

var marker = L.marker([32,113], { icon: L.icon({iconUrl:"icon.png",iconSize:[30,30]}) });

layers.push(marker);

markerClusterLayer.addLayers(layers); //添加矢量点到聚合图层