使用 GeoJSON FeatureCollections 时，合并同一位置的多个 Leaflet 标记的工具提示？

Question

我们有一个包含标记的 Leaflet 地图，其中一些标记具有相同的位置，我们想要合并相同位置标记的工具提示。 I asked about this, providing a simplified reproducible eg, and a comment linked to 优雅地解决了 JS 的问题。我们现在的问题是我们对 JS 知之甚少，也不知道如何使它适应我们过于简单的 eg.

我们以前的可重现例如。单独构建标记（例如 L.marker([51.5, -0.4]).bindPopup("single popup").addTo(myMap);），但我们这样做是为了简化问题，我们的实际代码使用 GeoJSON FeatureCollection。改编我们之前的例子来使用这个：

<!DOCTYPE html>
    <style>
        html,
        body {
            margin: 0px;
            height: 100%;
        }

        body {
            display: flex;
        }
    </style>
<body>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
    <script src="https://unpkg.com/lodash@4.17.21/lodash.js"></script>

    <div id="mapid" style="flex: 1"></div>
    <script>var myMap = L.map("mapid");
        L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', }).addTo(myMap);
        myMap.setView([51.5, -0.09], 10);

        var geojsonFeatureCollection =
        {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-0.09,51.5]
                },
                "properties": {
                    "prop0": "text to show in combined pop up",
                    "ignore": "ignore this text"
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-0.09,51.5]
                },
                "properties": {
                    "prop0": "more text to show in combined pop up",
                    "ignore": "ignore this text"
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-0.4,51.5]
                },
                "properties": {
                    "prop0": "single popup",
                    "ignore": "ignore this text"
                }
            }]
        }

        L.geoJSON(geojsonFeatureCollection, {
    pointToLayer: function (feature, coordinates) {
        return L.marker(coordinates);
    }
})
.bindPopup((layer) => layer.feature.properties.prop0)
.addTo(myMap);
    </script>
</body>
</html>

评论linked to a demo的答案使用了JSON数据作为与FeatureCollection接近但不完全相同的点。它使用 Lodash 按“名称”对项目进行分组，这似乎是每个 JSON 项目的属性：var groupedData = _.groupBy(data, "name");，但我们不知道如何对“features.geometry.coordinates" 属性我们的数据。

我们如何将 GeoJSON FeatureCollection 数据像这样分组以组合同一位置的标记，然后自定义工具提示（例如，使用“prop0”和其他字段中的文本）？

Answer 1

您应该能够使用与

中提议的非常相似的方法重新处理（可能在运行时）您的 GeoJSON 数据

如果我理解正确，在你的情况下，你没有可用于识别相同位置的属性（链接 post 中的“名称”），因此你只能使用坐标来确定点特征是否应该合并在一起？

在这种情况下，您可以使用以下内容：

const groupedByCoords = _.groupBy(
  geojsonFeatureCollection.features,
  (feature) => feature.geometry.coordinates
);

const features = [];

     // Rework the Features to merge content
     for (const key in groupedByCoords){
       const items = groupedByCoords[key];
       const mergedContent = items.map((item) => item.properties.prop0).join("<br/>");
       const feature = _.cloneDeep(items[0]);
       feature.properties.prop0 = mergedContent;
       features.push(feature);
     }

// Replace your features
geojsonFeatureCollection.features = features;

现场演示：https://plnkr.co/edit/G4Laa9MIvTLkEFlo

使用 GeoJSON FeatureCollections 时，合并同一位置的多个 Leaflet 标记的工具提示？

Combining tooltips for multiple Leaflet markers of the same location when using GeoJSON FeatureCollections?

javascript

leaflet

lodash