本文主要是介绍mapbox-gl 常用Expressions表达式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文章目录
- 一、前言
- 1.1 概念
- 1.2 Mapbox gl提供的表达式计算器
- 二、所有支持的运算符
- 2.1 颜色运算符
- 2.1.1 rgb
- 2.1.2 rgba
- 2.1.3 hsl
- 2.1.4 hsla
- 2.1.5 to-rgba
- 2.2 Math 数学计算运算符
- 2.2.1 +, -, *, /, %, ^
- 2.2.2 abs, ceil, floor, round
- 2.2.3 sin, cos, tan, asin, acos, atan
- 2.2.4 e, ln, ln2, log10, log2, pi
- 2.2.5 max, min
- 2.3 zoom、Heatmap 运算符
- 三、示例
一、前言
1.1 概念
表达式（expressions)是Mapbox GL JS的一个高级功能，它为数据的添加和渲染展示提供了更多的灵活性。
任何layout、paint或者filter的值都可以用一个expression表达式来细化，一个expression表达式定义了用如下计算器计算属性值的公式。
1.2 Mapbox gl提供的表达式计算器
Mapbox gl提供的表达式计算器有如下：
- Mathematical operators（数学 运算）：数学计算器用于数值计算和其他数值相关的属性
- Logical operators（逻辑 运算）：逻辑计算器用于计算布尔值和做条件决策
- String operators（字符串 运算）：字符计算器用于计算字符串
- Data operators（数据 运算）：提供调用数据源要素集属性的接口
- Camera operators（相机 运算）：提供定义当前地图视角参数的接口
二、所有支持的运算符
// prettier-ignore
type ExpressionName =// Types 类型| 'array' | 'boolean' | 'collator' | 'format' | 'literal' | 'number' | 'object' | 'string'| 'to-boolean' | 'to-color' | 'to-number' | 'to-string' | 'typeof'// Feature data 空间元素数据| 'feature-state' | 'geometry-type' | 'id' | 'line-progress' | 'properties'// Lookup| 'at' | 'get' | 'has' | 'length'// Decision| '!' | '!=' | '<' | '<=' | '==' | '>' | '>=' | 'all' | 'any'| 'case' | 'match' | 'coalesce'// Ramps, scales, curves| 'interpolate' | 'interpolate-hcl' | 'interpolate-lab' | 'step'// Variable binding| 'let' | 'var'// String 字符串| 'concat' | 'downcase' | 'is-supported-script' | 'resolved-locale' | 'upcase'// Color 颜色| 'rgb' | 'rgba'// Math 数学计算| '-' | '*' | '/' | '%' | '^' | '+' | 'abs' | 'acos' | 'asin' | 'atan' | 'ceil' | 'cos' | 'e'| 'floor' | 'ln' | 'ln2' | 'log10' | 'log2' | 'max' | 'min' | 'pi' | 'round' | 'sin' | 'sqrt' | 'tan'// Zoom, Heatmap| 'zoom' | 'heatmap-density';
2.1 颜色运算符
2.1.1 rgb
["rgb", number, number, number]: color
2.1.2 rgba
["rgba", number, number, number, number]: color
2.1.3 hsl
["hsl", number, number, number]: color
2.1.4 hsla
["hsla", number, number, number, number]: color
2.1.5 to-rgba
["to-rgba", color]: array<number, 4>
2.2 Math 数学计算运算符
2.2.1 +, -, *, /, %, ^
["+", number, number, ...]: number
["-", number, number]: number
["-", number]: number
["*", number, number, ...]: number
["/", number, number]: number
["%", number, number]: number
["^", number, number]: number
2.2.2 abs, ceil, floor, round
["abs", number]: number
["ceil", number]: number
["floor", number]: number
["round", number]: number
2.2.3 sin, cos, tan, asin, acos, atan
["sin", number]: number
["cos", number]: number
["tan", number]: number
["asin", number]: number
["acos", number]: number
["atan", number]: number
2.2.4 e, ln, ln2, log10, log2, pi
["e"]: number
["ln", number]: number
["ln2"]: number
["log10", number]: number
["log2", number]: number
["pi"]: number
2.2.5 max, min
["max", number, number, ...]: number
["min", number, number, ...]: number
2.3 zoom、Heatmap 运算符
["zoom"]: number
["heatmap-density"]: number
三、示例
这篇关于mapbox-gl 常用Expressions表达式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
