⌚️ 👈🏻 🌰 30行のJavaScriptコードを使用してISSの位置を追跡および視覚化する 🆕 🧙🏾 ✍🏽

この素晴らしい記事の翻訳をお届けします。

このチュートリアルでは、国際宇宙ステーション（以下、ISS）などの衛星の位置をリアルタイムで（ほぼ）視覚化するWebアプリケーションを作成します。

アプリケーションをゼロから構築し、実際のロケット科学者の役割を試してみます。

2行要素セット（TLE）と呼ばれる、個々の衛星のデータがどこにあるかを調べます。
ライブラリ「satellite-js」を使用して、DNEから衛星軌道を予測します（この部分はロケット科学に直接関係しています）
結果をレンダリングするために「CesiumJS」ライブラリを使用しますが、経度、緯度、および高度で動作できる任意のライブラリ/エンジンを使用できます。

最終結果のプレビュー：

https://satellite-viewer.glitch.me/

ここでは、軌道上でのISSの動きが40倍に増加していることがわかります。ISSの現在位置を確認するには、コントロールパネルの左上隅にある時計アイコンをクリックします。

1.DNEの取得

DNEは、地球を周回する物体の動きを表すデータ形式です。これは、北米航空宇宙防衛司令部（NORAD）によって作成されました。その作成の歴史について詳しくは、こちらをご覧ください。

軌道の説明があれば、いつでも衛星が配置される場所を予測できます（以下を参照）。

これは、ほとんどの衛星追跡デバイスがリアルタイムでそうしないことを意味します。車の動きを追跡するときなど、継続的に更新されるデータを受信する代わりに、利用可能な最新のDNEを使用して、特定の時点でのオブジェクトの位置を予測します。

DNEはどこで入手できますか？そのようなデータを含むグローバルレジストリはありません。宇宙コミュニティのためのこれらのデータの公開と更新については、これまたはその衛星を所有する人が責任を負います（もちろん、私たちがスパイ衛星について話しているのでなければ）。

DNEは、米国宇宙軍のレジストリであるSpace TrackWebサイトで見つけることができます。

もう1つのリソースは、TSKelso博士によって管理されているCeleStrakのこのリストです。

登録が不要な後者を使用します。 ISSのDNEを見つけるには、[宇宙ステーション]リンクをクリックします。

リストの最初はISSになります：

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

これらの番号の意味は、この表に記載されています。それらのほとんどは、たとえば、打ち上げられたときの衛星識別子とメタデータです。

指定されたリソースでは、気象衛星、GPS衛星、さらにはSpaceXによって展開されているグローバル衛星システムStarlinkのDNEを見つけることができます。

2.衛星の軌道を予測する

次のステップは、DNEを時間内に特定の位置に変換することです。これに

はsatellite-jsを使用します。

CDNからライブラリを接続します。

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

次に、彼女にDNEと時間を与えます。

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`;
//       
const satrec = satellite.twoline2satrec(
  ISS_TLE.split('\n')[0].trim(),
  ISS_TLE.split('\n')[1].trim()
);
//    
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); //  
console.log(position.latitude); //  
console.log(position.height); //

これで、現在の衛星の位置（new Date()

）がわかりました。

この位置は、衛星の動きの特定のモデルを構築した結果です。このモデルはSGP4 / SDP4と呼ばれます。すべてのDNEはこのパターンに従います。

このモデルがどれほど正確であるか疑問に思っているなら、簡単な答えは次のとおりです。それはいくつかの要因に依存します。

. , , , .. , , . , NORAD , .

3.

これで、特定の時点での衛星の位置を取得できるようになりました。これを使用して、衛星の経路をアニメーション化できます。

ただし、最初に、CesiumJSを使用して空間内の単一のポイントをアニメーション化する方法を見てみましょう。

ライブラリをスタイルとともに接続します。

<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">

コンテナを作成します。

<div id="cesiumContainer"></div>

次に、いわゆるビューアを初期化する必要があります。アクセストークンを必要とする機能を無効にするために、いくつかの追加設定を渡します。

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;

最後に、衛星の位置を空間内の赤い点として視覚化できます。

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

ここでグリッチのこのステップの完全なコードは。

4.パスをアニメーション化する

パスをアニメーション化するには、さらにいくつかの将来の衛星位置を取得する必要があります。CesiumJSは、箱から出してすぐに、時間の経過に伴う位置間の補間（遷移）をサポートします。

アニメーションの実装はやや冗長です。対応するグリッチコードは次のとおりです。最も重要な概念を以下に説明します。

作成します SampledPositionProperty

。これは、遷移が行われる時間内の位置を含むオブジェクトです。

const positionsOverTime = new Cesium.SampledPositionProperty();

位置を任意の量で繰り返し、位置ごとにJulianDate

、CesiumJSで呼び出される時間のあるオブジェクトと、位置自体を作成し、サンプルとして追加します。

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

最後に、positionsOverTime

要点を説明します。

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

ポイントはタイムラインとともに移動します。カメラを移動ポイントに取り付けるには、次の手順を実行します。

viewer.trackedEntity = satellitePoint;

結論

衛星追跡ソフトウェアがどのように作成されているかについて少し学びたいと思います。もちろん、多くの質問は未回答のままでした。たとえば、各DNEパラメータはどういう意味ですか？それらはどのくらいの頻度で更新されますか？それらはどの程度正確に更新されますか？

個人的には、そのようなデータの存在、JavaScriptを使用してブラウザで直接取得して使用する方法について学ぶことに非常に興味がありました。

これについて他に何ができるかについてのいくつかのアイデアがあります：

, , Starlink. Celestrak viewer, . , , Starlink
.

これが Glitchの2番目のアイデアのプロトタイプです。デモ：。

また、CesiumJSとGoogleストリートを組み合わせて使用しているJamesDarpinianによる「 Seeasatellitetonight 」もご覧ください。

さらに、3Dモデリングを理解している、または好きな人は、衛星を点の形ではなく実際のスケールで想像して、それらが空間内で互いにどれだけ近いかを示すことができます。

約レーン：私のバージョンのアプリケーションは次のようになります。

ご清聴ありがとうございました。良い一日を！

Macleodのクラウドサーバーは高速で安全です。

上記のリンクを使用するか、バナーをクリックして登録すると、任意の構成のサーバーをレンタルした最初の月が10％割引になります。

30行のJavaScriptコードを使用してISSの位置を追跡および視覚化する

1.DNEの取得

2.衛星の軌道を予測する

3.

4.パスをアニメーション化する

結論

More articles: