mapbox-gl拾遗

expressions

https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/

定义

• 适用于Style中的layout,paint,filter属性，均可添加表达式。
• 表达式定义了如何使用逻辑、数学、字符串或颜色操作组合feature中的一个或多个properties或zoom，以生成适当的样式属性值或过滤器决策。

语法

[expression_name, argument_0, argument_1, ...]

1. 常用操作符expression_name

• *
• case
• ==,>=,<(比较的两边类型需要相同，都是数字或都是字符串)
• match
• all
• contact
  …

1. 大部分操作符可以多级嵌套

   		"line-dasharray": [
   	"case",
   	["==", ["get", "customStatus"], "PLANING"], // 规划
   	["literal", [4, 4]],
   	["==", ["get", "customStatus"], "TEST"], // 测试
   	["literal", [1, 2]],
   	// 回退选项
   	["literal", [1]],
   ],

2. 定义变量的表达式
   变量需要设定在使用变量的外层表达式

3. 获取feature属性

• ['get','propName']获取properties对象中的属性
• $propName获取定义在feature对象顶层的属性，例如$type,$geometry
  ``

分类

• data表达式

  {
      "circle-color": [
          "rgb",
          // red is higher when feature.properties.temperature is higher
          ["get", "temperature"],// r数值取temperature数值
          // green is always zero
          0,
          // blue is higher when feature.properties.temperature is lower
          ["-", 100, ["get", "temperature"]]// b数值=100-temp
      ]
  }

• camera表达式

  {
      "circle-radius": [
          "interpolate", ["linear"], ["zoom"],
          // zoom is 5 (or less) -> circle radius will be 1px
          5, 1,
          // zoom 5到10两个定义档位之间，interpolate运算符讲线性计算数值
          // zoom is 10 (or greater) -> circle radius will be 5px
          10, 5
      ]
  }