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

Question

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

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

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

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

标签： javascriptmapbox-gl-js

Answer 1

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

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

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

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

以及其他各种组合。