Mapbox GL JS在图层中的特定功能上设置Paint属性

Question

我使用 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);
});

谢谢！！！

Answer 1

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

另一种方法是为每个图标功能添加唯一的 ID，以便您可以将filter 表达式与Map#setPaintProperty 和Map#queryRenderedFeatures（或Map#querySourceFeatures）结合使用。例如，假设您向每个 GeoJSON 特征添加一个 'id' 属性，表示 'Icons' 图层源中的一个图标。然后，您可以设置一个类似于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。”