Mapbox常用表达式整理（3）

表达式参考

Decision 判定操作符

!, !=, <, <=, ==, >, >=（高频率使用）

// 语法
["!", boolean]: boolean
["!=", value, value]: boolean
["<", value, value]: boolean
["<=", value, value]: boolean
["==", value, value]: boolean
[">", value, value]: boolean
[">=", value, value]: boolean

all 逻辑与（高频率使用）

如果所有输入都为真则返回真，否则返回假。输入按顺序求值，并且求值是短路的：一旦输入表达式求值为false，则结果为false，不再求输入表达式。

// 语法
["all", boolean, boolean]: boolean

'filter': [
	'all',
	['==', 'extrude', 'true'],
	['>', 'height', i * binWidth],
	['<=', 'height', (i + 1) * binWidth]
],

常用于图层过滤。

any 逻辑或

如果任何输入为真则返回真，否则返回假。输入按顺序求值，并且求值是短路的：一旦输入表达式求值为true，则结果为true，不再求输入表达式。

// 语法
["any", boolean, boolean]: boolean

case 条件 （高频率使用）

选择第一个对应的条件计算为true的输出，或者选择默认值。

// 语法
["case",
    condition: boolean, output: OutputType,
    condition: boolean, output: OutputType,
    ...,
    fallback: OutputType
]: OutputType

'paint': {
	'fill-opacity': [
		'case',
		['boolean', ['feature-state', 'hover'], false],
		1,
		0.5
	]
}

match （高频率使用）

选择标签值与输入值匹配的输出，如果未找到匹配，则选择默认值。输入可以是任何表达式(例如[“get”， “building_type”])。每个标签必须是:

• 单个字符串
• 字符串数组，其值必须是所有字符串或所有数字(例如[100,101]或[“c”， “b”])。如果数组中的任何值匹配，则输入匹配，类似于“in”操作符。每个标签必须是唯一的。如果输入类型与标签类型不匹配，则结果将是默认值。

// 语法
["match",
    input: InputType (number or string),
    label: InputType | [InputType, InputType, ...], output: OutputType,
    label: InputType | [InputType, InputType, ...], output: OutputType,
    ...,
    fallback: OutputType
]: OutputType

// 单个字符串
'paint': {
	'circle-color': [
		'match',
		['get', 'ethnicity'],
		'White',
		'#fbb03b',
		'Black',
		'#223b53',
		'Hispanic',
		'#e55e5e',
		'Asian',
		'#3bb2d0',
		/* other */ '#ccc'
	]
}

// 数组
map.setFilter('airport', [
	'match',
	['get', 'abbrev'],
	filtered.map(function (feature) {
	return feature.properties.abbrev;
	}),
	true,
	false
]);

Ramps, scales, curves

interpolate（高频率使用）

通过插值输入和输出值对(“停止”)产生连续的、平滑的结果。输入可以是任何数字表达式(例如，["get"， "population"])。停止输入必须是严格升序的数字。输出类型必须为number、array<number>或color。
插值类型：

• ["linear"]: 在略小于或大于输入的两个端点之间进行线性内插。
• ["exponential", base]: 在两个端点之间进行指数插值，略大于或小于输入值。base控制输出增加的速率:值越高，输出越接近范围的高端。当值接近1时，输出线性增加。
• ["cubic-bezier", x1, y1, x2, y2]: 使用由给定控制点定义的三次贝塞尔曲线进行插值。

// 语法
["interpolate",
    interpolation: ["linear"] | ["exponential", base] | ["cubic-bezier", x1, y1, x2, y2],
    input: number,
    stop_input_1: number, stop_output_1: OutputType,
    stop_input_n: number, stop_output_n: OutputType, ...
]: OutputType (number, array<number>, or Color)

// 线性插值
'paint': {
	// use an 'interpolate' expression to add a smooth transition effect to the
	// buildings as the user zooms in
	'fill-extrusion-height': [
		'interpolate',
		['linear'],
		['zoom'],
		15,
		0,
		15.05,
		['get', 'height']
	],
	'fill-extrusion-base': [
		'interpolate',
		['linear'],
		['zoom'],
		15,
		0,
		15.05,
		['get', 'min_height']
	],
}

// 指数插值
map.setPaintProperty('building', 'fill-color', [
	'interpolate',
	['exponential', 0.5],
	['zoom'],
	15,
	'#e2714b',
	22,
	'#eee695'
]);

step（高频率使用）

通过计算由输入和输出值(“停止”)对定义的分段常数函数，产生离散的、阶梯式的结果。输入可以是任何数字表达式(例如，["get"， "population"])。停止输入必须是严格升序的数字文字。返回仅小于输入的stop的输出值，如果输入小于第一个stop，则返回第一个输出值。

// 语法
["step",
    input: number,
    stop_output_0: OutputType,
    stop_input_1: number, stop_output_1: OutputType,
    stop_input_n: number, stop_output_n: OutputType, ...
]: OutputType

paint: {
	// 小于100时，circles的颜色为Blue, 大小为20px 
	// 大于等于100且小于750之间时，circles的颜色为Yellow, 大小为30px（左闭右开区间）
	// 大于等于750时，circles的颜色为Pink, 大小为40px 
	'circle-color': [
		'step',
		['get', 'point_count'],
		'#51bbd6',
		100,
		'#f1f075',
		750,
		'#f28cb1'
	],
	'circle-radius': [
		'step',
		['get', 'point_count'],
		20,
		100,
		30,
		750,
		40
	]
}

String 字符串类型操作符

concat

连接字符串。

// 语法
["concat", value, value, ...]: string

'layout': {
	'icon-image': ['concat', 'square-rgb-', ['get', 'color']]
}

downcase

返回转换为小写的输入字符串。

// 语法
["downcase", string]: string

upcase

返回转换为大写的输入字符串。

// 语法
["upcase", string]: string

'layout': {
	'text-field': [
		'format',
		['upcase', ['get', 'FacilityName']],
		{ 'font-scale': 0.8 },
		'\n',
		{},
		['downcase', ['get', 'Comments']],
		{ 'font-scale': 0.6 }
	],
}