Leaflet 标记聚合

上次更新 2025年8月20日星期三 3:16:20 字数 0 字 时长 0 分钟

在本节中，我们将介绍如何使用 Leaflet.js 创建标记聚合效果。标记聚合可以帮助我们在地图上处理大量标记，使其更加整洁和易于查看。

示例

TIP

leaflet-markercluster 是一个 Leaflet 插件，用于创建标记聚合效果。

新标签页预览

代码实现

<!-- Start of Selection -->
<template>
  <div id="map" style="width: 100%; height: 100%;"></div>
</template>

<script>
export default {
  mounted() {
    const urlLayer =
      "http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=d32c6748c80f81a44acd8633cea41dfd";

    let map = L.map("map", {
      center: [39.094899, 117.33083], // 天津
      zoom: 4, // 缩放比列
      zoomControl: true,
      doubleClickZoom: false, // 禁用双击放大
      attributionControl: false, // 不展示版权信息
    });

    // 底图
    const baseLayer = L.tileLayer(urlLayer, {
      maxZoom: 18,
      minZoom: 0,
      attribution: "天地图",
      subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
    });
    baseLayer.addTo(map);

    // 创建标记聚合组
    const markers = L.markerClusterGroup();

    // 添加标记
    const locations = [
      { lat: 23.1291, lng: 113.2644, name: "广东省" },
      { lat: 34.757, lng: 113.6249, name: "河南省" },
      { lat: 26.8154, lng: 106.3315, name: "贵州省" },
      { lat: 39.0949, lng: 117.3308, name: "天津" },
      { lat: 29.6469, lng: 91.1322, name: "西藏" },
      { lat: 43.666, lng: 126.1924, name: "吉林" },
      { lat: 36.62, lng: 95.66, name: "青海" },
      { lat: 20.044, lng: 110.1999, name: "海南" },
      { lat: 31.2304, lng: 121.4737, name: "上海" },
      { lat: 43.793, lng: 87.6, name: "新疆" },
      { lat: 38.469, lng: 106.2782, name: "宁夏" },
      { lat: 40.8183, lng: 111.6704, name: "内蒙古" },
      { lat: 39.9042, lng: 116.4074, name: "北京" },
      { lat: 41.8057, lng: 123.4315, name: "辽宁" },
      { lat: 29.563, lng: 106.55, name: "重庆" },
      { lat: 36.0583, lng: 102.4572, name: "甘肃" },
      { lat: 37.8734, lng: 112.562, name: "山西" },
      { lat: 34.3293, lng: 108.9402, name: "陕西" },
      { lat: 29.1042, lng: 115.8221, name: "江西" },
      { lat: 30.5928, lng: 114.3055, name: "湖北" },
      { lat: 30.2741, lng: 120.1551, name: "浙江" },
      { lat: 24.882, lng: 102.8329, name: "云南" },
      { lat: 31.82, lng: 117.2272, name: "安徽" },
      { lat: 27.6104, lng: 112.9834, name: "湖南" },
      { lat: 23.1242, lng: 108.32, name: "广西" },
      { lat: 32.0603, lng: 118.7969, name: "江苏" },
      { lat: 26.5783, lng: 106.7135, name: "贵州" },
      { lat: 38.4161, lng: 115.4839, name: "河北" },
    ];

    locations.forEach((location) => {
      const marker = L.marker([location.lat, location.lng]).bindPopup(
        location.name
      );
      markers.addLayer(marker);
    });

    // 将标记聚合层添加到地图
    map.addLayer(markers);
  },
};
</script>
<!-- End of Selection -->