🛰 TLE Plus：基于 Cesium + Vue 3 的卫星轨道实时可视化平台

从零搭建一个支持 SGP4/SDP4 轨道预报、多数据源接入、3D 地球交互的卫星可视化工具。

前言

TLE（Two-Line Element，双行轨道根数） 是描述地球轨道卫星运动状态的标准数据格式，由北美防空司令部（NORAD）发布，至今已沿用半个多世纪。两组看似晦涩的数字串，实际编码了卫星的六大轨道根数以及大气阻力系数——这就是整个低轨卫星轨道预报的核心。

TLE Plus 正是围绕 TLE 数据打造的一款 3D 卫星轨道可视化平台。它基于 Cesium.js 渲染三维地球场景，利用 SGP4/SDP4 模型实时计算卫星位置，并提供 Celestrak、Space-Track 等多数据源接入能力。

技术架构

层面	技术选型	职责
前端框架	Vue 3 + TypeScript	组合式 API、响应式状态、类型安全
构建工具	Vite 6	ES module 开发、HMR 热更新
3D 引擎	Cesium 1.126	地球渲染、星空背景、时间动画
轨道计算	sgp4.js	SGP4/SDP4 模型传播（含 B* 大气阻力）
UI 组件	Element Plus	控制面板、表单、列表
样式	Scoped CSS + 毛玻璃效果	现代极简暗色调 + 亮色面板

▼
text
复制代码
项目结构
src/
├── components/
│   └── SatelliteTLEViewer.vue   # 核心组件（~1400行）
├── utils/
│   ├── tleCalculator.ts         # SGP4 轨道计算与缓存
│   └── tleParser.ts             # TLE 解析与数据源拉取
├── types/
│   └── tle.ts                   # TypeScript 类型定义
├── data/
│   └── sampleTle.ts             # 示例 TLE 数据
├── App.vue
└── main.ts

核心功能

1. 多数据源 TLE 接入

TLE Plus 支持四种方式加载轨道数据：

Celestrak 实时拉取 —— 内置 11 个卫星分组：空间站、最亮卫星、Starlink、GPS、北斗、伽利略等，一键拉取最新 TLE
Space-Track.org 认证查询 —— 通过 Vite 代理 + Cookie 认证，支持按 NORAD ID 单星查询和近 2 天更新批量查询
本地文件上传 —— 支持 .tle / .txt 格式文件解析
文本粘贴 —— 直接粘贴 TLE 三行文本即可解析

解析器同时兼容 Celestrak 标准三行格式（名称 + Line1 + Line2）和双行格式（Line1 + Line2），通过正则自动识别 NORAD 编号。

2. SGP4/SDP4 轨道预报

轨道计算基于 sgp4 库实现，核心设计亮点是 OrbitCalculator 缓存类：

▼
typescript
复制代码
// 只解析一次 TLE，后续 propagate 复用缓存的 SatRec
class OrbitCalculator {
  private satrec: SatRec;
  public params: TLE7Params;

  propagate(date: Date): SGP4Result { ... }
  sampleOrbit(sampleCount: number, baseTime: Date): Cartesian3[] { ... }
}

系统自动根据平均运动频率选择模型：

n > 5 圈/天 → SGP4（近地轨道，含 B* 大气阻力修正）
n ≤ 5 圈/天 → SDP4（深空轨道，含日月引力摄动）

3. 七大轨道参数展示

参数	符号	物理意义
轨道倾角	(i)	轨道面与赤道面的夹角
升交点赤经	(\Omega)	轨道升交点在天球赤道上的经度
偏心率	(e)	轨道椭圆的扁率
近地点幅角	(\omega)	从升交点到近地点的角度
平近点角	(M_0)	历元时刻卫星在轨道上的位置
平均运动	(n)	卫星绕地球的角速度（圈/天）
*B 拖曳系数**	(B^*)	低轨大气阻力修正参数

特别值得关注的是 B* 拖曳系数，它是 SGP4 区别于开普勒轨道的核心参数，直接决定了低轨卫星轨道衰减的速率。

4. 3D 地球可视化

基于 Cesium 构建的 3D 场景包含：

深邃太空背景 —— 暗色基底（#01050f）+ 1800 颗程序化多彩闪烁星空粒子，60% 冷白 / 25% 蓝白 / 15% 暖黄分布，8% 大亮星 + 92% 普通星
动态卫星实体 —— 红色顶点标注 + 文字标签，位置由 Cesium CallbackProperty 实时驱动，无需定时器更新
黄色轨道线 —— 预计算 120 采样点的完整轨道路径，切换卫星时重绘
地球纹理切换 —— 内置 3 套地球纹理 + 纯色模式，可实时切换
交互式信息弹窗 —— 点击卫星即可查看详细轨道参数和实时状态

