传单:加载geoJSON文件和特定的PopUp

Leaflet: Load geoJSON file and specific PopUp

本文关键字:PopUp 文件 加载 geoJSON 传单      更新时间:2023-09-26

在传单教程(http://leafletjs.com/examples/geojson/)中,他们展示了如何将标记或功能与弹出窗口相关联-弹出窗口可以包含HTML代码。

我希望用户能够指定一个特定的弹出加载使用URL。在传单教程的URLhttp://leafletjs.com/examples/geojson/example.html加载地图和功能-但是直到用户点击功能时才会出现弹出窗口。

是否有关联URL的方法?http://leafletjs.com/examples/geojson/example.html#Coors%40Field使用特定的功能,以便在用户指定URL时自动显示?

要解释你到底在问什么有点困难,但在我看来,你想在当前文档位置的哈希部分与地理特征的某些属性匹配时自动打开一个弹出窗口。

那么实例化你的层,然后循环使用L.GeoJSON.eachLayer()GeoJSON的特征,检查名称是否匹配哈希:

var group = L.geoJSON(geojson, {...}).addTo(map);
group.eachLayer(function(layer) {
    if ('#' + layer.feature.properties.name === document.location.hash) {
        layer.openPopup();
    }
});

注意以下几点:

  • 存储对L.GeoJSON实例的引用,以便您可以操作它(调用其eachLayer()方法)。
  • L.GeoJSON实例化一个传单层(L.Marker, L.PolylineL.Polygon)时,它将GeoJSON特征存储为新创建层的属性,因此layer.feature
  • document.location的哈希部分是一个总是以#开头的字符串。您应该事先清理它,特别注意URL编码。