JavaScript Leaflet开发：如何点击多边形获取预设的自定义ID

核心实现逻辑 #

Leaflet提供的L.geoJSON图层加载接口自带onEachFeature回调，会在每一个GeoJSON要素（对应你的多边形）渲染为图层时触发，我们只需要在这个回调里给每个图层绑定点击事件，直接读取对应要素里的自定义ID字段即可。 #

完整代码示例 #

// 你的GeoJSON数据
var geojson = {
  "type": "FeatureCollection",
  "features": [{
    "postalAreaId": item.PostalAreaId,
    "type": "Feature",
    "properties": {
      "name": "Coors Field",
      "amenity": "Baseball Stadium",
      "popupContent": "This is where the Rockies play!"
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": []
    }
  }]
};

// 加载GeoJSON图层并绑定点击事件
L.geoJSON(geojson, {
  onEachFeature: function (feature, layer) {
    // 给当前多边形图层绑定点击事件
    layer.on('click', function () {
      // 直接读取要素里的自定义postalAreaId
      const targetId = feature.postalAreaId;
      // 拿到ID后可执行你的业务逻辑，比如打印、弹窗、调用接口等
      console.log('点击的多边形自定义ID为：', targetId);
      // 弹窗展示示例，和预期效果一致
      layer.bindPopup(`区域ID：${targetId}<br>区域名称：${feature.properties.name}`).openPopup();
    })
  }
}).addTo(map); // 此处map为你初始化的Leaflet地图实例

可选优化：把ID挂载到图层实例 #

如果后续你需要在其他场景（非本次点击事件）也快速获取图层对应的ID，可以直接把ID存到图层对象的自定义属性上：

onEachFeature: function (feature, layer) {
  // 挂载自定义ID到图层实例
  layer.postalAreaId = feature.postalAreaId;
  layer.on('click', function (e) {
    // 点击时直接从事件目标取ID
    console.log('自定义ID：', e.target.postalAreaId);
  })
}

注意事项 #

如果你后续把自定义ID改存到properties字段下，取值时调整为feature.properties.你的ID字段名即可，逻辑完全一致。

效果示例 #

#

内容的提问来源于stack exchange，提问作者mohsen es