5. 时间系统

Cesium 时钟配置为 60 倍速运行（可调整），支持：

播放/暂停动画
时间轴拖拽
LOOP_STOP 循环模式（48 小时窗口）

用户可以通过时间控件快进或回退，观察卫星在轨道上的运动轨迹。

6. 实时状态面板

以 250ms（4fps）频率刷新：

轨道周期（分钟）
当前速度（km/s）
当前高度（km）- 通过 ECI 位置向量的模减地球半径计算
轨道模型类型

7. 碰撞预警分析

算法流程（4 阶段）：

粗粒度扫描 — 60s 步长在时间窗口（1~30天可调）内传播两颗卫星，检测距离 < 100km 的接近事件
TCA 精化 — 二分搜索精确定位最接近时刻（精度 0.1s，最多 30 次迭代）
协方差估计 — 基于传播时长、轨道高度、B* 阻力系数估算 RTN 位置不确定度（低轨自动放大）
碰撞概率 — 将 3D 协方差投影到交会平面，使用 Foster-1992 / Chan 一阶近似 2D 高斯积分公式

功能特性：

面板操作：从卫星列表选两颗卫星 → 设时间窗口 → 点击分析
风险分级：5 级（极低/低/中/高/极高），颜色编码 🔴🟠🟡🔵⚪
事件列表：显示每次交会的 TCA 时间、相对距离、相对速度、碰撞概率
Cesium 可视化：
[1] 半透明危险区域球体（半径根据 miss distance 缩放）
[2] 虚线连接两颗卫星的交会点
[3] 卫星标签高亮
[4] 一键飞至交会点

性能优化实践

SatRec 缓存 —— OrbitCalculator 类将 twoline2rv（最耗时的操作）限制为仅调用一次，后续传播直接复用缓存的 SatRec 对象
CallbackProperty 驱动 —— 卫星位置由 Cesium 时钟自动驱动，避免 JavaScript 定时器开销
轨道线按需刷新 —— 仅在切换卫星时重绘轨道线（ConstantProperty），而非每帧更新
HUD 低频刷新 —— 状态面板以 4fps 而非 60fps 刷新，大幅减少不必要计算
渲染优化 —— 禁用默认图层选择器、InfoBox 等非必要 UI，开启 requestRenderMode 按需渲染

开发启示

TLE 数据的"含金量"

看似简单的两组字符串，包含了远超开普勒六根数的信息。B* 拖曳系数直接关联大气密度模型，而 SGP4 的完整实现实际上是一个半解析模型，背后整合了 J2/J3/J4 地球引力场摄动、大气阻力、日月引力等多种摄动力的简化表达。

Cesium 与响应式框架的结合

CallbackProperty 是连接 Cesium 渲染管线与轨道计算模型的桥梁。它允许我们用纯函数定义实体属性，Cesium 在每帧渲染时自动求值，完美解耦了"数据计算"与"渲染更新"。

sgp4 库的注意事项

该库使用 CommonJS 导出，在 ESM 环境下需要特殊处理
twoline2rv 是计算瓶颈所在，高频调用场景下缓存是必须的
API 中 propogate 拼写为三个参数（年/月/日/时/分/秒），这也是一个值得注意的历史遗留问题

项目展望

🌍 支持同时显示多颗卫星轨道
📊 增加轨道衰减趋势图（基于 B* 的长期预测）
🎯 支持地面站覆盖范围计算（仰角可见性分析）
🔗 支持 TLE 数据的自动定时刷新
🌐 增加卫星过境预报功能

技术栈速览

▼
text
复制代码
Vue 3.5    ·    响应式 UI 框架
Cesium.js  ·    3D 地球渲染引擎
sgp4.js    ·    SGP4/SDP4 轨道模型
Element Plus ·   UI 组件库
Vite 6     ·    下一代构建工具
TypeScript ·    类型安全

结语

TLE Plus 是一个将航天领域专业知识与前端工程实践相结合的项目。从 TLE 解析到轨道预报，从 Cesium 场景搭建到性能优化，每一步都体现了「理解底层原理」对前端工程的价值。

如果你对卫星轨道力学、3D 可视化或 Cesium 开发感兴趣，欢迎从这个项目入手，它既是一个实用的工具，也是一个不错的学习起点。

项目地址：TLE Plus 访问地址：https://tleoplus.pages.dev/ 技术交流：欢迎提出 Issue 或 PR 🚀

前言