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,output

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

例如（from the PR that added this feature to MapboxGL）：

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

Mapbox图层具有重复的ID

1 个答案: