动态更新 Mapbox GL 表达式以显示或隐藏几何图形

Question

我想根据用户是否选择单个几何图形在地图上动态显示或隐藏它们。我知道 Mapbox GL js 不直接支持这一点，所以我想找出最好的解决方法。我宁愿不更新源数据然后调用 map.getSource('mysource').setData(data);，因为这看起来有点矫枉过正。

是否可以动态更新表达式并调用 setPaintProperty，以便将一个数据子集的不透明度设置为 0%，从而隐藏它？然后我可以重新计算子集并在需要时重新设置 属性：

• 用户点击 hide 按钮，将 Feature 的唯一标识 属性 传递给我的函数
• 该函数获取现有的 hidden 和 shown 子集，然后通过动态重写这两个表达式将 Feature 的标识符从一个转移到另一个。
• 新表达式传递给map.setPaintProperty('layer', 'opacity', expression);

几何的总数非常少 (< 100)，而且它们不是特别复杂，所以我认为这不会太低效。

Answer 1

假设您在每个特征上都有一些 属性，例如 ID，以及应该显示的一组特征，通常的方法很简单：

map.setFilter(layer, '==', ['get', 'id'], arrayOfIds);

也可以按照您的建议进行，使其中一些透明，例如：

map.setPaintProperty(layer, 'line-opacity', ['match', ['get', 'id'], 
    arrayOfIds, 1.0,
    0]
);

以及其他各种组合。