dcwmtハンズオン in 札幌

流れ

1. dcwmt の入手
2. netCDFファイルから数値データタイルを作成(アンケートセクション2)
3. ブラウザで可視化
4. 「拡大縮小・スクロール」機能を使ってみる (アンケートセクション3)
5. 「地図投影の切り替え」機能を使ってみる (アンケートセクション4)
6. 「重ね合わせ表示」機能を使ってみる (アンケートセクション5)
7. 「アニメーション」機能を使ってみる (アンケートセクション6)
8. 「カラーマップの切り替え」機能を使ってみる (アンケートセクション7)
9. 「数学的操作」機能を使ってみる (アンケートセクション8)
10. 「最大値・最小値の設定」機能を使ってみる (アンケートセクション9)

1. dcwmt の入手

Web サーバの公開ディレクトリに dcwmt の本体を設置します．以下，背景灰色で $ から始まる行は，ターミナル上で実行するコマンドを意味します．

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

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

$ cd <DocumentRoot>/<SubDIR>

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

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

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

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

2. netCDFファイルから数値データタイルを作成(アンケートセクション2)

1. 作業しやすいようにディレクトリを移動する.

$ cd ./dcwmt

2. netCDFファイルを取得する.

ここでは数値データタイルを作成する例として, timeの次元を固定した地表面圧力(Ps)のタイルを作成する.
このタイルを使うことで, トーン図およびコンター図を描画することができる.

$ curl -OL https://www.gfd-dennou.org/arch/yot/tmp/dcpam_T511L26/0040/Ps.nc

3. makeTile.rbを実行して数値データタイルを作成する.

makeTile.rb: netCDFから数値データタイルを自動で作成するスクリプト

$ ruby makeTile.rb -f time=32112.0 Ps.nc@Ps

4. define.jsへ数値データタイルの情報を書き込む

define.jsとは
- 数値データタイルの情報（物理用の名前, タイルのサイズ, etc)が書かれたファイルのこと.
- 数値データタイルで数値データ, define.jsで数値データに関する情報, をWebシステムに渡している.
- 「define.js」は「dcwmt20221123/src」ディレクトリの直下に置いてあります.

define.jsへ書き込む例

スクリプトの実行

$ ruby makeTile.rb -f time=32112.0 Ps.nc@Ps

(...中略...)

数値データタイルの作成が終了しました. 
以下の文字列を「define.js」に追加してください. 

{                                // <-
   NAME: "Ps",                   // <-
   FIXED: ["time=32112.0"],      // <-
   SIZE: { X: 256, Y: 256 },     // <- この部分をコピー
   MAXIMUMLEVEL: 2,              // <-
   AXIS: { X: "lon", Y: "lat" }, // <-
},                               // <-

「define.js」を編集

$ cd ./src
$ vim deinfe.js

=== エディタが開いたら以下の内容を書き込む === 

const DEFINE = {
    // 数値データタイルセットが置かれているディレクトリまでのパス
    ROOT: "./tile",

    // トーン図に関する情報
    TONE: [    
      {                               // <- 
         NAME: "Ps",                  // <-
         FIXED: ["time=32112.0"],     // <- この部分をコピーした文字列に置き換える(今回はもう既に書いてある).
         SIZE: { X: 256, Y: 256 },    // <- 
         MAXIMUMLEVEL: 2,             // <-
         AXIS: { X: "lon", Y: "lat" } // <-
      },                           
    ]                                 

    // 風速ベクトル図に関する情報
    VECTOR: [
     (...中略...)
    ],
}

参考: makeTile.rbの使い方
参考: 風速ベクトル図を描画したい場合

3. ブラウザで可視化

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

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

4. 「拡大縮小・スクロール」機能を使ってみる (アンケートセクション3)

下図の赤枠で囲まれた部分の上で, マウスホイールを動かすと拡大縮小することができます.
下図の赤枠で囲まれた部分の上で, 左クリックをしたままマウスカーソルを動かすとスクロール操作をすることができます.

5. 「地図投影の切り替え」機能を使ってみる (アンケートセクション4)

画面上部にある, 「描画方法の切り替え」をクリックすると選択メニューが出てきます.
- 「2次元平面への投影」をクリックすると, 適用する地図投影法を選択することができます.
- 「3次元球面への投影」をクリックすると, 3次元平面上に投影することができます.

6. 「重ね合わせ表示」機能を使ってみる (アンケートセクション5)

画面の右上にある白い四角をクリックすると, 選択メニューが出てきます.
- 「▲」, 「▼」をクリックすると, 各レイヤの表示順序を変更することができます(選択メニューのうち, 一番下が最上位のレイヤとなります).
- 物理量名の左横にあるスイッチを押すことで, レイヤの表示非表示を切り替えることができます.
- 「opacity=1」の下にあるシークバーを動かすことで, 各レイヤの透明度を変更することができます.

