Mapbox - 实现油漆不透明度的三种状态

Question

我尝试为以下情况设置 3 种不透明状态:

• 点击 = 不透明度:0.8
• 悬停 = 不透明度:0.6
• 默认 = 不透明度:0.4

到目前为止我有这个代码:

             'paint': {
                 'fill-color': '#627BC1',
                 'fill-opacity': [
                     'case',
                     ['boolean', ['feature-state', 'hover'], false],
                     0.6,
                     0.4
                 ]
             }  

但是鉴于它是 bool 值，有人可以帮助我理解如何将其变成具有三种状态而不是 2 个状态的数组吗？

这是一个可用的示例:

https://codepen.io/hiven/pen/NWwBXJj

詹姆斯

Answer 1

您应该能够执行以下操作

paint: {
  "fill-color": "#627BC1",
  "fill-opacity": [
    "case",
    ["==", ["feature-state", "mystate"], 1],
    0.6,
    ["==", ["feature-state", "mystate"], 2],
    0.8,
    0.4
  ]
}

然后你只需根据需要设置“mystate”...

  // Hover 
  map.setFeatureState(
    { source: "states", id: clickedStateId },
    { mystate: 1 }
  );

  // Clicked
  map.setFeatureState(
    { source: "states", id: clickedStateId },
    { mystate: 2 }
  );

默认值为0.4

通过这种方式，您可以支持任意数量的状态，每个状态都有自己的值 - 而不是简单的 bool 值“真/假”