如何從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]
    }},
    ...]
}

我想獲得“ icon”屬性的唯一名稱（此處為：劇院和音樂）。 如何遍歷源代碼以獲得這些唯一值？ 此處的目的是從這些唯一名稱中添加一個圖層，以進行過濾。

Answer 1

我在這里找到了我問題的答案。 基本上，在源中添加一個圖層，使用mapbox函數queryRenderedFeatures來獲取要素，然后在專用函數getUniqueFeatures的幫助下獲取獨特的要素。 在我可以遍歷uniqueFeatures以打印元素之后：

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); }