news 2026/6/23 19:28:30

Cesium快速入门30:CMZL动画

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Cesium快速入门30:CMZL动画

这一节课,我们用CZML让物体真正“动”起来——
给它一个时间轴,让它按时走路、按时变色、按时消失,全程只靠 JSON,不写半行动画代码。


一、时间四维:时间 + 经度 + 纬度 + 高度

CZML 把“时间”当成第一维度,后面紧跟经典三维:
[ 0秒, 经度°, 纬度°, 高度米, 200秒, 经度°, 纬度°, 高度米 … ]
数组里每 4 个数算一个“关键帧”,Cesium 会自动插值,物体就能平滑移动。


二、最小动画 CZML:盒子 从 A 飞到 B

const czml = [ { id: "document", name: "box", version: "1.0", // 文档头,必须 }, { id: "shape1", name: "Blue box", availability: "2023-01-01T00:00:00Z/2023-01-01T00:00:01Z", // 可见时间段 position: { epoch: "2023-01-01T00:00:00Z", // 0 秒起点 cartographicDegrees: [ 0, -114.0, 40.0, 30000.0, // 0 秒时的经纬高 200, -100.0, 0.0, 30000.0, // 200 秒时的经纬高 ], }, box: { dimensions: { cartesian: [40000, 30000, 50000] }, // 长 宽 高(米) material: { solidColor: { color: { rgba: [0, 0, 255, 255] } }, // 纯蓝 }, }, }, ];

现在画面是静止的,因为我们还没让“时间齿轮”转起来。


三、让时间跑起来:打开动画 + 时间轴

  1. 先把动画条放出来

const viewer = new Cesium.Viewer("container", { animation: true, // 左下角播放按钮 timeline: true, // 底部时间轴 });
  1. 设定播放速度

viewer.clock.multiplier = 1.0; // 1 倍现实速度 viewer.animation.viewModel.playbackRate = 1.0;
  1. 如果想一进页面就自动跑,再加一行:

viewer.shouldAnimate = true;

刷新后,点击播放键或拖动时间轴,蓝色盒子会沿着刚才给定的两个关键帧平稳飞行,全程自动插值、自动朝向、自动旋转,零代码干预。


四、小结与扩展

  • CZML 把时间当“第一维度”,后面紧跟经度、纬度、高度即可四维插值。

  • availability控制“生命周期”,时间轴外物体自动隐藏。

  • 打开animation + timeline + shouldAnimate,一条 JSON 就能让场景“活”起来。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/23 11:32:55

Excalidraw工业互联网平台架构图实战

Excalidraw工业互联网平台架构图实战 在智能制造工厂的项目评审会上,一位OT工程师正用略显笨拙的手势在白板上勾画设备接入流程。他画了又擦、改了再改,台下的IT同事频频皱眉——这场景你是否似曾相识?当工业互联网平台需要整合PLC、SCADA、边…

作者头像 李华
网站建设 2026/6/23 7:38:35

重器轻用后,你的笔记资料分散各处,怎么办?

(注:本文为小报童精选文章。已订阅小报童或加入知识星球「玉树芝兰」用户请勿重复付费)缘起知识星球上,星友「石头柱子」提问:王老师好,我想请教一下,你如何管理分散在不同工具的笔记&#xff1…

作者头像 李华
网站建设 2026/6/6 11:08:19

10 个AI论文工具,助继续教育学员轻松完成写作!

10 个AI论文工具,助继续教育学员轻松完成写作! AI 工具如何改变论文写作的未来 在当前的继续教育环境中,越来越多的学员面临着论文写作的压力。无论是本科、硕士还是博士阶段,撰写一篇结构严谨、内容充实的学术论文都是一项挑战。…

作者头像 李华
网站建设 2026/6/18 14:58:47

显存暴涨问题难追踪?Open-AutoGLM动态资源监控方案来了

第一章:显存暴涨问题难追踪?Open-AutoGLM动态资源监控方案来了在大模型训练与推理场景中,GPU显存的突发性暴涨常导致服务中断或OOM(Out of Memory)错误,而传统静态监控工具难以捕捉瞬时资源波动。Open-Auto…

作者头像 李华
网站建设 2026/6/23 5:13:51

Open-AutoGLM生产环境崩溃频发,这套自动修复配置让你彻底告别半夜救火

第一章:Open-AutoGLM 异常崩溃自动修复当 Open-AutoGLM 在高并发推理场景下运行时,偶发性内存溢出或模型加载失败可能导致服务异常中断。为提升系统鲁棒性,框架内置了自动崩溃检测与恢复机制,可在进程非正常退出后迅速重启并重建上…

作者头像 李华
网站建设 2026/6/23 14:16:15

Excalidraw在自动驾驶软件模块设计中的实践

Excalidraw在自动驾驶软件模块设计中的实践 在自动驾驶系统的研发过程中,工程师们常常面临一个看似简单却极具挑战的问题:如何快速、清晰地表达一个复杂的软件架构?从感知融合到行为预测,再到轨迹规划与车辆控制,这些模…

作者头像 李华