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
                 ]
             }

但是鉴于它是布尔值，有人可以帮助我理解如何将它变成具有三个状态而不是 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

这样您就可以支持任意数量的状态，每个状态都有自己的值 - 而不是简单的布尔值“true/false”

Mapbox - 实现绘画不透明度的三种状态

Mapbox - achieving three states of paint opacity

mapbox-gl

mapbox-gl-js