Javascript 带有来自 GeoJSON 的附加信息的传单弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14506989/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Leaflet Popup with additional information from GeoJSON
提问by juhnz
I want to bind the additional information from geojson to a leaflet marker popup. I looked up a few things from the leaflet documentation but it doesn't work.
我想将 geojson 中的附加信息绑定到传单标记弹出窗口。我从传单文档中查找了一些内容，但它不起作用。
var map = L.map('map').setView([51.9, 7.6], 11);
L.tileLayer('http://{s}.tile.cloudmade.com/5e4495ff4b0d454eb0443225198b7e6c/997/256/{z}/{x}/{y}.png', {
maxZoom: 16
}).addTo(map);
var polygon = {
"type": "Feature",
"properties": {
"name":"City BoundingBox",
"style": {
"color": "#004070",
"weight": 4,
"opacity": 1
}
},
"geometry": {
"type": "Polygon",
"coordinates": [[
[7.5,52.05],
[7.7,51.92],
[7.6,51.84],
[7.4,51.94],
[7.5,52.05]
]]
}
};
var myLayer = L.geoJson().addTo(map);
//myLayer.addData(polygon);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
<?php
$mdjson = file_get_contents("http://xxx/ows?service=WFS&version=1.0.0&outputFormat=JSON&request=GetFeature&typeName=xx:yy&maxFeatures=50");
echo "var geojsonMD = ".$mdjson.";";
?>
myLayer.addData(geojsonMD);
L.geoJson(geojsonMD, {
style: function (feature) {
return {color: feature.properties.color};
},
onEachFeature: function (feature, myLayer) {
layer.bindPopup(feature.properties.description);
}
}).addTo(map);
Hope you can help me.
希望您能够帮助我。
Best regards.
此致。
回答by flup
Assuming the service returns data with similar properties as the polygon, you can indeed add them to one and the same layer.
假设服务返回的数据与多边形具有相似的属性，您确实可以将它们添加到同一层。
var myLayer = L.geoJson(geojsonMD, {
style: function (feature) {
return feature.properties.style;
},
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.name);
}
})
myLayer.addData(polygon);
myLayer.addTo(map);
http://jsfiddle.net/Wn5Kh/(without the downloaded data, for I do not have the URL)
http://jsfiddle.net/Wn5Kh/（没有下载的数据，因为我没有网址）
If the geojsonMDhas different feature properties, there's nothing wrong with adding two GeoJson layers. One for the data you retrieve from the service, and one with the polygon.
如果geojsonMD具有不同的特征属性，则添加两个 GeoJson 图层没有任何问题。一种用于您从服务中检索的数据，另一种用于多边形。
回答by Etienne Desgagné
As explained in the Leaflet documentation, you should use the "onEachFeature" to attach a popup with the desired information to each feature of your GeoJson:
如传单文档中所述，您应该使用“onEachFeature”将包含所需信息的弹出窗口附加到您的 GeoJson 的每个功能：
The onEachFeature option is a function that gets called on each feature before adding it to a GeoJSON layer. A common reason to use this option is to attach a popup to features when they are clicked
onEachFeature 选项是一个函数，在将每个特征添加到 GeoJSON 层之前，它会在每个特征上被调用。使用此选项的一个常见原因是在单击要素时将弹出窗口附加到要素
You can use it this way:
你可以这样使用它：
var myLayer = L.geoJson(polygon, {
onEachFeature: yourOnEachFeatureFunction
}).addTo(map);
function yourOnEachFeatureFunction(feature, layer){
if (feature.properties.name) {
layer.bindPopup(feature.properties.name);
}
}
In this example the popup will show the content of the property "name" for each clicked feature
在这个例子中，弹出窗口将显示每个点击特征的属性“名称”的内容
回答by juhnz
Now it works. I wanted leaflet automatically gets coords and feature information from a wfs and adding them to the map.
现在它起作用了。我希望传单自动从 wfs 获取坐标和特征信息并将它们添加到地图中。
thats the working code and thanks for your help =)
这就是工作代码，感谢您的帮助 =)
<?php
echo "var geojsonMD = ".$mdjson.";";
?>
myLayer.addData(geojsonMD);
var myLayer = L.geoJson(geojsonMD, {
style: function (feature) {
return feature.properties.style;
},
onEachFeature: function (feature, layer) {
var strtype = '';
if (feature.properties.mdtype == 0) {
strtype = 'aaa';
} else if (feature.properties.mdtype == 1) {
strtype = 'bbb';
}
layer.bindPopup('<b>' + feature.properties.mdname + '</b><br>'
+ strtype + '<br><br>'
+ feature.properties.mdadress + '<br>'
+ feature.properties.mdfon);
}
})
myLayer.addTo(map);
