轨迹

行车轨迹

轨迹线可用前面 数据 章节提到的使用 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']]

• 线宽根据缩放级别线性变化

// 缩放级别从 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']]