前端之家

  1. 首页
  2. 问答

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

• 问答

我有一个带有可见图层的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',[
      'match',['get','class'],'C',0.5,'R',// everything else
    ]);
  } else if (filters.R.visible) {
    map.current.setLayoutProperty('type',// everything else
    ]);
  } else {
    map.current.setLayoutProperty('type','none');
  }
});

理想情况下，我想更改一个类的样式而不影响任何其他类，因此我可以创建一个开关并保持代码干净，但是match表达式需要第4行0,// everything else这是什么造成了我的问题。

请问有人有什么聪明的主意如何实现这一目标吗？我唯一能想到的就是将单层拆分为多个层，然后切换该层，但是我不确定这还会影响什么。

xuehua1911 回答：如何使用Mapbox表达式切换图层类样式

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

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','class']];
classes.forEach(c => expression.push(c,filters[c].visible ? 0.5 : 0));
expression.push(0); // "default" case

map.current.setPaintProperty('type',expression);
javascriptmapboxmapbox-gl-js
本文链接：https://www.f2er.com/2975993.html

大家都在问