如何从 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

我找到了here 我的问题的答案。基本上，向源添加一个图层，使用 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);
}