geoJSON bindPopup示例
尝试覆盖geojson数据，这是工作，但我希望用户能够单击一个区域，并有一个弹出式窗口显示该区域的详细信息。在leaflet的网站上使用示例
L.geoJSON(data, {
style: function (feature) {
return {color: feature.properties.color};
}
}).bindPopup(function (layer) {
return layer.feature.properties.description;
}).addTo(map);当layer.feature不是L.Layer类型的属性时，我得到一个错误。我也对angular/typescript类型使用了@ types /leaflet，但它没有在那里列出。
如何访问geojson的功能属性以绑定弹出窗口？或者真的，我想做一个onClick事件来获取信息来设置表单数据。
提前谢谢。
编辑1:所以我想出了一个可行的方法。
在map ready上调用的函数中，我将layer设置为类型any而不是类型L.Layer，因为该属性直到运行时才存在。
this.geojson = L.geoJSON(this.data);
this.geojson.bindPopup((layer: any) => {
return layer.feature.properties ... ;
}这将给出我正在寻找的弹出窗口，其中包含来自geojson数据的数据。下一步将使用事件来设置表单数据，而不是bindPopup。
回答 2
Stack Overflow用户
发布于 2021-04-02 06:00:04
如果GeoJSON结构是这样的：
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"Prop1": 1,
"Prop2": "name1"
},
"geometry": {
"type": "Point",
"coordinates": [
79.8046875,
54.97761367069628
]
}
},
{
"type": "Feature",
"properties": {
"Prop1": 2,
"Prop2": "name2"
},
"geometry": {
"type": "Point",
"coordinates": [
107.22656249999999,
30.751277776257812
]
}
}
]
}您可以像这样创建一个Angular界面：
interface Geojson {
type: string;
features: {
type: string,
properties:{
Prop1:number,
Prop2:string
}
}[]
}只需用layer: Geojson替换layer: any即可。您不需要为所有的GeoJSON对象创建接口。它应该只包含您正在寻找的元素。因此，您甚至可以将其缩短为：
interface Geojson {
features: {
properties:{
Prop1:number,
Prop2:string
}
}[]
}Stack Overflow用户
发布于 2021-04-02 18:21:10
你可以使用geoJson(Leaflet)的onEachFeature方法在每一层上绑定弹出窗口，在那里你可以访问层和特征道具，使用它你可以在层上绑定弹出窗口，使用特征道具来显示内容。
onEachFeature: function (feature, layer) {
layer.addEventListener("click", () => {
layer.bindPopup(feature.properties.name);
});
}
});链接https://codesandbox.io/s/geojson-bind-popup-548yv?file=/src/leaflet.js进行演示。
在该文件中，您可以看到使用我们渲染的多边形的geojson.json文件。因此，单击我们绑定的每个多边形时，将弹出显示城市名称的弹出窗口
https://stackoverflow.com/questions/66909655
复制相似问题
腾讯云开发者
