news 2026/9/16 9:55:17

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/9/15 3:01:58

macOS鼠标优化终极方案:告别卡顿,让滚轮如丝般顺滑

你是否曾经为macOS上鼠标滚动的生硬感而烦恼?外接鼠标在苹果系统上的表现总是不尽人意,滚动卡顿、方向混乱等问题严重影响了工作效率。今天我要介绍的Mos工具,就是专门为解决这一痛点而生的完美解决方案。这款轻量级工具能够平滑你的鼠标滚动…

作者头像 李华
网站建设 2026/9/11 9:34:30

音乐标签管理革命:Music Tag Web 专业级使用全攻略

音乐标签管理革命:Music Tag Web 专业级使用全攻略 【免费下载链接】music-tag-web 音乐标签编辑器,可编辑本地音乐文件的元数据(Editable local music file metadata.) 项目地址: https://gitcode.com/gh_mirrors/mu/music-tag…

作者头像 李华
网站建设 2026/9/11 7:08:02

Battery Toolkit:苹果Silicon Mac电池健康管理终极指南

Battery Toolkit:苹果Silicon Mac电池健康管理终极指南 【免费下载链接】Battery-Toolkit Control the platform power state of your Apple Silicon Mac. 项目地址: https://gitcode.com/gh_mirrors/ba/Battery-Toolkit 您的MacBook电池是否经常处于满电状态…

作者头像 李华
网站建设 2026/9/13 5:34:04

终极指南:Windows系统直接安装APK文件的完整解决方案

终极指南:Windows系统直接安装APK文件的完整解决方案 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 在当今多设备互联的时代,你是否曾渴望在Wi…

作者头像 李华
网站建设 2026/9/11 11:32:27

macOS百度网盘免费加速全攻略:解锁SVIP级下载体验

还在为百度网盘的龟速下载而苦恼吗?明明拥有高速网络,下载文件却像是在爬行?今天就来分享一个macOS平台上的免费加速解决方案,让你的下载体验实现质的飞跃! 【免费下载链接】BaiduNetdiskPlugin-macOS For macOS.百度网…

作者头像 李华
网站建设 2026/9/10 18:53:18

Mac鼠标滚动终极优化:Mos让你的外接鼠标体验媲美触控板

Mac鼠标滚动终极优化:Mos让你的外接鼠标体验媲美触控板 【免费下载链接】Mos 一个用于在 macOS 上平滑你的鼠标滚动效果或单独设置滚动方向的小工具, 让你的滚轮爽如触控板 | A lightweight tool used to smooth scrolling and set scroll direction independently …

作者头像 李华