1

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

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

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

  '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（我有），我应该能够做到这一点。

4

1 回答 1

0

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

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

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

于 2021-08-07T08:00:50.220 回答