时间戳

首页 > 解决方案 > 在 Mapbox 中显示嵌套 GeoJson 的属性

nested - 在 Mapbox 中显示嵌套 GeoJson 的属性

问题描述

我无法查询从 geojson 源导入并显示在 mapbox 地图上的嵌套属性功能。

我可以通过单击侦听器获得该功能，但是一旦嵌套了该属性，该对象就会表示为一个字符串

{
 ...
  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的结构？

非常感谢任何帮助！非常感谢，

问候西蒙

标签： nestedgeolocationmapboxgeojsonmapbox-gl-js

解决方案

由于属性值被转换为 JSON 字符串，因此需要进行反向转换：

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

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

推荐阅读