使用GeoJSON FeatureCollection时，是否合并同一位置的多个单张标记的工具提示？

2022-08-05 00:00:00 leaflet javascript lodash

我们有一个包含标记的单张地图，其中一些标记具有相同的位置，并且我们希望为相同位置的标记合并工具提示。I asked about this, providing a simplified reproducible eg，以及链接到an answer on a different thread的评论，很好地解决了JS的问题。我们现在的问题是，我们几乎不了解JS，不知道如何使其适应我们过于简单化的示例。

我们以前的可复制版本，例如。单独构建标记(例如，L.marker([51.5, -0.4]).bindPopup("single popup").addTo(myMap);)，但我们这样做是为了问题简单，我们的实际代码使用GeoJSON FeatureCollection。将我们之前的Eg修改为使用此选项：

<!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>

<3-3]注释linked to a demo的答案，它使用JSON数据表示与FeatureCollection相近但不完全相同的点。它使用Lodash按"；name"；对项进行分组，这似乎是每个JSON项的属性：var groupedData = _.groupBy(data, "name");，但我们不知道如何对数据的"；Feature.geometry.coels"；属性执行相同的操作。

我们如何像这样对GeoJSON FeatureCollection数据进行分组，以组合相同位置的标记，然后自定义工具提示(例如。使用来自&q；属性0和其他字段的文本)？

解决方案

您应该能够使用与Bind more popups to the same marker or merge popups content

中建议的非常相似的方法重新处理(可能在运行时)GeoJSON数据

如果我理解正确的话，在您的情况下，您没有可用于标识相同位置(链接帖子中的名称和名称)的属性，因此您只能使用坐标来确定是否应将点要素合并在一起？

在这种情况下，您的代码可能如下所示：

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

相关文章