【小沐学WebGIS】基于Cesium.JS绘制卫星轨迹Satellite Tracker（GIS / vue / react / tle / czml 提供全部源代码）

基于Cesium.JS绘制卫星轨迹Satellite（GIS / vue / react / tle / czml 提供全部源代码）;Cesium.js 是一个开源的 JavaScript 库，专注于构建高性能的 3D 地理空间应用程序。它支持在浏览器中实时渲染全球地形、卫星影像、矢量数据及 3D 模型，并集成动态时间轴功能，适用于地图可视化、飞行模拟、灾害监测、智慧城市等领域。其核心特性包括：多

爱看书的小沐

2209人浏览 · 2025-04-20 17:08:04

爱看书的小沐 · 2025-04-20 17:08:04 发布

	🍺三维数字地球GIS系列相关文章（C++）🍺：
1	【小沐学GIS】基于C++绘制三维数字地球Earth（OpenGL、glfw、glut）第一期
2	【小沐学GIS】基于C++绘制三维数字地球Earth（OpenGL、glfw、glut）第二期
3	【小沐学GIS】基于C++绘制三维数字地球Earth（OpenGL、glfw、glut）第三期
4	【小沐学GIS】基于C++绘制三维数字地球Earth（QT、OpenGL）第四期
5	【小沐学GIS】基于C++绘制三维数字地球Earth（QT、OpenGL、Satellite、卫星轨道模拟）第五期
6	【小沐学GIS】基于C++绘制三维数字地球Earth（OpenG、SolarSystem、太阳系模拟）第六期
7	【小沐学GIS】基于C++绘制三维数字地球Earth（OpenGL、OpenSceneGraph / OSG）第七期
8	【小沐学GIS】基于C++绘制三维数字地球Earth（OpenGL、二维瓦片地图）第八期
9	【小沐学GIS】基于C++绘制三维数字地球Earth（OpenGL、三维瓦片地球）第九期
10	【小沐学GIS】基于C++绘制三维数字地球Earth（osgEarth、三维瓦片地球）第十期
11	【小沐学GIS】基于C++绘制OpenStreetMap地图矢量数据（QT、OpenGL、OSM、Mapbox）第十一期
12	【小沐学GIS】基于C++绘制地形DEM（OpenGL、Terrain、TIFF、hgt）第十二期
	🍺GIS系列相关辅助工具如下🍺：
1	【小沐杂货铺】GIS瓦片地图下载工具（高德/天地图/谷歌/必应/OSM/MapBox/ArcGIS）
2	【小沐杂货铺】GIS高程地形tif文件转obj/gltf三维模型工具（geotiff to obj/gltf、3d模型处理）

	🍺三维数字地球GIS系列相关文章（其他语言）🍺：
1	【小沐学GIS】基于C#绘制三维数字地球Earth（C#、OpenGL）
2	【小沐学GIS】基于Python绘制三维数字地球Earth（Python、OpenGL、地球/太阳系/卫星）
3	【小沐学GIS】基于Android绘制三维数字地球Earth（Android、OpenGL）
4	【小沐学GIS】基于Golang绘制三维数字地球Earth（Go、OpenGL）
5	【小沐学GIS】基于Rust绘制三维数字地球Earth（Rust、OpenGL）
6	【小沐学GIS】基于Lua绘制三维数字地球Earth（Lua、OpenGL）
7	【小沐学GIS】基于Java绘制三维数字地球Earth（Java、OpenGL）
8	【小沐学GIS】基于Unity3d绘制三维数字地球Earth（Unity3d、OpenGL）
9	【小沐学GIS】基于Vulkan绘制三维数字地球Earth（Vulkan）
10	【小沐学GIS】基于Godot绘制三维数字地球Earth（Godot）
11	【小沐学GIS】基于VTK绘制三维数字地球Earth（VTK）
12	【小沐学GIS】基于Babylon.JS绘制三维数字地球Earth（Babylon.JS、vue、react）

	🍺三维数字地球WebGIS系列相关文章（Three.JS）🍺：
