2025年9月19日金曜日

NSIDCからダウンロードできる北極と南極の海氷データを地図上に表示する

NSIDC - National Snow and Ice Data Centerからダウンロードできる北極と南極の海氷のデータから、地図上に海氷を表示するAPEXアプリケーションを作成します。

海氷の表示に使用するデータは、Sea Ice Index, Version 4です。

作成したAPEXアプリケーションは以下のように動作します。


APEXに標準で添付されているマップ・リージョンは、MapLibreをライブラリとして使っています。MapLibreは標準では極座標マップをサポートしていない（プラグインを組み込むとできるという情報はありますが、未確認です）ので、今回はOpenLayersで描画することにしました。

Web画面に描画する部分はほとんどClaudeに作ってもらいました。Claudeが作ってくれたアプリは、以下のような画面です。JavaScriptが<script>タグに書かれているHTMLファイルです。


地図上に描画するたびに海氷の日次データをNSIDCからダウンロードするのも良くないので、一度ダウンロードしたデータはデータベースに保存し、その後のアクセスではデータベースに保存されているデータを使うようにします。また、ブラウザから直接NSIDCにアクセスしてファイルをダウンロードしようとすると、CORSの制限にかかります。APEXアプリケーションの場合、データベースからデータをダウンロードする限り、CORSの制限はかかりません。

海氷データを保存する表をNOAA_G02135として作成します。


極と日付を指定してNSIDCから海氷データを取得するためのパッケージをNOAA_G02134_PKGとして作成します。

パッケージ定義部です。


パッケージ本体です。


これらのオブジェクトをデータベースに作成しておきます。

空のAPEXアプリケーションをNSIDC Sea Ice Indexとして作成します。デフォルトで作成されるホーム・ページに、すべての機能を実装します。

ホーム・ページのJavaScriptのファイルURLに、使用するJavaScriptのライブラリを設定します。静的アプリケーション・ファイルのopenlayers_geotiff_polar.jsは、後ほど作成します。
https://cdn.jsdelivr.net/npm/proj4@2.19.10/dist/proj4.min.js
https://cdn.jsdelivr.net/npm/ol-proj@1.1.0/dist/js/proj4.min.js
https://cdn.jsdelivr.net/npm/geotiff@2.1.3/dist-browser/geotiff.js
https://cdn.jsdelivr.net/npm/ol@10.6.1/dist/ol.js
#APP_FILES#openlayers_geotiff_polar#MIN#.js
ページ・ロード時に実行に以下を記述します。ファンクションinitializeMapはopenlayers_geotiff_polar.jsで定義しています。

initializeMap();

CSSのファイルURLに、OpenLayersが必要とするCSSファイルを設定します。
https://cdn.jsdelivr.net/npm/ol@10.6.1/ol.min.css
CSSのインラインに、地図の表示を調整するスタイルを定義します。
html,body,#map{margin:0;height:100%}
#map {
  background-color: #1e3a5f; /* 深い海の青 */
}


地図を操作するボタンや表示する海氷の日付を決めるページ・アイテムは、テンプレートがItem Containerの静的コンテンツのリージョンに配置します。

ボタンをクリックしたときの処理はAPEXアクションとして実装します。このリージョンをapex.actions.createContextを実行してAPEXアクションを保持する対象にするため、静的IDとしてCONTROLSを設定します。


ボタンNORTH、SOUTH、ICEの動作のアクションを動的アクションで定義に設定し、詳細のカスタム属性にdata-action="ボタン名"を設定します。

data-actionの定義によって呼び出されるAPEXアクションは、静的アプリケーション・ファイルopenlayers_geotiff_polar.jsに記述しています。


表示する海氷の日付はページ・アイテムP1_OBSERVATION_DATEで選択します。タイプは日付ピッカーです。


OpenLayersによる地図を表示するリージョンを作成します。タイプは静的コンテンツです。

ソースのHTMLコードとして以下を記述します。

<div id="map"></div>

OpenLayersを初期化するにあたって、このDIV要素の大きさが決まっている必要があります。外観のテンプレート・オプションでBody Heightに640pxを設定しておきます。


データベースから海氷のGeoTIFFデータを取り出すために、Ajaxコールバックとしてプロセスを作成します。プロセスの名前はGET_BLOBとします。

ソースのPL/SQLコードとして以下を記述します。



最後に静的アプリケーション・ファイルとしてopenlayers_geotiff_polar.jsを作成します。


openlayers_geotiff_polar.jsの内容は以下です。

これでアプリケーションを実行すると、記事の先頭にあるGIF動画のように動作します。

作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/openlayers-nsidc-noaa-sea-ice-index.zip

今回の記事は以上になります。

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完
投稿者 時刻:
ラベル: