首页 / MapLibre / 使用示例
实时更新数据
每 700 毫秒推送一个新位置,轨迹线增长、车辆点前移。 数据更新只调用 setData,地图视角和图层都保持不变。
源码与运行效果
说明
路径在页面里预先插值成 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 越来越慢。 保留最近若干段,旧数据归档到后端,前端只画当前窗口内的部分。