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

发布于 2025-01-10 03:38:57 字数 674 浏览 0 评论 0原文

我试图在以下情况下有 3 种不透明度状态：

Clicked = Opacity: 0.8
Hover = Opacity: 0.6
Default = Opacity: 0.4

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

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

但是鉴于它是布尔值，有人可以帮助我理解如何制作这是一个具有三个状态而不是两个状态的数组吗？

这是一个可用的示例：

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

James

原文

I am trying to have 3 states of opacity for the following situation:

Clicked = Opacity: 0.8
Hover = Opacity: 0.6
Default = Opacity: 0.4

I have this code so far:

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

However given it's boolean, can someone help me understand how I can make this into an array with three states rather than 2?

Here is a useable example:

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

James

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦年海沫深 2025-01-17 03:38:57

您应该能够执行类似以下操作

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

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

You should be able to do something like the following

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

Then you would just set "mystate" as required...

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

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

With the default being 0.4

This way you can support an arbitrary number states, each with their own value - rather than a simple Boolean "true/false"

回复收藏 0 原文

~没有更多了~