首页 / deck.gl / API 文档

TripsLayer

先看结论

按时间推进的轨迹图层，显示当前时刻与一段尾迹。

最后验证 2026-11-03 · deck.gl 9.0 · 更新 2026-10-27 · 引用本文

new deck.TripsLayer(props)

参数

参数	默认	说明
`getPath`	—	顶点数组
`getTimestamps`	—	与顶点等长的时间戳
`currentTime`	`0`	当前时刻，单位与时间戳一致
`trailLength`	`0`	尾迹时间跨度，0 表示全部显示
`fadeTrail`	`false`	尾迹透明度渐变
`getColor`	黑	轨迹颜色
`widthMinPixels`	`1`	最小像素宽度
`jointRounded` / `capRounded`	`false`	拐角与端点圆滑

示例

new deck.TripsLayer({
  id: 'trips',
  data: trips,
  getPath: function (d) { return d.path; },
  getTimestamps: function (d) { return d.timestamps; },
  getColor: function (d) { return d.color; },
  currentTime: t,
  trailLength: 60,
  fadeTrail: true,
  widthMinPixels: 2,
  capRounded: true
});

动画循环

每帧递增 currentTime 并调用 setProps。尾迹长度按时间计，不按顶点数计，所以采样间隔不均匀时速度表现一致。

function tick() {
  t = (t + 0.4) % totalTime;
  deckgl.setProps({
    layers: [new deck.TripsLayer({ /* 同一批属性 */ currentTime: t })]
  });
  requestAnimationFrame(tick);
}

时间戳必须单调递增。某条轨迹的时间戳倒序，那一段会整段消失，排查时先对数据做排序校验。

引用本文

经纬志（2026）。《TripsLayer》。https://www.jingweizhi.com/deckgl/api/trips-layer.html（访问日期 2026-11-03）。