图层表达式

case

在图层中想要实现 "if/else" 的逻辑，就可使用 'case' 表达式。

'fill-color': [
  'case',
  ['<=', ['get', 'value'], 20], '#FFD273',
  ['<=', ['get', 'value'], 40], '#E86D68',
  ['<=', ['get', 'value'], 60], '#A880FF',
  '#000' // 默认值
]

match 和 function

需要将输入的特定值映射不同的输出，可使用 'match' 表达式或 function 函数。

match

'fill-color': [
  'match',
  ['get', 'value'],
  1, '#FFD273',
  2, '#E86D68',
  3, '#A880FF',
  4, '#68E0E8',
  5, '#9BFF69',
  '#000'
]

function

'fill-color': {
  'property': 'value',
  'type': 'categorical'
  'stops': [
    [1, '#FFD273'],
    [2, '#E86D68'],
    [3, '#A880FF'],
    [4, '#68E0E8'],
    [5, '#9BFF69']
  ],
  'default': "#22a5f1" // 默认值
}

参考示例：唯一值图

interpolate

通过在输入和输出值对之间 插值 来产生连续、平滑的结果。

支持 linear、exponential 和 cubic-bezier，stops 数值必须严格增序。

示例1

'circle-radius': [
  'interpolate', 
  ['linear'], 
  ['get', 'value'],
  0, 5,   // value ≤ 0 时，半径为 5
  100, 15 // value ≥ 100 时，半径为 15
],

示例2

"line-gradient": [
  "interpolate",
  ["linear"],
  ["line-progress"],
  0, "blue",		// 起点0时，为 blue 色
  0.1, "royalblue",
  0.3, "cyan",
  0.5, "lime",
  0.7, "yellow",
  1, "red"			// 终点1时，为 red 色
]

示例3

"fill-color": {
  'interpolate',
    ['exponential', 0.5],	// 指数插值，指数变化率为 0.5
    ['zoom'],
    15, '#D9D3C9',
    18, '#ffd700'
}

interpolate-hcl 和 interpolate-lab 与其类似，但是输出必须为 Color，前者在 Hue-Chroma-Luminance 色彩空间插值，后者在 CIELAB 色彩空间插值。

参考示例：比例符号图、台风路径、渐变颜色线

step

通过评估由输入和输出值对定义的分段常数函数，产生离散的阶梯式结果。

stops 数值必须严格增序。

'circle-color': [
  'step',
  ['get', 'mag'],
  '#0098A3',	 // 默认为 #0098A3 色，其余色依次匹配
  6, '#00CA8D',
  7, '#37C508',
  8, '#98F300',
  9, '#EFFF85'
]

参考示例：点密度图、点聚合

within

如果要素完全包含在输入的多边形内，则返回 true，否则返回 false。

输入可以是类型为 Polygon、MultiPolygon、Feature 或 FeatureCollection 的有效 GeoJSON，仅支持 Point 和 LineString。

map.addLayer({
  id: "points",
  type: "circle",
  source: "points",
  paint: {
    "circle-radius": 10,
    // 当 point 位于 geojson 面中，颜色为 red，否则为 green
    "circle-color": ["case", ["within", geojson], "red", "green"]
  },
  layout: {
    visibility: "visible"
  }
});

参考示例：within

accumulated

返回累积的聚合属性的值，只能用于开启聚合的 GeoJSON 源的 clusterProperties 选项，如：

// 聚合点会新增 `sum` 属性，表示聚合的所有点的 `value` 值的和
map.addSource('points', {
  type: 'geojson',
  data: '/data/point.geojson',
  cluster: true,
  clusterMaxZoom: 10, 	// 最大聚合 zoom， 超过这个值则不聚合
  clusterRadius: 50,    // 聚合半径，默认 50
  clusterProperties: {
    sum: [
      ['+', ['accumulated'], ['get', 'sum']],
      ['get', 'value'], // 要素 value 属性
    ],
  },
})

参考示例：聚合

feature-state

要素状态，要素状态不是数据的某一属性，需要通过编码对某要素设置，如：给要素设置 hover 状态，然后在表达式中即可使用：['feature-state', 'hover']。

map.setFeatureState({ 
  source: 'states', 
  id: hoveredStateId 
}, { hover: false })

参考：Create a hover effect

coalesce

依次计算每一个表达式，直到得到一个有效值。比如下面表达式中，先取 name_zh-Hans 属性，如果不存在或为空，再取 name_en ，如果仍然无效，就取 name。

'text-field': [
  'coalesce',
  ['get', 'name_zh-Hans'],
  ['get', 'name_en'],
  ['get', 'name']
]

Lookup

以下举例假设要素具有如下属性：

"properties": {
  "name": "苹果,香蕉",
  "title": "有点意思",
  "district": {
    "code": 500000,
    "name": "重庆市"
  },
  "type": "fruit",
  "fruits": ["苹果", "香蕉"],
  "price": 99,
  "color": "#F00"
}

at

从数组中检索值。

'text-field': ['to-string', ['at', 1, ['get', 'fruits']]]   // 香蕉

get

获取要素属性，如果提供了第二个参数，则判断第二个参数对象。

'text-field': ['get', 'title'] // 有点意思
// 对象
'text-field': ['get', 'name', ['literal', { name: '重庆市' }]] // 重庆市
// 要素属性对象
'text-field': ['get', 'name', ['object', ['get', 'district']]], // 重庆市

// "to-number" 将 string 转为 number
'fill-extrusion-height': ['to-number', ['get', 'max_height']],

has

判断当前要素是否存在属性值，如果提供了第二个参数，则判断第二个参数对象。如：要素有 color 属性则使用，没有该属性则使用 #000：

'text-color': [
  'case',
  ['has', 'color'], 
  ['get', 'color'],
  '#000'
]

in

判断输入值（字符串或数组）中是否存在关键字。

如：判断 title 属性中是否存在 意思 子串和 fruits 属性中是否存在 苹果 项：

['in', '意思', ['get', 'title']   // true
['in', '苹果', ['get', 'fruits']  // true

slice

数组或字符串切片。

'text-field': ['slice', ['get', 'title'], 1, 3]   // 点意
'text-field': ['slice', ['get', 'fruits'], 1]     // ["香蕉"]

all

表示后续的表达式必须全部满足。

// 必须 lyr_name == road 和 tag == roadside 同时成立时，才会过滤
filter: ['all', ['==', 'lyr_name', 'road'], ['==', 'tag', 'roadinside']],

any

表示后续的表达式只有满足一个条件即可。

// lyr_name == road 或 tag == roadside 只有一个成立，就能过滤
filter: ['any', ['==', 'lyr_name', 'road'], ['==', 'tag', 'roadinside']],

stop

通常搭配 function 函数使用，可查看 match 的使用

// 半径基础值为 1.75，当 zoom 为 12 时，半径为 2，当 zoom 为 22 时，半径为 180
'circle-radius': {
  'base': 1.75,
    'stops': [
      [12, 2],
      [22, 180]
    ]
}

format

用于格式化文本。

'text-field': [
  'format',
  ['upcase', ['get', 'FacilityName']],  // 将 FacilityName 的值转为全大写
  { 'font-scale': 0.8 },
  '\n', // 文本换行
  {},   // 分割文本样式
  ['downcase', ['get', 'Comments']],    // 将 Comments 的值转为全小写
  { 'font-scale': 0.6 }
]