news 2026/4/23 11:27:04

Cesium快速入门31: 追踪飞机航班动画

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Cesium快速入门31: 追踪飞机航班动画

这一节,我们把“飞机”请进 Cesium:从起飞到降落,全程按真实时间点飞行,轨迹自动插值、机头自动对准航线,再配上路径尾迹,一眼就能看到它越洋跨洲的全过程。


一、思路:把“轨迹点”变成“时间位置对”

飞行轨迹其实就是一串带时间戳的经纬度+高度点。
Cesium 的SampledPositionProperty专门吃这种“时间-位置”对,内部自动线性插值,飞机就能平滑飞行,无需我们手动算补间。


二、准备数据:30 秒一步,总时长由点数决定

/* 1. 新建“时间位置对”容器 */ const positionProperty = new Cesium.SampledPositionProperty(); /* 2. 每 30 秒一个点,总时长 = (点数 - 1) × 30 */ const timeStepInSeconds = 30; const durationInSeconds = (flight.length - 1) * timeStepInSeconds; /* 3. 起止时间(JulianDate) */ const time = new Cesium.JulianDate.fromDate(new Date("2023-01-01T00:00:00Z")); const end = Cesium.JulianDate.addSeconds(time, durationInSeconds, new Cesium.JulianDate()); /* 4. 把起止时间钉到场景时钟 */ viewer.clock.startTime = time.clone(); viewer.clock.stopTime = end.clone(); viewer.clock.currentTime = time.clone(); viewer.timeline.zoomTo(time, end); // 底部时间轴对齐

flight是提前准备好的数组,每条记录含lon / lat / alt,30 秒一步,踩点越多航线越丝滑。


三、逐点喂数据:红点标记 + 位置插值

flight.forEach((item, index) => { /* 计算当前点的时间戳 */ const ctime = Cesium.JulianDate.addSeconds(time, index * timeStepInSeconds, new Cesium.JulianDate()); /* 转成 Cartesian3 */ const position = Cesium.Cartesian3.fromDegrees(item.lon, item.lat, item.alt); /* 塞进插值器 */ positionProperty.addSample(ctime, position); /* 顺便画个红点,方便调试轨迹 */ viewer.entities.add({ name: `position ${index}`, position: position, point: { pixelSize: 10, color: Cesium.Color.RED, outlineColor: Cesium.Color.WHITE, outlineWidth: 2, }, }); });

红点即航点,飞机将在它们之间自动插值飞行。


四、创建飞机实体:模型 + 尾迹 + 自动朝向

const fly = viewer.entities.add({ name: "plane", availability: new Cesium.TimeIntervalCollection([ new Cesium.TimeInterval({ start: time, stop: end }) // 只在起止时间内可见 ]), position: positionProperty, // 时间位置对(自动插值) orientation: new Cesium.VelocityOrientationProperty(positionProperty), // 机头自动对准速度方向 model: { preload: true, uri: "./models/ju52.glb", // 自己的 glb 模型 minimumPixelSize: 100, // 最远也不小于 100 px silhouetteColor: Cesium.Color.ORANGE, // 橙色描边 silhouetteSize: 2, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 500000.0), // 50 km 外隐藏 }, path: new Cesium.PathGraphics({ width: 5, // 轨迹线宽 5 px }), }); /* 让相机一直跟拍 */ viewer.trackedEntity = fly;

一句话总结:

  • position绑时间,飞机自动飞;

  • VelocityOrientationProperty让机头永远冲前;

  • PathGraphics自动生成渐变尾迹。


五、运行效果

点击播放键,飞机沿红点连线平滑飞行,转弯时机头实时对准切线,身后拖着 5 px 宽的淡色轨迹,镜头自动跟拍——全过程零数学、零关键帧,全靠 Cesium 插值。


六、可扩展玩法

  • 想再快?把timeStepInSeconds改小或clock.multiplier加大;

  • 想更炫?给path.material换成发光飞线;

  • 想更真实?把高度数组换成真实气压高度,把速度换算成时间间隔。

下节课,我们让飞机“边飞边变色”,再给它加个“落地烟雾”,一条真正的航班演示就杀青了。

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

利用vivado2018.3进行Zynq-7000 Linux系统移植实战案例

从零构建 Zynq-7000 Linux 启动系统:基于 Vivado 2018.3 的实战手记 最近接手了一个老项目——在一块基于 Zynq-7020 的定制板上移植嵌入式 Linux。客户明确要求使用 Vivado 2018.3 工具链,不许用 PetaLinux,必须手动搭建整个启动流程。 …

作者头像 李华
网站建设 2026/4/22 2:12:17

如何5分钟掌握Easy-Scraper:零基础网页数据提取终极指南

还在为复杂的数据抓取任务而烦恼吗?传统的网页抓取工具需要掌握繁琐的CSS选择器或XPath语法,让无数新手望而却步。今天,让我们一起探索Easy-Scraper——这款革命性的HTML抓取库,用最简单直观的方式帮你快速获取所需数据&#xff0…

作者头像 李华
网站建设 2026/4/18 7:22:49

群晖NAS百度网盘同步终极方案:5步解决文件传输痛点

群晖NAS百度网盘同步终极方案:5步解决文件传输痛点 【免费下载链接】synology-baiduNetdisk-package 项目地址: https://gitcode.com/gh_mirrors/sy/synology-baiduNetdisk-package 还在为群晖NAS和百度网盘之间的文件传输而烦恼吗?每次都需要手…

作者头像 李华
网站建设 2026/4/15 6:13:24

DJI Payload SDK终极指南:从入门到精通无人机开发

DJI Payload SDK终极指南:从入门到精通无人机开发 【免费下载链接】Payload-SDK DJI Payload SDK Official Repository 项目地址: https://gitcode.com/gh_mirrors/pa/Payload-SDK 在当今无人机技术飞速发展的时代,DJI Payload SDK为开发者打开了…

作者头像 李华
网站建设 2026/4/22 18:51:26

anything-llm能否支持IMAP?邮件知识库构建可能

anything-llm能否支持IMAP?邮件知识库构建可能 在企业数字化转型不断加速的今天,信息资产的沉淀与复用已成为提升组织效率的核心命题。尤其是客户服务、技术支持和销售沟通等场景中,大量关键信息以电子邮件的形式分散存储于员工个人邮箱——这…

作者头像 李华
网站建设 2026/4/12 23:59:37

完整指南:三步配置Obsidian科研模板实现高效知识管理

完整指南:三步配置Obsidian科研模板实现高效知识管理 【免费下载链接】obsidian_vault_template_for_researcher This is an vault template for researchers using obsidian. 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian_vault_template_for_research…

作者头像 李华