【ごくらくdcwmt】 チュートリアル

はじめに

本チュートリアルでは, dcwmt を最小手順で動かすための方法と, dcwmt の機能の使い方を示します. 環境構築 の「dcwwt を動かすのに必要なソフトウェア」が用意された環境でお試しください.

dcwmt の機能

  • 地図投影の切り替え
    • メルカトル図法, 正距方位図法, モルワイデ図法, サンソン図法, 3次元球面への投影
  • 変数の重ね合わせ表示
  • トーン図のカラーマップの変更

チュートリアル

本チュートリアルの流れ

  • 1. dcwmt とサンプルデータの入手
  • 2. ブラウザ上でのサンプルデータの可視化
  • 3. 「地図投影の切り替え」機能を使ってみる
  • 4. 「変数の重ね合わせ表示」機能を使ってみる
  • 5. 「トーン図のカラーマップの変更」機能を使ってみる

1. dcwmt とサンプルデータの入手

Web サーバの公開ディレクトリに dcwmt の本体と数値データタイルを設置すると データの可視化を行うことができます.数値データタイルとしてはサンプルデータを お使いください.

以下,背景灰色で $ から始まる行は,ターミナル上で実行するコマンドを意味します.

1. Web サーバの公開ディレクトリへ移動する.

  • <DocumentRoot> は Web サーバのドキュメントルート, <SubDIR> はドキュメントルート以下のサブディレクトリを意味します. これらはご自身の環境に合わせて置き換えて下さい. 例えば,Linux (Debian11) のデフォルト環境では,<DocumentRoot> は /var/www/html/ に相当します.
$ cd <DocumentRoot>/<SubDIR>

2. dcwmt の圧縮ファイル (tar.gz) を取得する.

$ curl -OL http://www.gfd-dennou.org/arch/dcwmt/src/dcwmt_20221011.tar.gz

3. dcwmtの圧縮ファイルを解凍する.

$ tar -zxvf dcwmt_20221011.tar.gz && rm -f dcwmt_20221011.tar.gz

4. dcwmt_20221011 ディレクトリに移動する.

$ cd ./dcwmt_20221011

5. 可視化するデータの圧縮ファイルを取得する.

  • ごくらく dcwmt では netCDF ファイルから事前に作成された数値データタイルを利用します.
  • 地表面気圧 (Ps) と風速ベクトル (U-V) のデータが含まれます.
$ curl -OL http://www.gfd-dennou.org/arch/dcwmt/sample/2022-10-11_daichi/tile.tar.gz

6. 可視化するデータの圧縮ファイルを解凍する.

$ tar -zxvf tile.tar.gz && rm -f tile.tar.gz

2. ブラウザ上でのサンプルデータの可視化

ブラウザから http://<ホスト名>/<SubDIR>/dcwmt_20221011/main.html にアクセスする.

  • <ホスト名> と <SubDIR> はご自身の環境に合わせて下さい.<SubDIR> は手順 1 で用いたサブディレクトリ名と同じです.

3. 「地図投影の切り替え」機能を使ってみる

  • 「2 次元平面上の投影」を試してみる.
    • ブラウザに表示された画面のうち, 右上にある白い四角にマウスカーソルを合わせると, 選択メニューが出てきます.
    • メニューの中から下図で示すように黄色い枠で囲った部分のボタンをクリックすると, ボタン右横に書いてある地図投影が適用されます.

  • 「3 次元平面上の投影」を試してみる.
    • ブラウザ上で表示された画面のうち, 画面上部の青いメニューから「図」をクリックすると, 選択メニューが出てきます.
    • 「OpenLayers表示」を選択すると「2 次元平面上の投影」をすることができ, 「CesiumJS表示」を選択すると「3 次元平面上の投影」をすることができます.
    • dcwmt を実行するパソコンのスペックによっては,3 次元への切替えに待ち時間が発生することがあります.

4. 「変数の重ね合わせ表示」機能を使ってみる

  • ブラウザに表示された画面のうち, 右上にある白い四角にマウスカーソルを合わせると, 選択メニューが出てきます.
  • 選択メニューのうち, 以下のように操作することで変数の重ね合わせを実現することができます.
    • 下図よりオレンジ色の枠で囲まれた部分のボタンをクリックすると, 一番下にするレイヤーを選択することができます(1つしか選べません).
    • 下図より青色の枠で囲まれた部分のボタンをクリックすると, 上に重ねるレイヤーを選択することができます(複数選ぶことができます).

5. 「トーン図のカラーマップの変更」機能を使ってみる

  • ブラウザ上で表示された画面のうち, 画面上部の青いメニューから「カラーマップ関連」をクリックすると, 選択メニューが出てきます.
  • 選択メニューに表示されている「clrmap_**」(**には数字が入る)をクリックすることで, カラーマップを変更することができます.