用 30 行 JavaScript 从头创建一个卫星跟踪器

2025-06-10

用 30 行 JavaScript 从头创建一个卫星跟踪器

本教程将引导您了解如何创建一个 Web 应用程序，以实时显示任何卫星（如国际空间站）的位置。

我们将从头开始做这件事，使用真正的火箭科学家所使用的相同技术！

  1. 我们将研究从哪里获取政府发布的有关单个卫星的数据，即双线元素集（TLE）。
  2. 我们将使用satellite-js根据 TLE 预测卫星的轨道（这是火箭科学部分）。
  3. 我们将使用CesiumJS来可视化结果，但您可以使用任何可以接收经度、纬度和高度的库/引擎。

以下是最终结果的预览。

这显示了国际空间站的路径，速度加快了 40 倍。要实时查看其当前位置，请点击时钟轮左上角的时钟图标。

这是该应用程序的直接链接。以及Glitch 上的源代码。

1 - 获取卫星的双线元素集

双线元素集（TLE）是一种描述绕地球运行物体运动的数据格式。它由北美防空司令部（NORAD）创建。您可以在此处了解更多关于它及其历史的信息。

根据轨道的描述，我们可以预测它在任何时间点的位置（即下面的步骤 2）。

这意味着大多数“实时”卫星追踪器的实时性与地图上追踪送货车的实时性不同。追踪太空物体的人员通常不会依赖于持续接收位置更新，而是获取最新的时间延迟 (TLE)（定期更新），并以此来预测物体当前的位置。

我们从哪里获取TLE？目前没有一个全球性的官方注册机构。卫星的所有者和监测者都有责任更新和发布TLE，以造福全球航天界（除非是间谍卫星）。

我们可以在美国太空司令部运营的注册中心Space Track上找到这些 TLE 。

另一个来源是TS Kelso 博士维护的CeleStrak 上的这个列表。

我们将使用 CeleStrak，因为它不需要登录。要查找国际空间站的 TLE，请点击“空间站”链接。

第一个是国际空间站的 TLE：



ISS (ZARYA)             
1 25544U 98067A   21122.75616700  .00027980  00000-0  51432-3 0  9994
2 25544  51.6442 207.4449 0002769 310.1189 193.6568 15.48993527281553
Enter fullscreen mode Exit fullscreen mode

这些数字的含义列在TS Kelso博士专栏的表1中。它们大多是卫星的标识符和元数据，例如卫星的发射时间。

您可以以相同的格式找到气象卫星、GPS 卫星甚至SpaceX 的 Starlink 星座的TLE。

2 - 预测卫星轨道

现在您知道如何获取您感兴趣的跟踪对象的 TLE，下一步是将其转换为时间位置。

我们将为此使用satellite-js 。

从 CDN 包含库：



<script src="https://cdnjs.cloudflare.com/ajax/libs/satellite.js/4.0.0/satellite.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

然后将 TLE 传递给它，并设置一个时间：



const ISS_TLE = 
    `1 25544U 98067A   21122.75616700  .00027980  00000-0  51432-3 0  9994
     2 25544  51.6442 207.4449 0002769 310.1189 193.6568 15.48993527281553`;
// Initialize the satellite record with this TLE
const satrec = satellite.twoline2satrec(
  ISS_TLE.split('\n')[0].trim(), 
  ISS_TLE.split('\n')[1].trim()
);
// Get the position of the satellite at the given date
const date = new Date();
const positionAndVelocity = satellite.propagate(satrec, date);
const gmst = satellite.gstime(date);
const position = satellite.eciToGeodetic(positionAndVelocity.position, gmst);

console.log(position.longitude);// in radians
console.log(position.latitude);// in radians
console.log(position.height);// in km
Enter fullscreen mode Exit fullscreen mode

现在我们知道了卫星的当前位置new Date()。

此位置是通过模拟特定的卫星运动模型得出的。该模型称为 SGP4/SDP4。所有 TLE 均采用此特定模型。

如果您想知道这个模型的准确性，简短的回答是，这取决于。

双线元素集的精度取决于许多因素，包括所使用的特定传感器、收集的数据量、轨道类型和空间环境条件。遗憾的是，由于这些因素因元素集而异，精度也各不相同。虽然北美防空司令部 (NORAD) 已尝试过将预测质量纳入元素集的方法，但这些方法均未取得成功。

3 - 可视化结果

现在，我们有了一种方法，可以获取任意卫星在任何给定时间的位置。我们可以传入未来的时间来制作其路径动画，我们将在下一步中实现这一点。

首先，让我们看看如何使用 CesiumJS 可视化空间中的单个点。

我们从 CDN 加载库：



<script src="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

并创建一个容器元素：



<div id="cesiumContainer"></div>
Enter fullscreen mode Exit fullscreen mode

然后我们初始化查看器。这里我们传入一些额外的选项来禁用需要访问令牌的功能：



// Initialize the Cesium viewer.
const viewer = new Cesium.Viewer('cesiumContainer', {
  imageryProvider: new Cesium.TileMapServiceImageryProvider({
    url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
  }),
  baseLayerPicker: false, geocoder: false, homeButton: false, infoBox: false,
  navigationHelpButton: false, sceneModePicker: false
});
viewer.scene.globe.enableLighting = true;
Enter fullscreen mode Exit fullscreen mode

最后，我们将卫星位置可视化为太空中的一个红点：



const satellitePoint = viewer.entities.add({
  position: Cesium.Cartesian3.fromRadians(
    position.longitude, position.latitude, position.height * 1000
  ),
  point: { pixelSize: 5, color: Cesium.Color.RED }
});
Enter fullscreen mode Exit fullscreen mode

请参阅Glitch 上 simple.html 中此步骤的完整源代码。

4 - 为路径添加动画

要使路径动起来，我们只需要在未来采样更多位置即可。CesiumJS 内置了一种随时间在这些样本之间进行插值的方法。

这个设置有点冗长。你可以在 Glitch 上看到完整的代码。重要的概念如下所述。

我们创建一个SampledPositionProperty。这是一个将随时间保存位置样本并在它们之间进行插值的对象：



const positionsOverTime = new Cesium.SampledPositionProperty();
Enter fullscreen mode Exit fullscreen mode

我们循环遍历我们想要获取的任意数量的样本，并且对于每个样本，我们构建一个时间对象（JulianDate在 CesiumJS 中称为）和一个位置，然后将其添加为样本：



for (let i = 0; i < totalSeconds; i+= timestepInSeconds) {
  const time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
  // ...Get position from satellite-js...
  const position = Cesium.Cartesian3.fromRadians(p.longitude, p.latitude, p.height * 1000);
  positionsOverTime.addSample(time, position);
}
Enter fullscreen mode Exit fullscreen mode

最后，我们将这个positionsOverTime对象传递给我们的点。



const satellitePoint = viewer.entities.add({
  position: positionsOverTime,
  point: { pixelSize: 5, color: Cesium.Color.RED }
});
Enter fullscreen mode Exit fullscreen mode

该点将随着底部时间轴的移动而移动。要将摄像机连接到移动点，请执行以下操作：




viewer.trackedEntity = satellitePoint;
Enter fullscreen mode Exit fullscreen mode




结论

希望你喜欢学习构建卫星跟踪器的一些知识。关于这个话题，我们还有很多内容没有涉及，比如 TLE 中的参数到底是什么意思？它们多久更新一次？如何更新？

我不知道，但我发现了解这种数据以什么格式发布以及从哪里获取它确实很有帮助，而且我们可以用 JavaScript 直接在浏览器中完成所有这些操作，这真是太神奇了！

既然我们现在可以这样做，这里有一些有趣的想法可以探索：

将多颗卫星可视化，例如整个 Starlink 卫星群。灵感源自Celestrak 的查看器，该查看器可显示其目录中的每颗卫星。或许可以可视化一下 Starlink 卫星的数量是如何随时间增长的？

或者模拟从街道层面看去的样子。或许可以添加建筑物/海拔数据，找到城市中观测卫星的最佳位置？

Glitch 源代码中的street-level.html有一个原型。演示： https://satellite-viewer.glitch.me/street-level.html。

卫星街

另请参阅James Darpinian 的“今晚看卫星”应用程序，该应用程序结合使用了 CesiumJS 和 Google 街景。

使用正确比例的 3D 模型而不是点也可能会很有趣，并且可以真正感受到卫星在太空中彼此之间的距离。

鏂囩珷鏉ユ簮锛�https://dev.to/omar4ur/create-a-satellite-tracker-from-scratch-in-30-lines-of-javascript-32gk
Devto 翻译
PREV
我如何开始使用 TypeScript
NEXT
您生活中最不能缺少的生产力应用程序是什么？