news 2026/6/10 2:00:13

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/10 15:58:44

Excalidraw云计算资源编排图设计技巧

Excalidraw 云计算资源编排图设计技巧 在现代软件工程中,系统架构的表达早已不再局限于代码和文档。一张清晰、直观的架构图,往往能在几分钟内让跨职能团队达成共识——尤其是在微服务、容器化与多云环境交织的今天。然而,传统绘图工具如 Vis…

作者头像 李华
网站建设 2026/6/10 14:13:06

洛谷 P2758 编辑距离

题目描述设 A 和 B 是两个字符串。我们要用最少的字符操作次数,将字符串 A 转换为字符串 B。这里所说的字符操作共有三种:删除一个字符;插入一个字符;将一个字符改为另一个字符。A,B 均只包含小写字母。输入格式第一行为字符串 A&…

作者头像 李华
网站建设 2026/6/9 15:56:26

Excalidraw使用率统计看板搭建教程

Excalidraw使用率统计看板搭建教程 在远程协作日益成为常态的今天,团队沟通效率越来越依赖于可视化工具。但问题也随之而来:我们投入了大量时间推广一款协作白板工具,可到底有多少人真正在用?哪些功能被频繁调用,哪些又…

作者头像 李华
网站建设 2026/6/10 14:11:53

物联网通讯之蓝牙通讯

1蓝牙基础知识 1.1蓝牙概述 蓝牙,是一种利用低功率无线电,支持设备短距离通信的无线电技术,能在包括移动电话、PDAQ、无线耳机、笔记本电脑、相关外设等众多设备之间进行无线信息交换,蓝牙工作在全球通用的2.4 GHz(2.4 至 2.485 G…

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

Open-AutoGLM与传统NLP模型对比实测:在社交动态分析中为何胜出4.8倍?

第一章:Open-AutoGLM 社交动态整理 Open-AutoGLM 是一个开源的自动化语言模型驱动框架,专注于从社交媒体平台中提取、分析并结构化用户生成内容。该项目通过自然语言理解与图神经网络的结合,实现对社交动态的语义建模与关系推理,广…

作者头像 李华