Mapbox GL JS在图层中的特定要素上设置绘制属性

Question

我将Mapbox Studio用作映射和样式的基础，然后将HTML用于其他地图功能。

其中一项功能是在悬停或鼠标进入时更改图标的不透明度。当您直接在HTML中创建功能时，我已经检查了其他示例，所有其他示例均涉及该功能。我设法更改了不透明度，但只更改了整个图层。

我可以使用e.features [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);
});

谢谢！！

Answer 1

您可以通过几种方法实现这一目标。一种方法是将每个要素添加为单独的图层，以便当您想要更改添加到图层'specific-icon-layer'中的图标的不透明度时，可以将'specific-icon-layer'传递给Map#on方法。如果标记的数量相对较少，这可能是最简单的选择。

[另一种方法是为每个图标功能添加唯一的ID，以便可以将filter表达式与Map#setPaintProperty和Map#setPaintProperty（或Map#queryRenderedFeatures）结合使用。例如，假设您向每个GeoJSON功能添加Map#queryRenderedFeatures属性，该属性表示Map#querySourceFeatures层的源中的图标。然后，您可以设置类似于Map#querySourceFeatures的事件侦听器，检索返回的特征的'id'，然后使用'Icons'（假设此处为this example）来更新'id'的paint属性层：

'id'

[这里，我们使用'example-id'和'Icons'表达式说：“如果要素的

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

为match，则将其图标涂上不透明度match，否则使用不透明度get。”