轨迹
行车轨迹
轨迹线可用前面 数据 章节提到的使用 symbol
+ line
的方式。
行车过程的轨迹动画通过不断修改数据源(source.setData()
),来达到动画的效果,同时根据两点坐标计算 bearing
,来设置“出租车”的姿态。
台风路径
2019 年第 09 号超强台风利奇马(LEKIMA)路径可视化,数据截止时间:2019/8/9 20:00:00。数据来自“浙江台风路径实时发布系统”,各平台的台风数据格式都大同小异,这里对接口原始数据处理后再做可视化。关键点在于将台风的路径点数据处理成 GeoJSON 数据,使用 Turf 库可以方便处理。
可视化过程中涉及到一些 表达式(Expressions)和 过滤器(Filters) 。
- 从数据属性取值及转换为数字
'circle-radius': ['to-number', ['get', 'power']]
- 线宽根据缩放级别线性变化
// 缩放级别从 5 变化到 10,线宽从 1 变化到 3 。
'line-width': [
'interpolate',
['linear'],
['zoom'],
5, 1,
10, 3
]
- 贝塞尔曲线、数学计算和类型转换
'circle-radius': [
'interpolate',
[
'cubic-bezier',
0.85,
0.45,
0,
0.65
],
['zoom'],
5,
['*', ['to-number', ['get', 'power']], 0.4],
10,
['*', ['to-number', ['get', 'power']], 1]
]
- 根据属性
tm
分级渲染
'line-color': [
'match',
['get', 'tm'],
'中国', '#FF4050',
'中国香港', '#FF66FF',
'中国台湾', '#FFA040',
'日本', '#43FF4B',
'美国', '#40DDFF',
'#ff0000'
]
- 数据源中集合类型为
LineString
和属性type
为track
的数据
'filter': ['all', ['==', '$type', 'LineString'], ['==', 'type', 'track']]