[英]Mapbox GL JS Set Paint property on specific Feature in Layer
我使用 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'
传递给Map#on
方法。 如果您的标记数量相对较少,这可能是最直接的选择。
另一种方法是为每个图标功能添加唯一 ID,以便您可以将filter
表达式与Map#setPaintProperty
和Map#queryRenderedFeatures
(或Map#querySourceFeatures
)结合使用。 例如,假设您向每个 GeoJSON 要素添加了一个'id'
属性,代表'Icons'
图层源中的一个图标。 然后,你可以建立一个类似的事件监听这个例子中,检索'id'
的返回功能,并使用'id'
(假设这里是'example-id'
)来更新油漆财产'Icons'
层:
map.setPaintProperty(
'Icons',
'icon-opacity',
['match', ['get', 'id'], 'example-id', 0.5 , 1]
);
在这里,我们使用match
和get
表达式来说明“如果特征的'id'
是'example-id'
,则使用不透明度0.5
绘制其图标,否则使用不透明度1
。”
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.