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

Question

我有一个带有可见图层的 Mapbox map ，其中显示了代表不同类型位置的多个圆圈。这些循环存储在单个 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 表达式需要第四个 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);