Mapbox GL JS:更新Studio中内置图层的多边形填充颜色
Mapbox GL JS:更新Studio中内置图层的多边形填充颜色
提问于 2021-08-06 20:36:26
我使用Mapbox Studio进行贴图/样式设置，使用GL JS添加用户交互性。我想要能够改变鼠标输入上的个别多边形的颜色，这是44个多边形的一部分，在一个层。
我已经查看了Mapbox文档/示例/教程，只有在JS中直接使用map.addLayer() it时才能找到使用这种类型的功能的答案。我设法改变了不透明度，但仅限于整个图层。
我曾尝试在另一个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 (我确实有)，我应该能够做到这一点。
回答 1
Stack Overflow用户
发布于 2021-08-07 08:00:50
您正在设置一个特性的hover状态，因此您应该使用hover来确定颜色，而不是特性ID，如下所示：
map.setPaintProperty(
'pta-cos-polygons',
'fill-color',
['case', ['to-boolean', ['feature-state','hover']], 'red', 'black']
);
});请注意，当鼠标移出时，您还需要更多代码来删除hover功能状态，否则所有功能将逐渐变为红色。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68687238
复制相关文章
相似问题
腾讯云开发者
