Leaflet通过fetch加载标记时 markerCluster近距离坐标点无法聚合问题

核心问题原因 #

• 标记挂载逻辑错误：创建标记时先直接添加到了地图实例，后加入聚合组，导致标记脱离聚合组件管控，无法触发近点聚合计算。
• 聚合关闭阈值设置不合理：配置disableClusteringAtZoom: 13代表缩放等级≥13时自动关闭聚合，而同一城市的标记通常在12-13级缩放时可见，刚好触发了聚合关闭规则。
• 额外遗漏点：原代码创建了OSM底图图层但未挂载到地图，可能导致地图显示异常。

修复方案 #

调整标记挂载逻辑，所有标记仅添加到聚合组，由聚合组统一托管，同时调高聚合关闭的缩放阈值，补全底图挂载逻辑即可，修复后代码如下：

let iconPicture = L.icon({
  iconUrl: "/assets/images/cycling.png",
  iconSize: [20, 20],
  popupAnchor: [0, -10],
});

function initMap() {
  var map = L.map("mapId").setView([48.833, 2.333], 12);

  var osmLayer = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
    attribution: "© OpenStreetMap contributors",
    minZoom: 3,
    maxZoom: 19,
  });
  // 补全底图挂载
  osmLayer.addTo(map);

  var markersGroup = L.markerClusterGroup({
    disableClusteringAtZoom: 16, // 调高阈值，缩放到16级再关闭聚合
    spiderfyOnMaxZoom: false,
    removeOutsideVisibleBounds: true,
  });

  fetch("/api/map")
    .then((response) => response.json())
    .then((result) => {
      result.forEach((element) => {
        const marker = L.marker([element.latitude, element.longitude], {
          icon: iconPicture,
        })
          .bindPopup(
            () => `
              <span>${element.name}</span>
              <br>
              <div class='img-hover-zoom'>
                <a href="/collection50_60/${element.id}">
                  <img class='picturePopup' src="/assets/images/uploads/${element.pictureFront}">
                </a>
              </div>
              <br>
              ${element.city}
              <br>
              <a href="/collection50_60">${element.years}</a>
            `,
            { className: "pop-up-leaflet", direction: "top" }
          )
        // 仅添加到聚合组，不要直接挂到map
        markersGroup.addLayer(marker);
      });
      map.addLayer(markersGroup);
    })
    .catch(() => console.error("接口请求错误"));
}
window.onload = initMap;

问题相关截图 #

内容的提问来源于stack exchange，提问作者Yukiliam