news 2026/2/12 16:52:07

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/2/11 23:24:37

Day 13:嵌入式系统(选读):实时性与低功耗设计,不懂硬件也能拿分的答题技巧

🧱 前言:为什么要准备这个“备胎”? 下午案例题是 5 选 3。 第 1 题(必做):架构风格。 第 2-5 题(4 选 2): 通常大家会选:数据库(第 4 题)、Web 架构(第 5 题)。 但是,万一第 5 题考了个极偏的“区块链”或者“Web 3.0”,你直接懵圈了怎么办? 这时候,嵌入式…

作者头像 李华
网站建设 2026/2/8 20:17:01

Open-AutoGLM自动化测试落地难点突破(仅限内部分享版)

第一章:Open-AutoGLM自动化测试落地难点突破在将 Open-AutoGLM 框架应用于实际项目的过程中,自动化测试的落地面临多重技术挑战。模型输出的非确定性、测试断言的动态性以及环境依赖的复杂性,均导致传统测试手段难以直接适配。为解决这些问题…

作者头像 李华
网站建设 2026/2/4 0:13:28

信息管理毕设易上手项目选题推荐

0 选题推荐 - 云计算篇 毕业设计是大家学习生涯的最重要的里程碑,它不仅是对四年所学知识的综合运用,更是展示个人技术能力和创新思维的重要过程。选择一个合适的毕业设计题目至关重要,它应该既能体现你的专业能力,又能满足实际应…

作者头像 李华
网站建设 2026/2/12 8:05:47

5个步骤助力你的YashanDB数据库迁移成功

在现代应用程序中,数据库的性能和可用性至关重要。在面对业务需求的变化或技术升级时,如何确保数据库迁移成功成为重要的技术问题。在实际工作中,数据库迁移涉及到数据的完整性、有效性以及业务上下游服务的连续性,而YashanDB作为…

作者头像 李华
网站建设 2026/2/7 11:50:52

【顶尖AI团队内部资料】:Open-AutoGLM数据预处理的7个黄金法则

第一章:Open-AutoGLM数据优化的核心理念Open-AutoGLM作为面向生成式语言模型的数据自优化框架,其核心理念在于通过自动化反馈机制实现数据质量的动态提升。系统不依赖静态标注数据集,而是结合模型推理输出与多维度评估信号,持续重…

作者头像 李华
网站建设 2026/2/9 17:56:09

为什么你的Open-AutoGLM总崩溃?一文看懂资源监控缺失的致命影响

第一章:Open-AutoGLM 运行时资源监控在部署和运行 Open-AutoGLM 模型服务时,实时掌握其资源消耗情况对于保障系统稳定性与优化推理性能至关重要。有效的运行时资源监控能够帮助开发者及时发现内存泄漏、GPU 利用率异常或请求堆积等问题。监控指标采集 Op…

作者头像 李华