javascript - 如何遍历 GeoJSON 属性以显示在 Leaflet 标记中？

Question

我无法理解如何通过 Leaflet 的 oneachfeature 函数访问 GeoJSON 文件中的属性。

我想列出我的 GeoJSON 文件中“属性”下的所有项目 - “Producer_Subsystem”、“Title”、“FullAddress”等。

我假设我可以通过将每个写成 feature.property.Producer_Subsystem、feature.property.Title 等来单独列出它们，但我想用循环遍历它们。我尝试了 for..in 循环，但它不起作用。

我一直在玩 JSFiddle并意识到我不了解 oneach 功能如何工作的基础知识。

例如，这些尝试都失败了:

feature.property[Title]
feature.geometry.coordinates
feature.geometry[coordinates]

代码:

   var DCALayer = {
    "type": "FeatureCollection",
    "features": [
        {
            "geometry": {
                "coordinates": [
                    -77.0282395,
                    38.9143319
                ],
                "type": "Point"
            }, //end geometry
            "id": "The Coffee Bar 1",
            "type": "Feature",
            "properties": {
                "Producer_Subsystem": "shop Local",
                "Title": "The Coffee Bar 1",
                "Full Address": "1201 S St NW Washington DC ",
                "Latitude": 38.9143319,
                "Extra Area Tags": "",
                "Space Type": "Restaurant/bar",
                "Longitude": -77.0282395,
                "Month_Yr": "Fri Feb 01 00:00:00 GMT-05:00 2013",
                "Neighborhood": "Shaw",
                "Mass Produced": "unique",
                "ANC": "1B",
                "Genre_Materials": "Door sign: name",
                "Found By": "Me",
                "Adaptation": ""
            }
        }, //end feature[0]
        {
            "geometry": {
                "coordinates": [
                    -76.9973795,
                    38.9086077
                ],
                "type": "Point"
            },
            "id": "DC Empanadas",
            "type": "Feature",
            "properties": {
                "Producer_Subsystem": "Shop Local",
                "Title": "DC Empanadas",
                "Full Address": "1309 5th St NE Washington DC ",
                "Latitude": 38.9086077,
                "Extra Area Tags": "Union Market",
                "Space Type": "Store",
                "Longitude": -76.9973795,
                "Month_Yr": "Fri Feb 01 00:00:00 GMT-05:00 2013",
                "Neighborhood": "Trinidad",
                "Mass Produced": "multiple observed",
                "ANC": "5D",
                "Genre_Materials": "plastic/paper/sign",
                "Found By": "Me",
                "Adaptation": ""
            }
        },
        {
            "geometry": {
                "coordinates": [
                    -77.0318884,
                    38.9303663
                ],
                "type": "Point"
            },
            "id": "Sticky Fingers",
            "type": "Feature",
            "properties": {
                "Producer_Subsystem": "Shop Local",
                "Title": "Sticky Fingers",
                "Full Address": "1370 Park Rd NW Washington DC ",
                "Latitude": 38.9303663,
                "Extra Area Tags": "",
                "Space Type": "Restaurant/bar",
                "Longitude": -77.0318884,
                "Month_Yr": "Fri Feb 01 00:00:00 GMT-05:00 2013",
                "Neighborhood": "Columbia Heights",
                "Mass Produced": "multiple observed",
                "ANC": "1A",
                "Genre_Materials": "?/sign",
                "Found By": "friend",
                "Adaptation": ""
            }
        }
]};

   var map = L.map('map').setView([38.88301570451763, -77.03630447387695], 13);

   //tile layer
   L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'jmauro.ld1o2np1',
    accessToken: 'pk.eyJ1Ijoiam1hdXJvIiwiYSI6ImVYb0lheE0ifQ.Js4ba2SyUxHPCIDl1Aq1cQ'
}).addTo(map);

   //Marker Styles
var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

  var allDataLayer =  L.geoJson(DCALayer, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions);
    }, 

   onEachFeature: function (feature, layer) {   
       for(var props in feature.properties)
            var popupcontent= feature.geometry[coordinates];


 layer.bindPopup(popupcontent);  
      }//end onEachFeature

}).addTo(map);

Answer 1

确实有几个错误:

• 在上面的代码中，您使用了 property 而不是 properties(但是您在 jsfiddle 中更正了这个错误)。
• 您使用 HTTPS 协议(protocol)访问您的 jsfiddle，而 Leaflet 文件仅在 HTTP 上，这会使您的浏览器阻止它们。因此 Leaflet 根本不起作用。使用 HTTP 访问 jsfiddle 并能够加载仅在 HTTP 上的外部资源。

小错误:

• 我不确定您的 JSON 数据是否完全符合 GeoJSON 格式("type": "Feature" 应该是要素的属性，而不是(仅)在要素属性中) .
• 如果您想检索所有 属性，您应该聚合它们(使用任何方法，如压入数组、连接字符串等)，而不是将它们分配给同一个变量。这将使您的变量仅保存 last 属性的值。

代码示例:

onEachFeature: function (feature, layer) {
    var popupcontent = [];
    for (var prop in feature.properties) {
        popupcontent.push(prop + ": " + feature.properties[prop]);
    }
    layer.bindPopup(popupcontent.join("<br />"));

}

更新的 jsfiddle:http://jsfiddle.net/9y24Lfwn/1/

我建议你使用 Developers Tools 进行调试，它非常有用。在大多数浏览器上按 F12 键打开工具。