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

实时数据流

每 0.9 秒推入一个新的观测点,缓冲满 40 条后丢弃最早的。 颜色与半径按数值分级,越新的点序号越大。

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

说明

数组只保留最近 40 条,因此每次 setData 的序列化量固定, 不随时间增长。这是流式数据最省心的做法,代价是历史记录不保留。

颜色与半径都用 step 表达式读属性值,所以新点进来时 不需要改样式,重绘由图层自己完成。

要点取值说明
推送间隔900 ms低于 500 ms 时建议合并一次
缓冲长度40决定单次更新数据量
circle-radiusstep 分三档按数值而非时间
setData全量替换不是增量追加

暂停只停掉定时器,数组与图层保持现状。恢复后从当前序号继续, 不会补发暂停期间的点。

高频推送时把多次更新合并到一帧:用 requestAnimationFrame 收集新点,每帧只调用一次 setData,比每条都推更稳。