如何在 Mapbox GL JS 中从 geojson 源获取独特的特征属性?

Question

我定义了一个mapbox geojson源：

map.addSource("places", {
type: "geojson",
data: "http://example.com/myfile.geojson",
});

我的 geojson 源文件具有以下结构：

{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"icon": "theatre"
},
"geometry": {
"type": "Point",
"coordinates": [-77.038659, 38.931567]
}},
{
"type": "Feature",
"properties": {
"icon": "music"
},
"geometry": {
"type": "Point",
"coordinates": [-77.020945, 38.878241]
}},
...]
}

我想获得"图标"属性的唯一名称(此处：剧院和音乐(。如何遍历源代码以获取这些唯一值？此处的目标是从这些唯一名称中添加图层以进行过滤。

Answer 1

我在这里找到了问题的答案。基本上，在源中添加一个图层，使用mapbox函数queryRenderedFeatures获取特征，然后在专用函数getUniqueFeatures的帮助下获得唯一特征。在我可以循环访问唯一功能以打印元素之后：

var features = map.queryRenderedFeatures({layers: ['my_layer']});
var uniqueFeatures = getUniqueFeatures(features, "icon"); 
uniqueFeatures.forEach(function(feature) {
var prop = feature.properties;
console.log(prop.icon);
})

getUniqueFeatures 函数：

function getUniqueFeatures(array, comparatorProperty) {
var existingFeatureKeys = {};
// Because features come from tiled vector data, feature geometries may be split
// or duplicated across tile boundaries and, as a result, features may appear
// multiple times in query results.
var uniqueFeatures = array.filter(function(el) {
if (existingFeatureKeys[el.properties[comparatorProperty]]) {
return false;
} else {
existingFeatureKeys[el.properties[comparatorProperty]] = true;
return true;
}
});
return uniqueFeatures;
}

Answer 2

我们可以使用 JavaScript Set 对象来存储唯一值。

const uniqueIcons = new Set();
const data = {}; // Your JSON data.
data.features.forEach((item) => {
uniqueIcons.add(item.properties.icon);
});

例：

const uniqueIcons = new Set();
const data = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"icon": "theatre"
},
"geometry": {
"type": "Point",
"coordinates": [-77.038659, 38.931567]
}
},
{
"type": "Feature",
"properties": {
"icon": "music"
},
"geometry": {
"type": "Point",
"coordinates": [-77.020945, 38.878241]
}
},
{
"type": "Feature",
"properties": {
"icon": "theatre"
},
"geometry": {
"type": "Point",
"coordinates": [-77.038659, 38.931567]
}
}
]
};
data.features.forEach((item) => {
uniqueIcons.add(item.properties.icon);
});
for(let icon of uniqueIcons) {
console.log(icon);
}