经纬志
首页 / MapLibre / 使用示例

实时更新数据

每 700 毫秒推送一个新位置,轨迹线增长、车辆点前移。 数据更新只调用 setData,地图视角和图层都保持不变。

MapLibre GL JS 4.x · 更新 2026-10-27
源码与运行效果
运行效果

说明

路径在页面里预先插值成 25 个点,每次只把已走过的点写进轨迹源。 车辆位置用另一个只含单点的源,两个源各自 setData。

map.getSource('trail').setData({
  type: 'Feature',
  properties: {},
  geometry: { type: 'LineString', coordinates: visited }
});

map.getSource('bus').setData({
  type: 'Feature',
  properties: {},
  geometry: { type: 'Point', coordinates: path[index] }
});
做法开销说明
setData 两个小对象低本示例,每帧数据量很小
setData 全量轨迹随点数增长点数多时稀释采样或分段
removeLayer 再 addLayer高会丢失事件与状态,不应使用

定时器在暂停时清除,继续时重新创建,避免多次点击后叠出多个定时器。 真实项目里还要处理页面隐藏时暂停,减少后台渲染消耗。

轨迹点数无限增长会让每次 setData 越来越慢。 保留最近若干段,旧数据归档到后端,前端只画当前窗口内的部分。