JAXA Earth API for JavaScript Version 2.0.0 のサンプルです。 ファイル一式下記からダウンロード可能です。詳細な解説はソースコード内のコメントをご参照ください。 APIの全体についての説明はこちらです。
このサンプルではES Module形式のJavaScriptを利用しています。 動作させるためにはサーバー経由でアクセスする必要があり、HTMLファイルをダブルクリックで開いても動作しません。 端末ローカルで実行する際はVS CodeのLive Server等をご利用ください。
また、一部の実行結果はブラウザのコンソール上に出力されます。 コンソールを開くには、例えばWindows端末のChromeの場合は、ブラウザの[メニュー]→[その他のツール]→[デベロッパーツール]を開くか、[Shift] + [Ctrl] + [I]を押します。
画像を取得してブラウザ上に表示するサンプルです。
DataObjectを簡易的に取得するための機能(je.getDataObject)を利用したサンプルです。
collection.jsonを指定してje.ImageCollectionを作成し、任意の時刻のje.Imageを取り出し、緯度経度と画像サイズからDataObjectを取り出して可視化するサンプルです。 je.getDataObjectよりも複雑な処理を行えます。
je.ImageCollectionから任意の時刻のje.Imageを取り出し、緯度経度と画像サイズからDataObjectを取り出して可視化するサンプルです。 時刻指定、読込状況表示、カラーマップの差し替えなどが可能です。
カラーマップを変更したり、独自の可視化を行う場合のサンプルです。
カラーマップと画像を作成するサンプルです。
HTMLCanvasElementとImageDataを利用して、ピクセル単位で色を評価して独自の可視化を行なう場合のサンプルです。
様々なアプリケーションと連携するためのファイルに変換してダウンロードさせることも可能です。
CSVファイルを作成し、ダウンロードするサンプルです。CSVファイルはエクセルやQGISなどで開けます。
GLBファイルを作成し、ダウンロードするサンプルです。Three.jsを利用します。GLBファイルはBlenderなどで開けます。
KMZファイルを作成し、ダウンロードするサンプルです。KMZファイルはGoogle Earthなどで開けます。
データ間の演算をするサンプルです。je.data.computeを利用すると、単位の変換をしたり、平年差を計算したりすることが可能です。
ケルビン単位のデータを℃単位のデータに換算するサンプルです。
観測値と平年値から平年差(偏差)=観測値-平年値を計算するサンプルです。
データを使った簡単な解析処理サンプルです。
時系列のデータを取得し、アニメーション表示してグラフ化を行う例です。je.data.computeを利用して、場所ごとの季節変化量を求めた画像も作成します。グラフ化にはPlotlyを利用します。
複数のデータから相関関係を求める例です。
je.ImageGeneratorまたはje.TileGeneratorを利用して、インタラクティブに移動できる各種地図APIと連携するサンプルです。 1枚の単体画像として描画するje.ImageGeneratorの方が高速で、表示されたデータを数値配列として扱うことが可能です。 一方でje.TileGeneratorはWMTS方式と同じタイル単位で描画するため多少低速ですが、多くの地図APIと連携可能であり、proj4.jsを用いることで任意の投影法でも利用可能です。
OpenLayersに取り込めるレイヤーを作成するサンプルです。次のサンプルではブラウザのメインスレッドを使用します。
je.ImageGeneratorとImageCanvas を利用することで、1枚の単体画像として描画します。
je.TileGeneratorとImageTile を利用することで、WMTS方式のタイル単位で描画します。
次のサンプルではブラウザのウェブワーカー上でje.ImageGeneratorを利用して処理します。ウェブワーカーで並行処理することで、地図を大きく表示する場合であってもメインスレッドで処理される地図APIの動作が重くなりにくいため、実用的には次の方法を推奨します。
Leafletに取り込めるレイヤーを作成するサンプルです。
MapLibre GL JSに取り込めるレイヤーを作成するサンプルです。
ArcGIS Maps SDK for JavaScriptに取り込めるレイヤーを作成するサンプルです。