1	【小沐学WebGIS】基于Three.JS绘制三维数字地球Earth（WebGL、vue、react）
2	【小沐学WebGIS】基于Three.JS绘制三维太阳系Solar System（three.js、WebGL）第一期
3	【小沐学WebGIS】基于Three.JS绘制三维太阳系Solar System（three.js、WebGL）第二期
4	【小沐学WebGIS】基于Three.JS绘制卫星模拟Satellite Tracker（three.js、vue、react、卫星）
5	【小沐学WebGIS】基于Three.JS绘制OpenStreetMap地图矢量数据（WebGL、OSM、2d/3d）
6	【小沐学WebGIS】基于Three.JS绘制地形DEM（Three.JS、WebGL、TIFF）
7	【小沐学WebGIS】基于Three.JS绘制瓦片地图（Three.JS、WebGL、Mapbox）
8	【小沐学WebGIS】基于Three.JS绘制飞行轨迹Flight Tracker（Three.JS/ vue / react / WebGL）
9	【小沐学WebGIS】基于WebGL绘制三维数字地球Earth（WebGL、地球/卫星/航迹）
10	【小沐学WebGIS】基于WebGL绘制二三维地图地球晨昏效果（Three.JS/ vue / react ）
11	【小沐学WebGIS】基于Three.JS绘制三维城市建筑（City / vue / react ）
	🍺Three.JS系列相关文章如下🍺：
1	【小沐杂货铺】基于Three.JS构建IFC模型浏览器（WebGL、CAD、Revit、IFC）
2	【小沐杂货铺】基于Three.JS绘制汽车展示Car（WebGL、vue、react、autoshow）第1期
3	【小沐杂货铺】基于Three.JS绘制汽车展示Car（WebGL、vue、react、autoshow）第2期
4	【小沐杂货铺】基于Three.JS绘制云图/热力图/CAE物理场渲染（Three.JS、WebGL、CAE、heatmap）
5	【小沐杂货铺】基于Three.js渲染三维风力发电机（WebGL、vue、react、WindTurbine）
6	【小沐杂货铺】基于Three.js渲染三维船舶航行仿真（WebGL、vue、react、ship/boat/vessel）
7	【小沐杂货铺】基于Three.js绘制三维管道Pipe（WebGL、vue、react）
8	【小沐杂货铺】基于Three.js绘制三维机械臂RobotArm（WebGL、vue、react）
9	【小沐杂货铺】基于Three.JS绘制三维海面/海洋/水面（WebGL / vue / react ）
10	【小沐杂货铺】基于Three.JS构建三维虚拟教学实践课程（WebGL / vue / react ）
11	【小沐杂货铺】基于Three.JS绘制URDF机器人模型（WebGL / vue / react ）
12	【小沐杂货铺】基于Three.JS绘制动物世界Animal（WebGL / vue / react ）
13	【小沐杂货铺】基于Three.js渲染三维飞行仿真Flight Simulation（WebGL / vue / react ）
14	【小沐杂货铺】基于Three.js渲染三维无人机Drone（WebGL / vue / react ）

	🍺三维数字地球WebGIS系列相关文章（Cesium.JS）🍺：
1	【小沐学WebGIS】基于Cesium.JS绘制卫星轨迹Satellite Tracker（Cesium、vue、react）第1期
2	【小沐学WebGIS】基于Cesium.JS绘制卫星轨迹Satellite Tracker（Cesium、vue、react）第2期
3	【小沐学WebGIS】基于Cesium.JS绘制飞行轨迹Flight Tracker（Cesium/ vue / react / czml / GPX）
4	【小沐学WebGIS】基于Cesium.JS绘制雷达波束/几何体/传感器Sensor（Cesium / vue / react ）
5	【小沐学WebGIS】基于Cesium.JS桌面端适配地球卫星App（Cesium.js+QT/C#/MFC/Python/Electron）
6	【小沐学WebGIS】基于Cesium.JS绘制火箭发射Rocket（Cesium、vue、react）
7	【小沐学WebGIS】基于Cesium.JS与TacView ACMI联动仿真通信（Cesium、vue、react）

	🍺AI系列相关文章🍺：
1	【小沐学AI】基于AI大模型开发MCP Server服务（Cesium.JS、Three.JS、Blender）

1、简介

1.1 Cesium.JS

Cesium.js 是一个开源的 JavaScript 库，专注于构建高性能的 3D 地理空间应用程序。它支持在浏览器中实时渲染全球地形、卫星影像、矢量数据及 3D 模型，并集成动态时间轴功能，适用于地图可视化、飞行模拟、灾害监测、智慧城市等领域。其核心特性包括：

