如何使用 Mapbox 表达式来切换图层类样式

Question

我有一个带有可见层的 Mapbox 地图，其中显示了代表不同类型位置的多个圆圈。这些循环存储在单个 Mapbox 层中。我的 react 应用程序中有一些功能允许我将这些圆圈的不透明度更改为 0 或 0.5，结果效果是打开或关闭。

我编写了一些非常粗略的代码，允许我切换每个圆圈的样式，但是必须为每个排列创建一个 if 语句是不可行的。

这是我目前所拥有的，仅实现了 2 个圆形类（C 和 R），最终版本将包含 9 个不同的类和很多我不想解决的 if 语句。

map.current.on('idle', () => {
  if (filters.C.visible && filters.R.visible) {
    map.current.setLayoutProperty('type', 'visibility', 'visible');
    map.current.setPaintProperty('type', 'circle-opacity', 0.1);
  } else if (filters.C.visible) {
    map.current.setLayoutProperty('type', 'visibility', 'visible');
    map.current.setPaintProperty('type', 'circle-opacity', [
      'match',
      ['get', 'class'],
      'C', 0.5,
      'R', 0,
      0, // everything else
    ]);
  } else if (filters.R.visible) {
    map.current.setLayoutProperty('type', 'visibility', 'visible');
    map.current.setPaintProperty('type', 'circle-opacity', [
      'match',
      ['get', 'class'],
      'C', 0,
      'R', 0.5,
      0, // everything else
    ]);
  } else {
    map.current.setLayoutProperty('type', 'visibility', 'none');
  }
});

理想情况下，我想在不影响任何其他类的情况下更改一个类的样式，这样我就可以创建一个开关并保持代码干净，但是 match 表达式需要第 4 个 0, // everything else 行，这就是导致我的问题的原因.

有没有人有任何聪明的想法，我可以如何实现这一点？我唯一能想到的是将单个图层拆分为多个图层并切换图层，但我不确定这可能会影响什么。

Answer 1

一个简单的重构方法如下：

const opacities = {
    C: filters.C.visible ? 0.5 : 0,
    R: filters.R.visible ? 0.5 : 0,
    // ...
}
map.current.setPaintProperty('type', 'circle-opacity', [
    'match',
    ['get', 'class'],
    'C', opacities.C,
    'R', opacities.R,
    // ...
    0, // everything else
  ]);

如果您想进一步重构以尽量减少重复并处理大量类：

const classes = ['C', 'R'];
const expression = ['match', ['get', 'class']];
classes.forEach(c => expression.push(c, filters[c].visible ? 0.5 : 0));
expression.push(0); // "default" case

map.current.setPaintProperty('type', 'circle-opacity', expression);