Question

我目前有一张Leaflet地图，它读取shapefile，并在此地图上绘制多边形。单击多边形时，会出现一个弹出框。这很好用。下一步是在单击多边形时向某些弹出窗口添加2个按钮。
我还有一个JSON文件，每个条目包含一个键（OBJECTID，读取），然后是前一个和下一个字段。
这是JSON文件的使用方式，
每个多边形都是包含属性的对象。其中一个属性称为OBJECTID。所以我想检查何时绘制这些多边形，如果多边形的OBJECTID == JSON文件中的一个键，那么我想在弹出框中包含这两个按钮。
现在您感到困惑，这是代码：

 //adding shapefiles to the map
 var shpfile = new L.Shapefile('Corinth-1.zip',     {onEachFeature:function(feature, layer) {
  if (feature.properties) 
  { 
   //this looks at the object's properties and prints them all out in a popup box
   layer.bindPopup(Object.keys(feature.properties).map(function(k)
    {
      return k + ": " + feature.properties[k] ;
    }).join("<br />"),{maxHeight:200});
    //if feature.properties.OBJECTID exists in JSONFILE
    {
       //***make two buttons*****/
       //first I need to pull the other two columns from the JSON file where JSONFILE.key == OBJECTID and save them as variables for use in my buttons.
       //var prev = ?
       //var next = ? 
    }
  }
 }});
     shpfile.addTo(map);
     shpfile.once("load", function(){
      console.log("finished loaded shapefile");
     });

当涉及到时，我被困住了 1）检查OBJECTID是否是JSON文件中的密钥 2）设置两个变量，next和previous等于JSON文件的其他字段

任何帮助都会很棒！

Answer 1

根据你的描述，我假设你的json看起来像这样（如果它是一个数组）：

[
    {key: 100, prev: "prevField1", next: "nextField1"},
    {key: 101, prev: "prevField2", next: "nextField2"},
    ...
]

然后你可以准备好你的json，让它更舒服：

var preparedTable = {};

for(var i = 0; i < objTable.length; i++) {
  var entry = objTable[i];
  preparedTable[entry.key] = entry;
}

然后你的json以

的形式存在

{
  100: {key: 100, prev: "prevField1", next: "nextField1"},
  101: {key: 101, prev: "prevField2", next: "nextField2"},
  ...
}

所以你可以像这样使用它

// if the key exists
if(preparedTable[feature.properties.OBJECTID]) {
  // read prev and next values
  var prev = preparedTable[feature.properties.OBJECTID].prev;
  var next = preparedTable[feature.properties.OBJECTID].next;

  // create prev button
  var btnPrev = document.createElement('button');
  btnPrev.setAttribute('class', 'anyClass');
  btnPrev.innerHTML = prev;

  // create next button
  var btnNext = document.createElement('button');
  btnNext.setAttribute('class', 'anyClass');
  btnNext.innerHTML = next;

  // this assumes you have already a popup with the id "popup"
  // dynamically append buttons to popup
  var popup = document.getElementById("popup");
  popup.appendChild(btnPrev);
  popup.appendChild(btnNext);
}

因此，如果features.properties.OBJECTID中的密钥存在于对象preparedTable中，则会从中读取prev和next值，并创建两个按钮，其内容已设置到prev和next值，按钮会附加到标识为popup的弹出窗口。

如果这有帮助，或者我做出了错误的假设，请告诉我。

使用javascript

1 个答案: