在传单中编辑要素属性

Question

我想允许用户在单击要素时编辑要素属性。我知道 ArcGIS JS API 有一个非常好的实现，但我不能使用 ArcGIS JS，因为我的要素是从 geojson 创建的。在这一点上，我唯一拥有的是这个 bindPopup window，我想对其进行扩展，以便用户实际上可以 select 一个属性并对其进行编辑。

我看过 this post，但不知道如何将其应用到我的案例中。不幸的是，谷歌搜索也没有帮助。

这是我的脚本，带有一个简单的弹出窗口。任何帮助将不胜感激。

<script>
  var map = L.map('map').setView([52.52,13.384], 13);
  L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png').addTo(map);

  function onEachFeature(feature, layer) {
  if (feature.properties) {
      layer.bindPopup("<b>" + feature.properties.linkstr + "</b> has flow " + feature.properties.flow + ".");
    }
  }

  var streets = new L.geoJson(arcs, {
      onEachFeature: onEachFeature
  }).addTo(map);
</script>

Answer 1

这是一个非常简单粗暴的示例，希望它能为您指明正确的方向。在 onEachFeature 函数中，您可以直接访问该功能，以便对其进行编辑：

function onEachFeature (feature, layer) {
    // Create an input
    var input = L.DomUtil.create('input', 'my-input');
    // Set a feature property as value
    input.value = feature.properties.name;
    // Add a listener to watch for change on input
    L.DomEvent.addListener(input, 'change', function () {
        // Input changed, change property value
        feature.properties.name = input.value;
    });
    // Bind popup to layer with input
    layer.bindPopup(input);
}

这里有一个关于 Plunker 的例子：http://plnkr.co/edit/VzUfSD?p=preview

在传单中编辑要素属性

Edit feature attributes in leaflet

javascript

attributes

edit

leaflet