Mapbox 图层具有重复的 ID

Question

我正在使用 Mapbox-GL-JS 构建一个 Web 应用程序，它使用 Mapbox Studio 切片集添加图层作为分区图。然而，当我访问该层时，多个功能似乎都收到相同的 ID。

https://github.com/mapbox/mapbox-gl-js/issues/8284 这里提到这是由于我的数据造成的，但是数据集中没有 ID 字段： https: //www.dropbox.com /s/5ci0hosqakvdahx/townships.json?dl=0

https://jsbin.com/cuhewomepo/1/edit?html,js,输出

map.on("mousemove", "gemeentes", function (e) {
    if (e.features.length > 0) {
        if (hoverGemeenteId) {
            map.setFeatureState({
                source: 'gemeentes-src',
                sourceLayer: 'townships-0u4ffk',
                id: hoverGemeenteId
            }, {hover: false});
        }
        hoverGemeenteId = e.features[0].id;
        console.log(hoverGemeenteId);
        map.setFeatureState({
            source: 'gemeentes-src',
            sourceLayer: 'townships-0u4ffk',
            id: hoverGemeenteId
        }, {hover: true});
    }
});

以下是项目示例： https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/

每当一个城镇悬停时，它就会改变颜色，但是由于有多个城镇具有相同的 ID，因此多个区域会亮起，而不仅仅是悬停的区域。

编辑：当我运行以下代码时：

const filtered = map.querySourceFeatures('gemeentes-src', {
        sourceLayer: 'townships-0u4ffk',
        filter: ['>=', ['id'], 0]
    });

它清楚地表明有多个功能具有相同的 id，并且没有 ID 超过 249。这几乎就像有 250 个上限，而新功能又从 0 开始。

Answer 1

添加源时，您可以使用该选项promoteId根据属性为要素分配唯一 ID。

https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#vector-promoteId

例如（来自将此功能添加到 MapboxGL 的 PR）：

map.addSource('counties', {
    "type": "vector",
    "url": "mapbox://mapbox.82pkq93d",
    "promoteId": {"original": "COUNTY"}
});
...
map.setFeatureState({
    source: 'counties', 
    sourceLayer: 'original', 
    id: 'Marin County' // reference a feature by a county name for feature-state
}, {hover: true});