使用传单和 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()

只能打开一个-“内容”，例如放的时候有错误：

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/