geoJSON bindPopup 示例

Question

正在尝试覆盖正在运行的 geojson 数据，但我希望用户能够单击一个区域并让弹出窗口显示有关该区域的详细信息。使用传单网站上的例子

L.geoJSON(data, {
    style: function (feature) {
        return {color: feature.properties.color};
    }
}).bindPopup(function (layer) {
   return layer.feature.properties.description;
}).addTo(map);

leaflet example

我在 layer.feature 不是 L.Layer 类型的属性时收到错误消息。我也将 @types/leaflet 用于 angular/typescript 类型，但它未在其中列出。

您如何访问 geojson 的特征属性来绑定弹出窗口？或者真的，我想做一个 onClick 事件来获取信息以设置表单数据。

提前致谢。

编辑 1：所以我想出了一个有效的方法。

在准备好地图时调用的函数中，我将层设置为类型 any 而不是类型 L.Layer 因为属性直到运行时才存在。

this.geojson = L.geoJSON(this.data);
this.geojson.bindPopup((layer: any) => {
    return layer.feature.properties ... ;
}

这将使用来自 geojson 数据的数据提供我正在寻找的弹出窗口。接下来将代替bindPopup使用事件设置表单数据。

Answer 1

如果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: any 替换为 layer: Geojson。您不需要为所有 GeoJSON 对象创建接口。它应该只涵盖您正在寻找的元素。所以你甚至可以像这样缩短它：

interface Geojson {
  features: {
    properties:{
      Prop1:number,
      Prop2:string
    }
  }[]
}

Answer 2

您可以使用 geoJson(Leaflet) 的 onEachFeature 方法在每个图层上绑定弹出窗口，您可以在其中访问图层和功能道具，并使用它可以使用功能道具在图层上绑定弹出窗口以显示内容。

      onEachFeature: function (feature, layer) {
        layer.addEventListener("click", () => {
          layer.bindPopup(feature.properties.name);
        });
      }
    });

Link https://codesandbox.io/s/geojson-bind-popup-548yv?file=/src/leaflet.js 演示。

在该文件中，您可以看到使用我们渲染多边形的 geojson.json 文件。因此，在单击每个多边形时，我们绑定显示城市名称的弹出窗口

geoJSON bindPopup 示例

geoJSON bindPopup example

leaflet

angular

ngx-leaflet