JAXA Earth API for JavaScript サンプル

JAXA Earth API for JavaScript Version 2.0.0 のサンプルです。 ファイル一式下記からダウンロード可能です。詳細な解説はソースコード内のコメントをご参照ください。 APIの全体についての説明はこちらです。

ファイル一式ダウンロード

このサンプルではES Module形式のJavaScriptを利用しています。 動作させるためにはサーバー経由でアクセスする必要があり、HTMLファイルをダブルクリックで開いても動作しません。 端末ローカルで実行する際はVS CodeのLive Server等をご利用ください。

また、一部の実行結果はブラウザのコンソール上に出力されます。 コンソールを開くには、例えばWindows端末のChromeの場合は、ブラウザの[メニュー]→[その他のツール]→[デベロッパーツール]を開くか、[Shift] + [Ctrl] + [I]を押します。

画像表示

画像を取得してブラウザ上に表示するサンプルです。

je.getDataObject

DataObjectを簡易的に取得するための機能(je.getDataObject)を利用したサンプルです。

je.ImageCollection

collection.jsonを指定してje.ImageCollectionを作成し、任意の時刻のje.Imageを取り出し、緯度経度と画像サイズからDataObjectを取り出して可視化するサンプルです。 je.getDataObjectよりも複雑な処理を行えます。

je.Image

je.ImageCollectionから任意の時刻のje.Imageを取り出し、緯度経度と画像サイズからDataObjectを取り出して可視化するサンプルです。 時刻指定、読込状況表示、カラーマップの差し替えなどが可能です。

様々な可視化

カラーマップを変更したり、独自の可視化を行う場合のサンプルです。

je.image.ColorMap & je.image.createCanvas

カラーマップと画像を作成するサンプルです。

HTMLCanvasElement & ImageData

HTMLCanvasElementImageDataを利用して、ピクセル単位で色を評価して独自の可視化を行なう場合のサンプルです。

各種ファイル出力

様々なアプリケーションと連携するためのファイルに変換してダウンロードさせることも可能です。

CSVファイル

CSVファイルを作成し、ダウンロードするサンプルです。CSVファイルはエクセルやQGISなどで開けます。

GLBファイル(3Dモデル)

GLBファイルを作成し、ダウンロードするサンプルです。Three.jsを利用します。GLBファイルはBlenderなどで開けます。

KMZファイル

KMZファイルを作成し、ダウンロードするサンプルです。KMZファイルはGoogle Earthなどで開けます。

データ間演算

データ間の演算をするサンプルです。je.data.computeを利用すると、単位の変換をしたり、平年差を計算したりすることが可能です。

単位換算

ケルビン単位のデータを℃単位のデータに換算するサンプルです。

平年差(偏差)の計算

観測値と平年値から平年差(偏差)=観測値-平年値を計算するサンプルです。

解析処理

データを使った簡単な解析処理サンプルです。

時系列データ処理

時系列のデータを取得し、アニメーション表示してグラフ化を行う例です。je.data.computeを利用して、場所ごとの季節変化量を求めた画像も作成します。グラフ化にはPlotlyを利用します。

データの相関

複数のデータから相関関係を求める例です。

地図API連携

je.ImageGeneratorまたはje.TileGeneratorを利用して、インタラクティブに移動できる各種地図APIと連携するサンプルです。 1枚の単体画像として描画するje.ImageGeneratorの方が高速で、表示されたデータを数値配列として扱うことが可能です。 一方でje.TileGeneratorはWMTS方式と同じタイル単位で描画するため多少低速ですが、多くの地図APIと連携可能であり、proj4.jsを用いることで任意の投影法でも利用可能です。

OpenLayers

OpenLayersに取り込めるレイヤーを作成するサンプルです。次のサンプルではブラウザのメインスレッドを使用します。

je.ImageGeneratorとImageCanvas を利用することで、1枚の単体画像として描画します。

je.TileGeneratorとImageTile を利用することで、WMTS方式のタイル単位で描画します。

次のサンプルではブラウザのウェブワーカー上でje.ImageGeneratorを利用して処理します。ウェブワーカーで並行処理することで、地図を大きく表示する場合であってもメインスレッドで処理される地図APIの動作が重くなりにくいため、実用的には次の方法を推奨します。

Leaflet

Leafletに取り込めるレイヤーを作成するサンプルです。

MapLibre GL JS

MapLibre GL JSに取り込めるレイヤーを作成するサンプルです。

ArcGIS Maps SDK for JavaScript

ArcGIS Maps SDK for JavaScriptに取り込めるレイヤーを作成するサンプルです。