使用GeoJSON FeatureCollection时，是否合并同一位置的多个单张标记的工具提示？ [英] Combining tooltips for multiple Leaflet markers of the same location when using GeoJSON FeatureCollections?
本文介绍了使用GeoJSON FeatureCollection时，是否合并同一位置的多个单张标记的工具提示？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我们以前的可复制版本，例如。单独构建标记(例如，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: '© <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>
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
这篇关于使用GeoJSON FeatureCollection时，是否合并同一位置的多个单张标记的工具提示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
