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

人气:916 发布:2022-10-16 标签: javascript lodash leaflet

问题描述

我们有一个包含标记的单张地图,其中一些标记具有相同的位置,并且我们希望为相同位置的标记合并工具提示。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>

398