javascript - 编辑传单中的功能属性

Question

我希望允许用户在单击某个要素时编辑要素属性。我知道 ArcGIS JS API 有一个非常好的实现，但我无法使用 ArcGIS JS，因为我的功能是从 geojson 创建的。 此时我唯一拥有的是这个bindPopup 窗口，我想扩展它以便用户可以实际选择一个属性并编辑它。

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

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

<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