多源数据集成：支持加载地形、影像、3D 模型（如 glTF）、GeoJSON 等数据格式。
动态交互：提供时间轴控件，可实现时间相关的数据动态展示（如航班轨迹）。
跨平台性：兼容 WebGL，可在桌面和移动端浏览器中运行210。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Cesium 入门示例</title>
    <!-- 引入 Cesium.js 及样式 -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
    <div id="cesiumContainer"></div>
    <script>
        // 设置 Cesium ion 访问令牌（需替换为实际令牌）
        Cesium.Ion.defaultAccessToken = 'your_access_token';

        // 初始化 3D 地球场景
        const viewer = new Cesium.Viewer('cesiumContainer', {
            terrain: Cesium.Terrain.fromWorldTerrain(), // 加载全球地形
            sceneMode: Cesium.SceneMode.SCENE3D,        // 默认 3D 模式
            baseLayerPicker: false                      // 隐藏默认图层选择器
        });

        // 添加标记点（旧金山坐标）
        const marker = viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655),
            point: {
                pixelSize: 10,
                color: Cesium.Color.RED,
                outlineColor: Cesium.Color.WHITE,
                outlineWidth: 2
            },
            label: {
                text: "旧金山",
                font: '16px sans-serif',
                fillColor: Cesium.Color.WHITE,
                pixelOffset: new Cesium.Cartesian2(0, -20)
            }
        });

        // 加载 3D 建筑层
        (async function addBuildings() {
            const buildings = await Cesium.createOsmBuildingsAsync();
            viewer.scene.primitives.add(buildings);
        })();

        // 调整相机视角至标记点
        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 500),
            orientation: {
                heading: Cesium.Math.toRadians(0),
                pitch: Cesium.Math.toRadians(-30)
            }
        });
    </script>
</body>
</html>

1.2 六根数

在二体问题中，轨道根数（orbital elements）是描述物体运动轨迹的简便形式。三维空间中，唯一确定物体轨迹需要六个参数，如位置矢量和速度矢量（均为三维）可共同确定物体轨迹。此外，用六个轨道根数也可描述它。通常的轨道六根数指的是：半长轴、离心率、轨道倾角、近心点辐角、升交点经度和真近点角。经过三角函数运算，它们能表示出物体所处特定位置和速度。
在这里插入图片描述

1.3 两行轨道根数TLE

TLE，Two-Line Orbital Element，两行轨道数据（两行轨道根数）。

TLE 是一种标准格式，用于描述卫星的轨道参数，由美国北美航空航天防御司令部（NORAD）开发并广泛应用于卫星跟踪和轨道计算。TLE 由两行文本组成，每行包含特定的轨道参数。

两行轨道根数（Two Line Elements）是描述地球轨道在轨卫星（或空间碎片）运行位置参数的标准方法，了解TLE的格式可以对未来或过去的卫星过境情况进行预测或分析。TLE的实际含义是在轨飞行器在某一具体时刻的运动参数，而这一时刻被称作纪元（epoch）。不考虑飞行器在轨机动的前提下，假如知道了该飞行器两天前的位置和运动参数，即可预测其当前或未来的位置。TLE需要持续更新，超过两周的TLE数据将会使预测出现很大偏差。

在这里插入图片描述

1.4 CZML

CZML是Cesium团队制定的一种用来描述动态场景的JSON架构语言,可以用来描述点、线、多边形、体、模型及其他图元，同时定义它们是怎样随时间变化的。 CZML采用数据驱动的方式完成场景加载渲染,开发者在CZML中定义场景数据类型、交互信息、时间节点等内容,不需要额外的代码便可构建出丰富的场景。 Cesium与CZML的关系就如同Google Earth 和 KML 的关系。

2、代码测试

2.1 代码1

代码编号：B1_1_CesiumJS_Satellite_js_vue

在这里插入图片描述

2.2 代码2

代码编号：B1_2_CesiumJS_Satellite_js_vite

在这里插入图片描述

2.3 代码3

代码编号：B1_3_CesiumJS_Satellite_js_next

在这里插入图片描述

2.4 代码4

代码编号：B1_4_CesiumJS_Satellite_js_html

在这里插入图片描述

2.5 代码5

代码编号：B1_5_CesiumJS_Satellite_js_html_czml

在这里插入图片描述

2.6 代码6

代码编号：B1_6_CesiumJS_Satellite_js_html_czml

在这里插入图片描述

2.7 代码7

代码编号：B1_7_CesiumJS_Satellite_python_html_czml

在这里插入图片描述

2.8 代码8

代码编号：B1_8_CesiumJS_Satellite_js_html_six_2d3d

在这里插入图片描述

2.9 代码9

代码编号：B1_9_CesiumJS_Satellite_js_vite_tle

在这里插入图片描述

2.10 代码10

代码编号：B1_10_CesiumJS_Satellite_js_vite_tle_2d3d

在这里插入图片描述

2.11 代码11

代码编号：B1_11_GIS_CesiumJS_Satellite_js_webpack_tle

