在Mapbox中顯示嵌套GeoJson的屬性

Question

我無法查詢嵌套屬性功能，該功能是從geojson源導入的，並顯示在地圖框地圖上。

我可以通過單擊監聽器獲得該功能，但是只要嵌套了該屬性，該對象就會表示為字符串

{
 ...
  properties: {
   address: "{"place":"Bern","street":"Fischerweg","street_nr":"11","zip":"3012"}"
   price: 4500
 }
}

因此，單擊該對話框時，我只能在彈出窗口中顯示未嵌套的屬性。

我的代碼：

const features = this.queryRenderedFeatures(e.point, {
        layers: ['unclustered-point']
      });

console.log(feature.properties.price) --> 4500
console.log(feature.properties.address) --> string instead of object {"place":"Bern","street":"Fischerweg","street_nr":"11","zip":"3012"}
console.log(feature.properties.address.street) --> undefined (--> NOT WORKING because of nested property)


const popup = new mapboxgl.Popup({offset: [0, -15]})
   .setLngLat(feature.geometry.coordinates)
   .setHTML('<h3>Price: ' + feature.properties.price + '</h3>
                  <p>Street: ' + feature.properties.address.street + '</p>')--> NOT WORKING because of nested property
   .setLngLat(feature.geometry.coordinates)
   .addTo(map);

我讀到您可以使用表達式訪問嵌套屬性，但是如何在彈出窗口的html中應用表達式？ 有什么方法可以訪問嵌套屬性，還是必須重新設計geojson的結構？

非常感謝您的幫助！ 非常感謝，

問候西蒙

Answer 1

由於屬性值已轉換為JSON字符串，因此需要反向轉換：

Object.keys(feature.properties).forEach(function(key) {
  feature.properties[key] = JSON.parse(feature.properties[key]);
});

[ https://jsfiddle.net/s1d7hL82/ ]