Mapbox GL JS：在 Studio 中更新图层上的多边形填充颜色

Question

我使用 Mapbox Studio 进行映射/样式设置，使用 GL JS 添加用户交互性。我希望能够更改 mouseenter 上的单个多边形颜色，该颜色是一层中总共 44 个多边形的一部分。

我已经检查了 Mapbox 文档/示例/教程，并且仅在直接在 JS 中使用 map.addLayer() 时才找到使用此类功能的答案。我设法改变了不透明度，但仅限于整个图层。

我曾尝试从另一个 SO post 使用它，但它会将整个图层中的所有多边形填充为黑色，即备用颜色。

  'Icons', 
  'icon-opacity', 
  ['match', ['get', 'id'], 'example-id', 0.5 , 1]

我的代码：

map.on('mouseenter', 'pta-cos-polygons', (e) => {
    const feature = e.features[0];
    map.setFeatureState({
        source: 'composite',
        sourceLayer: 'pta-cos-polygons',
        id: feature.id,
    },
    {hover: true}
    );
            
map.setPaintProperty(
    'pta-cos-polygons',
    'fill-color',
    ['match', ['get', 'id'], 'feature.id', 'red', 'black']
    );
});

我不知道这是否只是了解正确语法的问题，但似乎如果我有特定多边形的 id（我有）我应该能够做到这一点。

Answer 1

您正在为功能设置hover 状态，因此您应该使用hover 来确定颜色，而不是功能 ID，如下所示：

map.setPaintProperty(
    'pta-cos-polygons',
    'fill-color',
    ['case', ['to-boolean', ['feature-state','hover']], 'red', 'black']
    );
});

请注意，当鼠标移出时，您还需要一些代码来删除 hover 功能状态，否则您的所有功能都会逐渐变红。