如何在Mapbox数据表达式中使用过滤器设置circle-color属性

Mapbox GL JS 数据表达式不支持直接使用原生 JS 的&&逻辑运算符，多条件同时成立（逻辑与）的判断需要使用内置的all操作符实现：将所有需要同时满足的判断条件作为all的子参数传入即可，只有所有子条件全部返回true时，整个判断才会成立。

核心条件写法 #

你需要的「count值大于等于120、且小于等于200」判断写法如下：

["all",
  [">=", ["get", "count"], 120],
  ["<=", ["get", "count"], 200]
]

完整配置示例 #

把多条件判断嵌入circle-color的case表达式中即可实现对应分色效果，注意case表达式是从上到下顺序匹配、命中即返回，要把约束更严格的区间判断放在靠前位置，避免被宽松条件提前拦截：

'circle-color': [
  "case",
  // 120 ≤ count ≤ 200 显示红色
  ["all",
    [">=", ["get", "count"], 120],
    ["<=", ["get", "count"], 200]
  ],
  "#ff0000",
  // count ≥12 显示黑色
  [">=", ["get", "count"], 12],
  "#000000",
  // 其余情况显示白色
  "#ffffff"
]

补充：如果需要实现多条件满足任意一个即可（逻辑或），可以使用any操作符替换all，用法和all一致。

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