（已关闭）Leaflet.js GeoJson 文件：如何在点击事件中获取图层名称

Question

今年我只是在 Leaflet.JS 地图上进行了一些冒险。我是新手..

由于我不熟悉 Leaflet.JS 层事件，所以我希望有一些建议或解决方案，谁已经找到了它。

我像这样将 geojson 直接发送到 Leaflet

var geojsonFeatures =  {
      "type": "FeatureCollection",
      "properties": {'name': 'TestLayer'},
      "features":[
      {
        "type": "Feature",
        "properties": {'id': '01','popupContent': 'id=01'},
        "geometry": {
          "type": "Point",
          "coordinates": [
            175.2756,
            -37.7772
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {'id': '02','popupContent': 'id=02'},
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [
              [
                175.27364730834958,
                -37.77322501372662
              ],
              [
                175.27849674224854,
                -37.776617142149554
              ],
              [
                175.28351783752439,
                -37.784486280685925
              ],
              [
                175.28879642486572,
                -37.781365860467126
              ],
              [
                175.2824878692627,
                -37.7707486617024
              ],
              [
                175.27364730834958,
                -37.77322501372662
              ]
            ]
          ]
        }
      }
    ]};

然后我将其加载为可以编辑的图层

//--load geojson file to maps--// 
L.geoJson(geojsonFeatures, {
  onEachFeature: onEachFeature
    });

在这里，如果可能的话，我想取回 GeoJson 图层名称。我以为我可以从 properties.name:-

下的 FeatureCollection 中获取

var geojsonFeatures =  {
"type": "FeatureCollection",
"properties": {'name': 'TestLayer'},

在 onClick 事件中，我尝试取回图层名称

//--- when click layer: get layer name, object id and json ----//
function onEachFeature(feature, layer) {  //set each layer can be do editing
  drawnItems.addLayer(layer);
  layer.on('click', function(e){
    console.log(e.target.feature.properties.name);
    alert(drawnItems.getLayerId(layer));
  });
}

结果：undefined on console.log for ..properties.name
结果：随机不喜欢 100 警告 ..getLayerId(layer)

但是，我仍然可以获得图层名称。我被困在这里。如何解决这个问题呢？？我已经考虑了 2 天了....

更新 25/2/22

成功获取 FeatureCollection 属性数据后，我继续@GrzegorzT。示例多层搜索。我可以保留此功能的主要问题：

...
.then(function (data) {
    // your name of layer
    // "properties": { "name": "TestLayer" },
    console.log(data.properties.name);

    let layer = new L.GeoJSON(data, {
      onEachFeature: function (feature, layer) {
        layer.on("click", function (e) {
          alert(e.target);
        });

每次单击图层对象（几何）时，我仍然需要图层名称和 e.target 值。

请大家帮帮我..

更新 28/2/22

我发现很少有关于操作 LeafletJS 和 GeoJson 的方法。同时兄弟@Grzegorz T. 真的拯救了我的日子。我关闭了这个线程并打开了关于 Edit Selected Geometry Only 的新线程。

Answer 1

您需要创建一个单独的 geojson 数据文件然后使用 fetch 或其他一些 jquery ajax 或 axios 获取数据并将 GeoJson 添加到地图中。

fetch("geojsonFeatures.geojson")
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    // your name of layer
    // "properties": { "name": "TestLayer" },
    console.log(data.properties.name);

    let layer = new L.GeoJSON(data, {
      onEachFeature: function (feature, layer) {
        layer.on("click", function (e) {
          alert(e.target);
        });
      },
    });
  });

编辑

完整示例multi-layer-search
以下是如何添加多个文件的示例：

["bar", "pharmacy", "restaurant"].map((json) => {
  fetchData(`./data/${json}.json`).then((data) => {
    L.geoJSON(data, geojsonOpts).addTo(poiLayers);
  });
});

（已关闭）Leaflet.js GeoJson 文件：如何在点击事件中获取图层名称

(Closed) Leaflet.js GeoJson File: How I can get layer name on click event

javascript

geojson

leaflet