Leaflet如何检测markerClusterGroup内已有标记避免循环添加重复机场标记

核心问题原因 #

之前用数组过滤失败通常是三个共性原因：

• 直接用浮点数对比经纬度做匹配，受JS 浮点精度问题 影响，同一机场的经纬度微小偏差会导致匹配失效
• 存储已存在机场的数组状态和地图上的图层状态不同步，图层清空后数组没有同步重置
• 去重数组定义在AJAX回调内部，每次请求都会新建空数组，无法累计校验历史标记

简便实现方案（无需复杂逻辑） #

方案1：累计保留所有已加载机场的去重（适合相邻城市共享机场的展示场景） #

利用Set的O(1)查询复杂度做校验，不需要手动遍历数组匹配：

1. 初始化机场集群时，同步挂载一个空的Set作为去重缓存：

   if (map.hasLayer(capCityCluster)) {
     map.removeLayer(capCityCluster);
   }
   capCityCluster = new L.markerClusterGroup();
   // 挂载去重缓存，专门存已加载的机场唯一标识
   capCityCluster.existedAirportIds = new Set();
   map.addLayer(capCityCluster);
   

2. 遍历AJAX返回的机场数据时，先做存在性校验，不存在再创建标记：

   result.data.capCityAirports.items.forEach(airport => {
     // 生成稳定唯一ID：优先用接口返回的机场编号，没有则用保留6位小数的经纬度拼接
     // 保留6位小数时定位精度约0.1米，既不会因浮点精度误判同一机场，也不会混淆不同位置的相邻机场
     const airportId = airport.id || `${airport.position.lat.toFixed(6)}_${airport.position.lng.toFixed(6)}`;
     // 已存在则直接跳过
     if (capCityCluster.existedAirportIds.has(airportId)) return;
   
     // 原有创建机场标记的逻辑保持不变
     var airportIcon = L.icon({
       iconUrl: 'assets/img/icons/airport.png',
       iconSize: [50, 50],
       popupAnchor: [0, -15]
     });
     const airportName = airport.title;
     const airportLat = airport.position.lat;
     const airportLng = airport.position.lng;
   
     var airportMarker = L.marker(new L.LatLng(airportLat, airportLng), ({
       icon: airportIcon
     })).bindPopup(airportName);
     
     // 标记存入去重缓存后再添加到集群
     capCityCluster.existedAirportIds.add(airportId);
     capCityCluster.addLayer(airportMarker);
   });
   

方案2：仅展示当前点击城市的周边机场（适合不需要跨城市累计标记的场景） #

如果不需要保留不同城市加载过的机场标记，只需要在拿到AJAX返回数据的第一时间清空原有所有机场标记，再加新标记，从根源上避免重复：
在AJAX的success回调最开头加入清空逻辑：

success: function(result) {
  // 先清空集群内所有旧机场标记、重置去重缓存
  capCityCluster.clearLayers();
  capCityCluster.existedAirportIds.clear();

  // 原有遍历添加机场标记的逻辑保持不变
  result.data.capCityAirports.items.forEach(airport => {
    // ...
  });
}

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