我使用 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);
});
谢谢你!!!
有几种方法可以实现这一目标。一种方法是将每个功能添加为单独的图层,这样当您想要更改图层中添加的图标的不透明度时'specific-icon-layer'
,你可以通过'specific-icon-layer'
to the Map#on
方法。如果您的标记数量相对最少,这可能是最直接的选择。
另一种方法是为每个图标功能添加唯一的 ID,以便您可以使用filter
结合表达Map#setPaintProperty and Map#queryRenderedFeatures (or Map#querySourceFeatures)。例如,假设您添加一个'id'
每个 GeoJSON 要素的属性,表示源中的图标'Icons'
层。然后,您可以设置类似于以下的事件侦听器这个例子,检索'id'
返回的特征,并使用'id'
(假设这里是'example-id'
) 更新绘制属性'Icons'
layer:
map.setPaintProperty(
'Icons',
'icon-opacity',
['match', ['get', 'id'], 'example-id', 0.5 , 1]
);
在这里,我们使用match and get表达“如果'id'
一个特征是'example-id'
,用不透明度绘制其图标0.5
,否则使用不透明度1
."
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)