MapBox GL JS在图层中的特定要素上设置绘制属性 [英] Mapbox GL JS Set Paint property on specific Feature in Layer

问题描述

我使用Mapbox Studio作为映射和样式设置的基础，然后使用HTML提供其他地图功能。

其中一项功能是在悬停或鼠标输入时更改图标不透明度。我已经检查了其他示例，当您直接在HTML中创建特性时，所有其他示例都会引用特性。我设法改变了不透明度，但仅限于整个图层。

我能否以某种方式使用e.Feature[0]命令行将更改仅应用于一个要素，而不是应用于整个图层？

我使用此代码更改了整个图层‘Icon’(图层包含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)一起使用。例如，假设您将'id'特性添加到表示'Icons'层的源中的图标的每个GeoJSON要素。然后，您可以设置类似于this example的事件侦听器，检索返回要素的'id'，并使用'id'(假设此处为'example-id')更新'Icons'层的Paint属性：

map.setPaintProperty(
  'Icons', 
  'icon-opacity', 
  ['match', ['get', 'id'], 'example-id', 0.5 , 1]
);

这里我们使用match和get表达式表示"如果某个功能的'id'是'example-id'，则将其图标涂成不透明0.5，否则使用不透明1。"

这篇关于MapBox GL JS在图层中的特定要素上设置绘制属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！