mapbox - Mapbox Studio：如何在 Mapbox Studio 样式中添加的图层上使用 hoover 效果？

Question

我想在 Mapbox Studio 中创建的地图上制作胡佛效果。我添加了一个 SHP 功能作为填充，在“样式编辑器”中将初始不透明度设置为 0.5。当鼠标悬停时，如何制作将不透明度更改为 1 的 hoover 效果？

我一直在使用这个例子（https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/），但这个例子中的数据来自外部 GEOJOSN。我想使用已经在 Mapbox Studio 中设置样式的图层。可能吗？谢谢

Answer 1

是的，这可以通过引用您已经在 Mapbox Studio 中添加的源名称来实现，而不是使用示例中所示的Map#addSourceand来实现。Map#addLayer也就是说，您可以将'states'示例中的源名称替换为使用 Mapbox Studio 添加到地图样式中的源名称。

Answer 2

谢谢你的回复。在这种情况下，当悬停事件出现时，我应该在哪里添加为“fill-opacity”定义“true”和“false”值的命令行？

如果我不使用 Map#addSource 和 Map#addLayer，则没有线可以放置新的不透明度值。我对此真的很陌生，所以请理解我。

map.addLayer({
'id': 'state-fills',
'type': 'fill',
'source': 'states',
'layout': {},
'paint': {
'fill-color': '#627BC1',
**'fill-opacity': [
'case',
['boolean', ['feature-state', 'hover'], false],
1,
0.5**
]
}
});

然后，在 map.on mousemove 事件中调用该案例：

map.on('mousemove', 'state-fills', function(e) {
if (e.features.length > 0) {
if (hoveredStateId) {
map.setFeatureState(
{ source: 'states', id: hoveredStateId },
**{ hover: false }**
);

如果我只是为我的图层替换图层“状态”，我们称之为“PollyGon”，我看不到那里定义不透明度值吗？谢谢！