在这里插入图片描述

2.12 代码12

代码编号：B1_12_CesiumJS_Satellite_js_html_tle

在这里插入图片描述

2.13 代码13

代码编号：B1_13_CesiumJS_Satellite_js_vue3_tle
在这里插入图片描述

2.14 代码14

代码编号：B1_14_CesiumJS_Satellite_js_vue3_czml
在这里插入图片描述

2.15 代码15

代码编号：B1_15_CesiumJS_Satellite_js_vue3_tle
在这里插入图片描述

2.16 代码16

代码编号：B1_16_CesiumJS_Satellite_js_tle_2d3d
在这里插入图片描述

2.17 代码17

代码编号：B1_17_CesiumJS_Satellite_js_React_tle

在这里插入图片描述

2.18 代码18

代码编号：B1_18_CesiumJS_Satellite_ts_react_next_tle
在这里插入图片描述

2.19 代码19

代码编号：B1_19_CesiumJS_Satellite_js
在这里插入图片描述

2.20 代码20

代码编号：B1_20_CesiumJS_Satellite_js_samples

在这里插入图片描述

2.21 代码21

代码编号：B1_21_CesiumJS_Satellite_js_vue3_vite

在这里插入图片描述

2.22 代码22

代码编号：B1_22_CesiumJS_Satellite_js_vue3_vite
在这里插入图片描述

在这里插入图片描述

2.23 代码23

代码编号：B1_23_CesiumJS_Satellite_js_vue3_vite
在这里插入图片描述

在这里插入图片描述

2.24 代码24

代码编号：B1_22_CesiumJS_Satellite_js_vue3_vite
在这里插入图片描述

2.25 代码25

代码编号：B1_25_CesiumJS_Satellite_js_vue3_vite
在这里插入图片描述

2.26 代码26

代码编号：B1_26_CesiumJS_Satellite_js_vue3_vite
在这里插入图片描述

2.27 代码27

代码编号：B1_27_CesiumJS_Satellite_js_vue3_vite
在这里插入图片描述

2.28 代码28

代码编号：B1_28_CesiumJS_Satellite_js_tle_2d3d

cesium+openlayer
cesium+mapbox
cesium+leaflet
cesium + arcgis.js
cesium+echarts

2.29 代码29

代码编号：B1_29_CesiumJS_Satellite_js_tle
在这里插入图片描述

2.30 代码30

代码编号：B1_30_CesiumJS_Satellite_js_tle

在这里插入图片描述

3、代码测试（火箭）

3.1 代码1

代码编号：B2_1_CesiumJS_Rocket
在这里插入图片描述

4、代码测试（态势感知）

4.1 代码1

代码编号：B4_1_CesiumJS_War_js_glb
在这里插入图片描述

结语

如果您觉得这些文字有一点点用处，请给作者点个赞；╮(￣▽￣)╭
如果您有技术问题探讨，评论处留言。//(ㄒoㄒ)//
谢谢各位童鞋们啦( ´ ▽ ` )ﾉ ( ´ ▽ `` )っ！
更多精彩文章详见微信公众号：爱阅读的小沐

如需技术探讨 / 软件定制 / 代码分享，请加文章末尾的微信公众号或QQ！
在这里插入图片描述

腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

腾讯云开发者社区

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git

腾讯云开发者社区

所有评论(0)

查看更多评论

爱看书的小沐

@hhy321

已为社区贡献16条内容

【小沐学WebGIS】基于Cesium.JS绘制卫星轨迹Satellite Tracker（GIS / vue / react / tle / czml 提供全部源代码）

爱看书的小沐

文章目录

1、简介

1.1 Cesium.JS

1.2 六根数

1.3 两行轨道根数TLE

1.4 CZML

2、代码测试

2.1 代码1

2.2 代码2

2.3 代码3

2.4 代码4

2.5 代码5

2.6 代码6

2.7 代码7

2.8 代码8

2.9 代码9

2.10 代码10

2.11 代码11

2.12 代码12

2.13 代码13

2.14 代码14

2.15 代码15

2.16 代码16

2.17 代码17

2.18 代码18

2.19 代码19

2.20 代码20

2.21 代码21

2.22 代码22

2.23 代码23

2.24 代码24

2.25 代码25

2.26 代码26

2.27 代码27

2.28 代码28

2.29 代码29

2.30 代码30

3、代码测试（火箭）

3.1 代码1

4、代码测试（态势感知）

4.1 代码1

结语

所有评论(0)

温馨提示：您尚未绑定手机号

爱看书的小沐