Appearance
常用表达式浏览
场景：根据土地利用类型（landuse）显示不同的填充颜色
html
<script>
"fill-color": [
"match",
["get", "landuse"], // 获取属性
"park", "#00ff00", // 如果是 park，显示绿色
"school", "#ffff00", // 如果是 school，显示黄色
"hospital", "#ff0000",// 如果是 hospital，显示红色
"#cccccc" // 默认颜色（灰色）
]
</script>场景：根据人口数量（population）线性增加圆点半径。
html
<script>
"circle-radius": [
"interpolate",
["linear"], // 插值类型：线性
["get", "population"],// 输入值
0, 2, // 人口为 0 时，半径 2px
10000, 5, // 人口 1万 时，半径 5px
1000000, 20 // 人口 100万 时，半径 20px
]
</script>场景：根据地震震级（mag）显示分段颜色（非渐变）。
html
<script>
"circle-color": [
"step",
["get", "mag"], // 输入值
"#51bbd6", // < 4.0 显示蓝色
4.0, "#f1f075", // 4.0 ~ 5.0 显示黄色
5.0, "#f28cb1" // >= 5.0 显示粉色
]
</script>场景：在小比例尺下线宽很细，放大后线宽变宽。
html
<script>
"line-width": [
"interpolate",
["exponential", 1.5],// 指数插值，让变化更自然
["zoom"], // 输入当前缩放级别
5, 1, // Zoom 5 时，线宽 1px
10, 2, // Zoom 10 时，线宽 2px
18, 12 // Zoom 18 时，线宽 12px
]
</script>场景：动态显示/隐藏。
html
<script>
"icon-opacity": [
"case",
["has", "name"], 1, // 条件成立，返回 1
0 // 否则，返回 0
]
</script>场景：设置标签颜色。优先判断是否为重要城市，其次判断是否为省会，最后默认黑色。
html
<script>
"text-color": [
"case",
["==", ["get", "is_capital"], true], "#ff0000", // 是首都？红色
[">", ["get", "population"], 500000], "#0000ff",// 人口>50万？蓝色
"#000000" // 默认黑色
]
</script>场景：优先显示中文名，如果没有中文名则显示英文名，还没有则显示默认 name
html
<script>
"text-field": [
"coalesce",
["get", "name_zh"], // 优先尝试中文
["get", "name_en"], // 其次尝试英文
["get", "name"] // 兜底
]
</script>场景：圆的半径既随地图放大而变大，同时也受数据本身的 score 属性影响。 计算公式：半径 = (Zoom / 2) * score
html
<script>
"circle-radius": [
"*", // 乘法运算
["get", "score"], // 因子 1: 数据属性
["interpolate", ["linear"], ["zoom"], 0, 1, 20, 10] // 因子 2: 基于 zoom 的系数
]
</script>数据获取
用于从 GeoJSON 或 矢量切片中获取要素的属性数据。
| 参数 | 说明 | 类型 | 可选值 (语法示例) | 默认值 |
|---|---|---|---|---|
| get | 获取要素的属性值。如果属性不存在，返回 null。 | Any | ['get', '属性名'] | null |
| has | 检测要素是否包含指定的属性。 | Boolean | ['has', '属性名'] | false |
| id | 获取当前要素的唯一 ID。 | Number/String | ['id'] | - |
| geometry-type | 获取当前要素的几何类型。 | String | ['geometry-type']返回: 'Point', 'LineString' 等 | - |
| properties | 获取当前要素的所有属性对象。 | Object | ['properties'] | - |
| feature-state | 获取通过 setFeatureState 设置的状态值。 | Any | ['feature-state', '属性名'] | null |
| zoom | 获取当前地图的缩放级别。通常用于插值表达式中。 | Number | ['zoom'] | - |
逻辑判断
用于条件判断、多重分支选择和布尔逻辑。
| 参数 | 说明 | 类型 | 可选值 (语法示例) | 默认值 |
|---|---|---|---|---|
| match | 类似于 Switch 语句。根据输入值完全匹配，输出对应结果。性能极高，推荐用于分类颜色。 | Any | ['match', 输入值, 匹配1, 输出1, 匹配2, 输出2, 默认值] | - |
| case | 类似于 If-Elseif-Else 语句。按顺序判断条件，返回第一个为 true 的对应的输出。 | Any | ['case', 条件1, 输出1, 条件2, 输出2, 默认值] | - |
| coalesce | 按顺序计算参数，返回第一个非 null 的值。常用于处理缺失数据。 | Any | ['coalesce', 值1, 值2, 值3] | - |
| all | 逻辑“与” (AND)。所有条件都为 true 时返回 true。 | Boolean | ['all', 条件1, 条件2] | true |
| any | 逻辑“或” (OR)。任意一个条件为 true 时返回 true。 | Boolean | ['any', 条件1, 条件2] | false |
| ! | 逻辑“非” (NOT)。取反。 | Boolean | ['!', 条件] | - |
| == | 等于。 | Boolean | ['==', 值1, 值2] | - |
| != | 不等于。 | Boolean | ['!=', 值1, 值2] | - |
| > | 大于。 | Boolean | ['>', 值1, 值2] | - |
| < | 小于。 | Boolean | ['<', 值1, 值2] | - |
| >= | 大于等于。 | Boolean | ['>=', 值1, 值2] | - |
| <= | 小于等于。 | Boolean | ['<=', 值1, 值2] | - |
| in | 判断元素是否存在于数组或字符串中。 | Boolean | ['in', 元素, 数组] | false |
插值与渐变
用于实现平滑过渡（如随 Zoom 变化线宽，或随数值变化颜色）。
| 参数 | 说明 | 类型 | 可选值 (语法示例) | 默认值 |
|---|---|---|---|---|
| interpolate | 产生平滑的连续过渡。支持线性(linear)或指数(exponential)插值。 | Any (Number/Color) | ['interpolate', ['linear'], ['zoom'], 0, 1, 10, 5]语法: [类型, 输入, 停靠点1, 输出1, ...] | - |
| step | 阶梯式离散过渡。类似于分段函数。通常用于构建图例颜色块。 | Any | ['step', ['zoom'], 默认值, 停靠点1, 输出1, ...] | - |
数学运算
| 参数 | 说明 | 类型 | 可选值 (语法示例) | 默认值 |
|---|---|---|---|---|
| + | 加法。 | Number | ['+', 1, 2] | - |
| - | 减法。 | Number | ['-', 10, 2] | - |
| * | 乘法。 | Number | ['*', 2, 5] | - |
| / | 除法。 | Number | ['/', 10, 2] | - |
| % | 取模（余数）。 | Number | ['%', 10, 3] | - |
| ^ | 幂运算。 | Number | ['^', 2, 3] | - |
| abs | 绝对值。 | Number | ['abs', -5] | - |
| ceil | 向上取整。 | Number | ['ceil', 4.1] | - |
| floor | 向下取整。 | Number | ['floor', 4.9] | - |
| round | 四舍五入。 | Number | ['round', 4.5] | - |
| min | 取最小值。 | Number | ['min', 1, 2, 3] | - |
| max | 取最大值。 | Number | ['max', 1, 2, 3] | - |
| sqrt | 平方根。 | Number | ['sqrt', 9] | - |
| log10 | 以10为底的对数。 | Number | ['log10', 100] | - |
| ln | 自然对数。 | Number | ['ln', 2] | - |
| pi | 圆周率常量。 | Number | ['pi'] | 3.14159... |
字符串操作
| 参数 | 说明 | 类型 | 可选值 (语法示例) | 默认值 |
|---|---|---|---|---|
| concat | 连接多个字符串。 | String | ['concat', 'Hello', ' ', 'World'] | - |
| downcase | 转为小写。 | String | ['downcase', 'ABC'] | - |
| upcase | 转为大写。 | String | ['upcase', 'abc'] | - |
| is-supported-script | 判断是否支持指定的语言脚本（用于本地化优化）。 | Boolean | ['is-supported-script', 'Han'] | - |
| resolved-locale | 获取当前解析后的语言环境。 | String | ['resolved-locale', 'collator'] | - |
类型转换
| 参数 | 说明 | 类型 | 可选值 (语法示例) | 默认值 |
|---|---|---|---|---|
| to-string | 强制转换为字符串。 | String | ['to-string', value] | - |
| to-number | 强制转换为数字。如果无法转换，返回 fallback 默认值。 | Number | ['to-number', value, fallback] | - |
| to-boolean | 强制转换为布尔值。 | Boolean | ['to-boolean', value] | false |
| to-color | 强制转换为颜色值。如果无效，返回 fallback。 | Color | ['to-color', value, fallback] | - |
| typeof | 获取值的类型。 | String | ['typeof', value]返回 'string', 'number', 'boolean' 等 | - |