文章后续计划
距离上次更新已经过去很久的时间了,转眼间mapbox也更新到了v3版本,由于个人原因更新非常迟缓,原本计划是继续讲建筑物样式的讲解,但是我发现这么做的必要性并不大,结合例子讲的单一内容很少,很多都是多个api结合,到了这一步很难做到有简单到难的这样一个渐进过程,所以我决定并不按照文章序号进行更新,即当前2.4,那么下一篇文章可能是3.x,4.x。大序号里的内容会保持统一:
| 系列 | 描述 |
|---|---|
| 1.x | 初识 |
| 2.x | 图层样式 |
| 3.x | 功能 |
| 4.x | 扩展 |
表达式小结
在2.x的前几节中,我们一直在重复使用几个表达式效果,本章将会把简单且经常用的总结一下,在本大章的后面的内容中,表达式是绕不开的核心内容。
表达式
get
获取某一字段值
// 获取字段为name的值
["get", "name"],
has
是否有某一字段,返回一个bool
["has", "name"] // 是否有name字段
feature-state
元素状态,可以通过方法给图层的一些元素添加临时属性,而这些临时属性就是元素状态,可以在不该变原数据的情况下,实现一些效果
// 添加元素状态的函输
map.setFeatureState(
{ source: 'states', id: id }, // 要注意这里是source的名称,如果数据源是矢量瓦片,还要指明sourceLayer,id是某一元素的id
{ hover: true } // 添加hover字段并设置为true
);
['feature-state', 'hover'] // 获取元素状态 hover
in
字段值是否包含在内
["in","name","1","2","3"] // name的值是否是1,2,3中的一个值
!
非,这和我们平常用到的意思是一样的,可以结合上面的has一起使用
['!', ['has', 'name']], // 如果有name字段,则返回false
!= < <= == > >= all any
常用的大于小于这些,需要特别注意的是all和any
['<', ['get', 'age'], 18]; // 如果年龄小于18 返回true 其他符号类似这种用法
// all 就是 &
// 下面的表达式的意思是年龄小于18且身高170以上 返回true
// any 就是 ||
// 如果将下面的all换成any,就会变成 年龄小于18或者身高170以上,返回true
[
'all',
['<', ['get', 'age'], 18],
['>', ['get', 'height'], 170],
],
case match
这两个在2.1和2.2中讲过,唯一值渲染和多级渲染会用到他们
interpolate
插值,常用到的是线性插值,大多用于随着层级或其他值变化而插值,这会使变化的效果更加顺滑。
// 2-3中热力图 在不同缩放级别下设置不同的权重
"heatmap-intensity": ["interpolate", ["linear"], ["zoom"], 0, 1, 9, 3],
总结
本章节内容偏少,仅是总结了前面的内容,接下来会保证持续更新的。