如何在Mapbox的icon-color中嵌套case表达式？语法问题求助

首先可以明确的是，在Mapbox表达式中使用嵌套case来组合多个字段（比如status和priority）确定图标颜色是完全可行的，你的思路没问题，大概率是语法细节或者数据匹配的问题导致失败。

先帮你梳理下现有代码的结构，然后指出可能的问题点：

你的原表达式代码（格式化后更清晰）：

"icon-color": [
  "case",
  ["==", ["get", "status"], "s1"],
  [
    "case",
    ["==", ["get", "priority"], "p1"], "#111111",
    ["==", ["get", "priority"], "p2"], "#222222",
    "#DDDDDD"
  ],
  ["==", ["get", "status"], "s2"],
  [
    "case",
    ["==", ["get", "priority"], "p1"], "#333333",
    ["==", ["get", "priority"], "p2"], "#444444",
    "#DDDDDD"
  ],
  "#777777"
]

可能出错的几个地方 #

• 括号配对问题：如果你的原始代码没有正确格式化，很容易出现括号不匹配的情况（比如少写了闭合括号），这是Mapbox表达式最常见的错误之一。可以用JSON格式化工具校验下结构是否合法。
• 字段名或值的大小写/拼写错误：比如你的源数据里status字段是不是写成了Status，或者priority的取值是P1而不是p1？Mapbox的表达式是大小写敏感的，必须和数据完全匹配。
• 图层类型或图标设置冲突：确保你的图层是symbol类型，并且已经正确设置了icon-image属性，不然icon-color不会生效。

验证后的正确写法 #

如果排除了上面的问题，你可以试试下面格式化后的版本，结构更清晰，也更容易排查问题：

"icon-color": [
  "case",
  // 当status为s1时，根据priority分支设置颜色
  ["==", ["get", "status"], "s1"],
  [
    "case",
    ["==", ["get", "priority"], "p1"], "#111111",
    ["==", ["get", "priority"], "p2"], "#222222",
    "#DDDDDD" // s1下其他priority的默认颜色
  ],
  // 当status为s2时，根据priority分支设置颜色
  ["==", ["get", "status"], "s2"],
  [
    "case",
    ["==", ["get", "priority"], "p1"], "#333333",
    ["==", ["get", "priority"], "p2"], "#444444",
    "#DDDDDD" // s2下其他priority的默认颜色
  ],
  "#777777" // 所有其他status的默认颜色
]

另外，也可以用另一种扁平化的写法（把两个条件合并），可能更易读：

"icon-color": [
  "case",
  ["all", ["==", ["get", "status"], "s1"], ["==", ["get", "priority"], "p1"]], "#111111",
  ["all", ["==", ["get", "status"], "s1"], ["==", ["get", "priority"], "p2"]], "#222222",
  ["all", ["==", ["get", "status"], "s2"], ["==", ["get", "priority"], "p1"]], "#333333",
  ["all", ["==", ["get", "status"], "s2"], ["==", ["get", "priority"], "p2"]], "#444444",
  ["==", ["get", "status"], "s1"], "#DDDDDD",
  ["==", ["get", "status"], "s2"], "#DDDDDD",
  "#777777"
]

这种扁平化的写法把每个status+priority的组合作为一个独立条件，逻辑更直观，也能避免嵌套可能带来的括号问题，你可以根据自己的习惯选择。

内容的提问来源于stack exchange，提问作者Lars Ladegaard