やり方

地球儀に人工衛星を表示する

ページが用意した軌道要素から、ISS、宇宙ステーション、数千機の Starlink 衛星を宇宙の表示に出します。要素の入手のルールと、軽さを保つ制限も説明します。

<chikyu-space> は、表示している日時の人工衛星の位置を SGP4 で計算して描き、軌道も表示します。押された衛星については、情報を知らせます。任意の機能で、import しなければ何も負担になりません。

このパッケージは何も取得せず、軌道のデータも含みません。 軌道要素はページが入手して渡します。だれにデータを頼んでよいか、どれくらいの頻度か、どう出典を示すかは、頼むページ側の責任として残ります。

インストール

npm install @johnmorrisdotca/chikyu-earth three @johnmorrisdotca/kazoku-ui astronomy-engine satellite.js

three、@johnmorrisdotca/kazoku-ui、astronomy-engine、satellite.js (MIT。バージョン6を使ってください。素の JavaScript で、gzip で 10 KB です) は任意の依存パッケージです。使うのは宇宙の表示と /satellites だけです。

軌道要素を入手する

形式は、CelesTrak が配信する「GP」の JSON で、衛星1機につき1つのオブジェクトです (読み取る項目は ElementSet にあります)。取得する前に CelesTrak の利用ポリシーを読み、ページに出典を書いてください。2026年11月2日の時点の要点です。

データは、早くても2時間おきにしか更新されません。リストは、訪問者ごとではなく、更新ごとに1回だけ頼みます。決まった間隔でサーバーから取得して保存し、その写しを配信してください。
200 以外の応答が返ったら、そこで止めてください。2時間に50回より多くエラーになると、あなたのアドレスが CelesTrak のファイアウォールに入ります。
Starlink などのグループは、全体リストの一部です。取得するのはどちらか一方です。
Space-Track も同じ要素を、承認されたアカウントに配信しています。ただし利用規約で、データを他の人に渡すことが認められていないので、他の人が見るページには向きません。

軌道要素は古くなります。SGP4 の誤差は、1日に数キロメートルずつ増えます。表示している日時から14日より離れた要素の衛星は、表示から外します (maxAgeDays)。要素の古さは info(index, ms).ageDays でわかります。デモは、2026年11月2日の CelesTrak のリスト (すべてのステーションと、Starlink の5機に1機) を1回だけ取得した写しを使い、ページに出典を書き、要素の古さを表示します。

表示する

宇宙の表示を置いたページです。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Satellites on the Earth from space</title>
  </head>
  <body>
    <chikyu-space center="-100,40" time="2026-11-02T12:00Z" speed="0" texture-base="/textures/" style="width: 420px"></chikyu-space>
    <script type="module" src="./main.ts"></script>
  </body>
</html>

そのスクリプトです。createSatellites は、軌道要素ごとに SGP4 を始め、使えなかったものを refused に並べます。setSatellites は、そのグループを表示に載せます。

import "@johnmorrisdotca/chikyu-earth/space/element";
import { createSatellites, type ElementSet } from "@johnmorrisdotca/chikyu-earth/satellites";

// Your page gets the elements (CelesTrak's JSON, within its usage policy) and passes them in; this is one downloaded element set.
const iss: ElementSet = {
  OBJECT_NAME: "ISS (ZARYA)",
  OBJECT_ID: "1998-067A",
  EPOCH: "2026-11-02T10:25:21.580320",
  MEAN_MOTION: 15.49150046,
  ECCENTRICITY: 0.0007139,
  INCLINATION: 51.6332,
  RA_OF_ASC_NODE: 335.9757,
  ARG_OF_PERICENTER: 339.3739,
  MEAN_ANOMALY: 20.6961,
  NORAD_CAT_ID: 25544,
  BSTAR: 0.00012,
  MEAN_MOTION_DOT: 0.0001,
  MEAN_MOTION_DDOT: 0,
};

const space = document.querySelector("chikyu-space")!;
space.setSatellites("stations", createSatellites([iss]), { color: "#ffd54f", size: 6, orbits: true });
space.addEventListener("chikyu-satellite-click", (event) => console.log((event as CustomEvent).detail.info?.name));

グループは、何機入っていても描画の呼び出しは1回です。グループには名前を付けます ("stations"、"starlink")。showSatellites(name, false) で隠し、setSatellites(name, null) で取り除いて、持っていたものを解放します。orbits: true を付けると、40機以下のグループで、すべての軌道を描きます。

1機を選ぶ

衛星を押すと (表示を回すドラッグや、地球の裏側の衛星は対象外です)、chikyu-satellite-click が { group, index, info } と一緒に発生します。info には、名前、NORAD 番号、軌道要素の古さ、高さ、速さ、周期が入っています。selectSatellite({ group, index }) はコードから1機を選び (リング、軌道、横に名前が出ます)、satelliteInfo(ref) はその情報を返します。検索ボックスや名前の一覧があるページでは、この2つを使えば、キーボードだけの人も選べます。

サーバーで

同じ位置の計算に、ブラウザーは要りません。次は、1つの軌道要素から ISS の高さと速さを求める例です。

import { createSatellites } from "@johnmorrisdotca/chikyu-earth/satellites";

// SGP4 on a server: the same positions the space view draws, no browser needed.
const group = createSatellites([
  {
    OBJECT_NAME: "ISS (ZARYA)",
    OBJECT_ID: "1998-067A",
    EPOCH: "2026-11-02T10:25:21.580320",
    MEAN_MOTION: 15.49150046,
    ECCENTRICITY: 0.0007139,
    INCLINATION: 51.6332,
    RA_OF_ASC_NODE: 335.9757,
    ARG_OF_PERICENTER: 339.3739,
    MEAN_ANOMALY: 20.6961,
    NORAD_CAT_ID: 25544,
    BSTAR: 0.00012,
    MEAN_MOTION_DOT: 0.0001,
    MEAN_MOTION_DDOT: 0,
  },
]);
const info = group.info(0, Date.UTC(2026, 10, 2, 12));
console.log(`${info.name}: ${Math.round(info.altitudeKm)} km up, ${info.speedKmS.toFixed(2)} km/s`);

ISS (ZARYA): 422 km up, 7.67 km/s

制限 (軽さのために)

宇宙の表示のほかの部分と同じルールで、6,000機でそれぞれテストしています。

止まっているときは何もしません。描画せず、フレームも要求せず、SGP4 も動かしません。
SGP4 は、フレームレートに関係なく、おおよそ1秒に1回です。グループ全体を、ステップ (時計の速さに応じて1〜60秒) だけ離した2つの時刻で計算し、その間は算術だけで求めます。
描画は1秒に最大30回で、実際の速さのとき、または動きを減らす設定のときは、1秒に1回です。
実際の60倍より速いときは、グループを隠し、SGP4 も動かしません。2つの時刻が離れすぎて、補間できないからです。選んだ衛星は、そのまま正確に置きます。
画面の外や、隠れたタブでは何も描きません。WebGL のコンテキストは1つで、グループや要素を取り除くとすべて解放され、コンテキストが失われても、衛星ごと戻ります。

数値とテストは、docs/satellites.md にあります。

ソースを見る GitHub で編集@johnmorrisdotca/chikyu-earth 0.11.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。