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

时间:2018-03-15 15:25:06

标签: javascript json leaflet openstreetmap geojson

我在表格中显示json数据时遇到问题。我正在制作一张地图,显示通过overpass-turbo.eu从Openstreetmap直接导出为geojson文件的数据。这意味着每个点都有不同的功能。我希望在弹出窗口中显示尽可能多的信息,但要保留表中的unessesary信息,此外我希望链接可以点击。到目前为止,这是我的代码,它提供了每个点的基本表视图。这是一个演示: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. 将网址切换为超链接,主要是网站和contact.website
  3. 将所有其他内容显示为表格中的文字
  4. 我尝试使用简单的if语句来解决这个问题,但只运行了else块:

    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函数中的语句有问题,但我无法弄明白。感谢您的帮助:))

1 个答案:

答案 0 :(得分: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>");
        }
    }