Question

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

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

Answer 1

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

Answer 2

感谢您的回复。在那种情况下，当悬停事件出现时，在命令行中为“填充不透明度”定义“真”和“假”值的地方应该添加到哪里？

如果我不使用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.mousemove事件中重新调用：

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

如果仅将图层的“状态”替换为图层，将其称为“ PollyGon”，就看不到那里定义不透明度值了吗？谢谢！

Mapbox Studio：如何在以Mapbox Studio样式添加的图层上使用悬停效果？

2 个答案: