javascript - Leaflet:使用 if 语句对表中的 geojson 数据进行排序和编辑

Question

我在表中显示 JSON 数据时遇到问题。我正在制作一张 map ，该 map 显示通过 overpass-turbo.eu 从 Openstreetmap 直接导出为 geojson 文件的数据。这意味着每个点都有不同的特征。我想在弹出窗口中显示尽可能多的信息，但将不必要的信息保留在表格之外，而且我希望链接可单击。这是我到目前为止的代码，它提供了每个点的基本表格 View 。这是一个演示:http://stefang.cepheus.uberspace.de/stackexample/

function everyPoint (feature, layer){
 var popupcontent = [];
    for (var prop in feature.properties) {
        popupcontent.push("<tr><td>" +prop + ": </td><td>" + feature.properties[prop].replace(";", ", ") + "</td></tr>");
    }

    var innerTable = popupcontent.join("");
    
    layer.bindPopup(
        "<h1>" +feature.properties.name +"</h1>"
        +"<table>" +innerTable + "</table>"
        +"<p> Old or outdated data? Change it on <a href='http://openstreetmap.org/" +feature.id  +"'> on openstreetmap.org</a>.</p>"
    );
};

L.geoJson(karlsruhe, {
    onEachFeature: everyPoint
}).addTo(map);

我想在这里做三件事:

1. 隐藏不必要的数据，主要是@ID、Shop:Farm
2. 将网址切换为超链接，主要是 website 和 contact.website
3. 将其他所有内容显示为表格中的文本

我试图用一个简单的 if 语句来解决这个问题，但只有 else block 运行:

var popupcontent = [];
    for (var prop in feature.properties) {
      if (prop == "id" ){
        //do nothing
        }
      else if (prop == "website"){
          popupcontent.push("<tr><td>" +prop + ": </td><td>" + "<a link href='" + feature.properties[prop] + "'></a></td></tr>");
        }

        else {
          popupcontent.push("<tr><td>" +prop + ": </td><td>" + feature.properties[prop].replace(";", ", ") + "</td></tr>");
        }
    }

我认为 if 函数中的语句有问题，但我无法弄清楚。感谢您的帮助

Answer 1

我找到了解决方案，只是有几个拼写错误，而且链接中没有文字:

 var popupcontent = [];
    for (var prop in feature.properties) {
      if (prop == "@id" ){
        //do nothing
        }
      else if (prop == "website"){
          popupcontent.push("<tr><td>" +prop + ": </td><td>" + "<a link href='" + feature.properties[prop] + "'>" +feature.properties[prop] +"</a></td></tr>");
        }

        else {
          popupcontent.push("<tr><td>" +prop + ": </td><td>" + feature.properties[prop].replace(";", ", ") + "</td></tr>");
        }
    }