# 轨迹

# 行车轨迹

轨迹线可用前面 数据 章节提到的使用 symbol + line 的方式。

行车过程的轨迹动画通过不断修改数据源(source.setData()),来达到动画的效果,同时根据两点坐标计算 bearing,来设置“出租车”的姿态。

路径动画:Animate a point along a route

# 台风路径

2019 年第 09 号超强台风利奇马(LEKIMA)路径可视化,数据截止时间:2019/8/9 20:00:00。数据来自“浙江台风路径实时发布系统”,各平台的台风数据格式都大同小异,这里对接口原始数据处理后再做可视化。关键点在于将台风的路径点数据处理成 GeoJSON 数据,使用 Turf 库可以方便处理。

可视化过程中涉及到一些 表达式(Expressions)过滤器(Filters)

  • 从数据属性取值及转换为数字
'circle-radius': ['to-number', ['get', 'power']]
1
  • 线宽根据缩放级别线性变化
// 缩放级别从 5 变化到 10,线宽从 1 变化到 3 。
'line-width': [
  'interpolate',
  ['linear'],
  ['zoom'],
  5, 1,
  10, 3
]
1
2
3
4
5
6
7
8
  • 贝塞尔曲线、数学计算和类型转换
'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]
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  • 根据属性 tm 分级渲染
'line-color': [
  'match',
  ['get', 'tm'],
  '中国', '#FF4050',
  '中国香港', '#FF66FF',
  '中国台湾', '#FFA040',
  '日本', '#43FF4B',
  '美国', '#40DDFF',
  '#ff0000'
]
1
2
3
4
5
6
7
8
9
10
  • 数据源中集合类型为 LineString 和属性 typetrack 的数据
'filter': ['all', ['==', '$type', 'LineString'], ['==', 'type', 'track']]
1