7. 「アニメーション」機能を使ってみる (アンケートセクション6)

下図の赤枠で囲まれた部分より, 「■」を押すことで赤枠内に書かれている座標方向に連続的に図を表示することができます.
- 「▶︎」を押すことでアニメーションを止めることができます.
シークバーを動かすことで, 任意の座標を指定することができます.

8. 「カラーマップの切り替え」機能を使ってみる (アンケートセクション7)

画面上部の「カラーマップの切り替え」をクリックすることで, カラーマップを選択することができます.

9. 「数学的操作」機能を使ってみる (アンケートセクション8)

画面上部の「数学的操作」を選択すると, 描画されている図に対して数学的操作を適用することができます.

10. 「最大値・最小値の設定」機能を使ってみる (アンケートセクション9)

画面右下の「max」と書かれているフォームに最大値を, 「min」と書かれているフォームに最小値を, 記入し「✔︎」ボタンを押すことで, 最大値と最小値を設定することができます.

参考

makeTile.rbの使い方

$ ruby makeTile.rb ./sample.nc@Ps

上記の例では, カレントディレクトリに置かれている sample.nc ファイルの物理量 Ps の数値データタイルを作成することができる.
作成された数値データタイルは tile ディレクトリ以下に出力される．

オプション
- -f (--fix) DIMENTION
  - 次元を固定することができる. 固定しない場合は, 次元が持つ全データの数値データタイルを作る.
  - 複数の次元を固定する場合は, カンマで区切って指定してください.
```
例) $ ruby makeTile.rb -f time=32112.0 sample.nc@Ps  # 次元timeを32112で固定している.
```
- -d (--dirname) PATH
  - 数値データタイルを出力するパスを指定することができる. 指定しない場合は, カレントディレクトリになる.
  - 以下の例では ../tile 以下に数値データタイルが保存される．
```
例) $ ruby makeTile.rb -d ../ sample.nc@Ps # 親ディレクトリに数値データタイルを出力する.
```

風速ベクトル図を描画したい場合

makeTile.rbスクリプトが置かれているディレクトリに移動する.
```
$ cd ./dcwmt_20221011
```
makeTile.rbスクリプトを実行する. 以下のように東西風速 (U) と南北風速 (V) の両方の数値データタイルを作成する．
- makeTile.rbスクリプトの詳しい実行方法は「トーン図を描画したい場合」を確認してください.
```
$ ruby makeTile.rb ./sample.nc@U
$ ruby makeTile.rb ./sample.nc@V
```
スクリプト実行後に出力された文字列を「define.js」に書き込む.
- 「define.js」は, 「dcwmt_20221011」ディレクトリの直下に置いてあります.

define.jsへ書き込む例

スクリプトの実行

$ ruby makeTile.rb -f time=32112.0,sig=0.9987513422966003 U.nc@U

(...中略...)

数値データタイルの作成が終了しました. 
以下の文字列を「define.js」に追加してください. 

{                                
   NAME: "U",                    
   FIXED: ["time=32112.0/sig=0.9987513422966003"],      // <-
   SIZE: { X: 256, Y: 256 },                            // <- この部分をコピー
   MAXIMUMLEVEL: 2,                                     // <- 
   AXIS: { X: "lon", Y: "lat" },                        // <-
},                           

$ ruby makeTile.rb -f time=32112.0,sig=0.9987513422966003 V.nc@V

(...中略...)

数値データタイルの作成が終了しました. 
以下の文字列を「define.js」に追加してください. 

{                                
   NAME: "V",                    
   FIXED: ["time=32112.0/sig=0.9987513422966003"],      // <-
   SIZE: { X: 256, Y: 256 },                            // <- ベクトルを作成する際は, この部分は上記でコピーした文字列と一致している必要がある
   MAXIMUMLEVEL: 2,                                     // <- 
   AXIS: { X: "lon", Y: "lat" },                        // <- 
},

「define.js」を編集

const DEFINE = {
    // 数値データタイルセットが置かれているディレクトリまでのパス
    ROOT: "./tile",

    // トーン図に関する情報
    TONE: [    
             (...中略...)
    ],

    // 風速ベクトル図に関する情報
    VECTOR: [
      {                                
         NAME: ["U", "V"],            // 配列の0番目の要素が「ベクトルの水平成分」, 1番目の要素が「ベクトルの垂直成分」となるように変数名を指定      

         FIXED: ["time=32112.0/sig=0.9987513422966003"],     // <-
         SIZE: { X: 256, Y: 256 },                           // <- この部分をコピーした文字列に置き換える.
         MAXIMUMLEVEL: 2,                                    // <- 
         AXIS: { X: "lon", Y: "lat" }                        // <-
      },                        
    ]                                 
}