我使用 Mapbox Studio 作为映射和样式的基础,然后将 HTML 用于其他地图功能。
其中一项功能是在悬停或鼠标进入时更改图标不透明度。当您直接在 HTML 中创建它时,我已经检查了其他示例和所有其他参考功能。我设法改变了不透明度,但仅限于整个图层。
我可以以某种方式使用 e.features[0] 命令行将更改仅应用于一个功能而不是整个图层吗?
我使用此代码更改整个图层“图标”的不透明度(图层包含 5 个带有文本的图标):
// Change the cursor to a default and change opacity when the it enters a feature in the 'Icons' layer.
map.on('mouseenter', 'Icons', function() {
map.getCanvas().style.cursor = 'default';
var feature = e.features[0];
map.setPaintProperty('Icons', 'icon-opacity', 0.5);
});
// Change it back to a pointer and reset opacity when it leaves.
map.on('mouseleave', 'Icons', function() {
map.getCanvas().style.cursor = '',
map.setPaintProperty('Icons', 'icon-opacity', 1);
});
Run Code Online (Sandbox Code Playgroud)
谢谢!!!