Leaflet重叠标记如何聚合同位置要素到单个弹窗展示

• GeoJSON图层包含100余个点位，存在部分点位坐标完全重合的情况
• 点击重叠位置的标记图标时，弹窗默认仅展示最后添加到地图的标记内容
• 需要实现读取同一坐标位置的所有要素，整合全部要素信息后在单个弹窗中统一展示

原有实现代码 #

GeoJSON测试数据 #

var mapFeatures = [{
    "type": "Feature",
    "properties": {
        "name": "Feature 1"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-0.303197, 51.408362]
    }
}, {
    "type": "Feature",
    "properties": {
        "name": "Feature 2"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-0.303197, 51.408362]
    }
}];

原有弹窗绑定逻辑 #

L.geoJSON(mapFeatures, {
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.name);
    }
}).addTo(map);

核心思路是先对所有点要素按坐标分组，渲染时给同坐标的所有点绑定整合后的内容，而非单个要素的独立内容，分两步实现：

• 第一步：预处理要素数据，将坐标转换为字符串作为唯一标识，把同坐标的要素归到同一分组，处理时对坐标保留固定小数位，避免浮点数精度误差导致同坐标点被误判为不同位置。
• 第二步：图层渲染阶段，遍历到每个点要素时，先查询该点所属分组下的全部要素，按需要的格式拼接所有要素的展示内容，再绑定到弹窗上。

完整实现代码如下：

// 按坐标分组所有点要素
const featureGroupByCoord = {};
mapFeatures.forEach(feature => {
    // 坐标保留6位小数后拼接为字符串作为分组key，可根据业务数据精度调整小数位数
    const coordKey = feature.geometry.coordinates.map(num => num.toFixed(6)).join(',');
    if (!featureGroupByCoord[coordKey]) {
        featureGroupByCoord[coordKey] = [];
    }
    featureGroupByCoord[coordKey].push(feature);
});

// 渲染图层并绑定整合后的弹窗
L.geoJSON(mapFeatures, {
    onEachFeature: function (feature, layer) {
        const coordKey = feature.geometry.coordinates.map(num => num.toFixed(6)).join(',');
        const sameLocationFeatures = featureGroupByCoord[coordKey];
        // 自定义弹窗内容格式，可按需调整展示的字段、样式
        const popupContent = sameLocationFeatures
            .map(f => `<div class="popup-item">${f.properties.name}</div>`)
            .join('<hr/>');
        layer.bindPopup(popupContent);
    }
}).addTo(map);

提示：如果需要更丰富的弹窗样式，直接修改popupContent的拼接逻辑即可，支持展示多属性字段、添加自定义交互元素。

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