使用传单和 geoJson 更新 POPUP 中的属性

Question

我已经基于以下内容制作了一个脚本： 更新 geojson 的属性以将其与传单一起使用

>>>工作脚本图片

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

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

但

layer.bindPopup(content).openPopup()

只能打开一个 - “内容”，当我输入时出现错误，例如：

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

>>> 图片

所以我做了另一个脚本：

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;   
}); 
};

>>>图片

但遗憾的是：

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

对于每个绘制的几何体都是相同的。 此外，当用户填写表单时，参数将在关闭 PopUp 后消失。 每次当用户“单击”PupUp 时，geojson 的更新属性将其与传单脚本一起使用，刻有参数是可见的

谁可以帮我这个事？

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/