最近在弄mapbox的js框架,maobox的框架还是很不错的,把官方文档看了多遍也渐渐有了许多的感觉,之前弄是用android SDK,在android中利用mapbox框架,因为公司有业务牵扯到前台展示,之前的前端是用canvas,没用任何地图框架,这种办法无疑是很累的,而且实现的效果也一般,之前在搞android的时候就看了js的框架的例子,感觉效果很棒,最近就开始研究一下,将自己的需求动态的效果实现了,目前是在图层渲染这一块还不是很清晰,官方文档关于Expressions这一块相对较为复杂,下面就将这一块翻译一下,以备后续查阅学习。
任何layout、paint或者filter的值都可以用一个expression表达式来细化,一个expression表达式定义了用如下计算器计算属性值的公式。Mapbox gl提供的表达式计算器有如下:
——Mathematical operators:数学计算器用于数值计算和其他数值相关的属性
——Logical operators:逻辑计算器用于计算布尔值和做条件决策
——String operators:字符计算器用于计算字符串
——Data operators:提供调用数据源要素集属性的接口
——Camera operators:提供定义当前地图视角参数的接口
Expressions表达式用json数组来表达,表达式数组的第一个元素是一个表示计算器的字符串,例如“*”或“case”。后面的元素是表达式的参数,每个参数要么是个原始的值(字符串、数字、布尔值或null),要么是另一个表达式数组。
[expression_name, argument_0, argument_1, ...]
数据表达式是任何能够调用要素数据的表达式,这种表达式使用如下一种数据计算器:get
,has
,id
,geometry-type
,properties
, orfeature-state。数据表达式利用要素集的属性或者状态来决定如何表达要素,它们可以在同一图层中创建不同的数据表达。
{
"circle-color": [
"rgb",
// red is higher when feature.properties.temperature is higher
["get", "temperature"],
// green is always zero
0,
// blue is higher when feature.properties.temperature is lower
["-", 100, ["get", "temperature"]]
]
}
上面这个例子使用get运算符来获取每个要素的温度值,这个结果值被用作rgb运算符的属性值,rgb运算符是用红绿蓝定义颜色的操作符。
数据表达式可以被用作filter的属性值和大多数paint、layout属性值的计算。然而,一些paint和layout属性并不支持数据表达式。支持级别可以在支持列表中查看。feature-state运算符只被允许用在paint属性中。
一个相机表达式是指任何使用zoom操作符的表达式,这些表达式允许一个图层改变地图的缩放等级。相机表达式可以用来创建表现的深度和控制数据密度。
{
"circle-radius": [
"interpolate", ["linear"], ["zoom"],
// zoom is 5 (or less) -> circle radius will be 1px
5, 1,
// zoom is 10 (or greater) -> circle radius will be 5px
10, 5
]
}
这个例子使用interpolate运算符用来定义缩放等级和圆大小的线性相对关系,在这个例子中,表达式表明了圆半径在zoom等级为5或者更低时为1像素,在zoom等级为10或者更高时为5像素。在此之间的room,半径线性的在1到5像素之间变化。
相机表达式在任何表达式使用的地方都能使用,然后当相机表达式用于layout或者paint的属性值时,它必须是以下一种形式:
[ "interpolate", interpolation, ["zoom"], ... ]
或者
[ "step", ["zoom"], ... ]
或者
[
"let",
... variable bindings...,
[ "interpolate", interpolation, ["zoom"], ... ]
]
或者
[
"let",
... variable bindings...,
[ "step", ["zoom"], ... ]
]
也就是说,用于layout和paint属性时,zoom操作符只能被用作为interpolate、step或者let这三种操作符的内在操作符。
在layout和paint属性中使用相机表达式有个重要的区别,paint属性相机表达式当zoom等级发生即使很小变化时就能够重绘,例如一个paint属性相机表达式会持续的变化,当zoom等级在4.1和4.6之间变动时。与此同时,layout属性相机表达式只会在zoom整数跳变时计算值,例如在4.1到4.6之间变化时不会重新计算值,除非是重5到4.
一个单独的表达式可能使用data操作符、相机操作符和其他操作符的混合。这种组合表达式使一个图层的渲染决定于缩放等级和单独要素属性的组合。
{
"circle-radius": [
"interpolate", ["linear"], ["zoom"],
// when zoom is 0, set each feature's circle radius to the value of its "rating" property
0, ["get", "rating"],
// when zoom is 10, set each feature's circle radius to four times the value of its "rating" property
10, ["*", 4, ["get", "rating"]]
]
}
一个同时使用了data和camera运算符的表达式同时考虑了data和camera表达式。