本文へ移動

Chikyu Earth地球

世界の国の輪郭を線で描いた地球儀です。地球と同じ速さで回ります。宇宙から見たような地球と、好きな場所の目印も使えます。

「地球」(ちきゅう) は、私たちが住む星の名前です。 名前について（英語）

目次

はじめに

はじめに

ページに地球儀を置き、中心を決め、見る人が回せるようにするまでを、5分ほどで進めます。

このガイドでは、ページに地球儀を置き、東京を中心にして、見る人が回したり傾けたり拡大したりできるようにします。必要なのはテキストエディターとブラウザーだけです。何もインストールしません。ページが CDN からパッケージを読み込みます。

1. 地球儀のあるページ

次の内容を globe.html という名前で保存して、開いてください。<chikyu-earth> タグが地球儀です。その上にあるスクリプトが、このタグを動かします。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Chikyu Earth from jsDelivr</title>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@johnmorrisdotca/chikyu-earth/element/+esm"></script>
  </head>
  <body>
    <chikyu-earth center="139.7,35.7" look="thick" graticule size="320"></chikyu-earth>
  </body>
</html>

地球儀は SVG で、Natural Earth の国の輪郭から描かれます。中心は center 属性で決めます。値は「経度,緯度」の形です。center を書かないと、ブラウザーが見る人の場所を尋ね、その場所が中心になります。見る人が答えるまで、または断った場合は、グリニッジ子午線が中心です。

look は line (細い線。初期値) か thick (太い線) です。graticule を付けると、経線と緯線が入ります。size は幅と高さで、単位はピクセルです。

2. 見る人が回せるようにする

パッケージは描くだけです。回す、傾ける、拡大する、ピンチ、移動、速さの選択、全体表示といった操作は、共有の kazoku-ui のビューコントロールが受け持ちます。コントロールを追加し、その結果をリスナー1つで地球儀に渡します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Chikyu Earth with the shared controls</title>
    <script type="module">
      import "https://cdn.jsdelivr.net/npm/@johnmorrisdotca/kazoku-ui/view-controls/define/+esm";
      import "https://cdn.jsdelivr.net/npm/@johnmorrisdotca/chikyu-earth/element/+esm";

      const earth = document.querySelector("chikyu-earth");
      document.querySelector("kazoku-view-controls").addEventListener("kazoku-viewchange", (event) => {
        earth.setView(event.detail, event.detail.final, event.detail.reason !== "auto");
      });
    </script>
  </head>
  <body>
    <div id="globe" tabindex="0">
      <chikyu-earth size="420" look="thick" center="139.7,35.7"></chikyu-earth>
    </div>
    <kazoku-view-controls for="globe" address grab-radius="fit" controls="advanced" tilt-max="90" speed="0.004178"></kazoku-view-controls>
  </body>
</html>

setView(view, final, live) は、コントロールのカメラを受け取ります。操作の途中は final が false で、軽い変形だけを行います。操作が落ち着くと true になり、正射図法をもう一度描きます。live は、手がビューに触れていること (自動で回るとき以外) を伝えます。その間は回している最中も正射図法を描き直し、1秒に30回までなので、地球儀はポインターについてきます。自動で回るときは、約1秒に1回描きます。自動で回る速さは、地球と同じ毎秒 0.004178 度で、恒星日で1回転します。動きを減らす設定の人には、コントロールが止めたままにします。

3. 次に読むもの

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

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