使用 leaflet 和 geoJson 更新 POPUP 中的属性

Question

我根据以下内容制作了一个脚本：update properties of geojson to use it with leaflet

>>>Working script picture

但是我有多个参数的问题。我想放置 2 个单独的变量，例如：

layer.feature.properties.desc = content.value;
layer.feature.properties.number = content2.value;

但是

layer.bindPopup(content).openPopup()

只能打开一个-“content”，我输入的时候出现错误例如：

layer.bindPopup(content + content2).openPopup();

>>> Picture

所以我又做了一个脚本：

function addPopup(layer)
{let popupContent = 
'<form>' + 
'Description:<br><input type="text" id="input_desc"><br>' +
'Name:<br><input type="text" id="input_cena"><br>' +
'</form>';

layer.bindPopup(popupContent).openPopup();
document.addEventListener("keyup", function() {

link = document.getElementById("input_desc").value;
cena = document.getElementById("input_cena").value;

layer.feature.properties.link = link;
layer.feature.properties.cena = cena;   
}); 
};

>>>Picture

但不幸的是：

layer.feature.properties.link = link;
layer.feature.properties.cena = cena;

每个绘制的几何图形都相同。此外，当用户填写表格时，参数将在关闭 PopUp 后立即消失。使用 update properties of geojson to use it with leaflet 脚本，每次用户“单击”PupUp

时，脚本描述的参数都是可见的

谁能帮我解决这个问题？

Answer 1

您必须在 popupopen 事件中添加侦听器。将 addPopup 函数更改为：


var openLayer;
function addPopup(layer){
  let popupContent = 
  '<form>' + 
  'Description:<br><input type="text" id="input_desc"><br>' +
  'Name:<br><input type="text" id="input_cena"><br>' +
  '</form>';
  
  layer.bindPopup(popupContent).openPopup();
  
  layer.on("popupopen", function (e) {
    var _layer = e.popup._source;
    if(!_layer.feature){
        _layer.feature = {
        properties: {}
      };
    }
    document.getElementById("input_desc").value = _layer.feature.properties.link || "";
    document.getElementById("input_cena").value = _layer.feature.properties.cena || "";
    document.getElementById("input_desc").focus();
    openLayer = _layer;
  });
  
  layer.on("popupclose", function (e) {
    openLayer = undefined;
  })
  
};

L.DomEvent.on(document,"keyup",function(){
  if(openLayer){
    link = document.getElementById("input_desc").value;
    cena = document.getElementById("input_cena").value;

    openLayer.feature.properties.link = link;
    openLayer.feature.properties.cena = cena;   
  }
})

https://jsfiddle.net/falkedesign/ntvzx7cs/

使用 leaflet 和 geoJson 更新 POPUP 中的属性

Update properties in POPUP , with leaflet and geoJson

javascript

popup

geojson

leaflet