leaflet.jsのプラグイン『leaflet-velocity』は、物凄く簡単に風をパーティクルで描画できます。
https://github.com/danwild/leaflet-velocity

今回は、このleaflet-velocityを使って、気象庁の風速データを視覚化したいと思います。
ほとんどGitHubに書いてあるようなことなので、あくまでプログラミング初心者の方向けです。

手順

1. 風速データを取得する。

データは、京都大学のデータサーバに置いてあるので、それを取ってきます。
1. 地球流体電脳倶楽部 https://www.gfd-dennou.org/
2. データサーバ
3. 気象庁データ
4. 数値予報GPV
5. 任意の日時を選択

今回は2018年5月15日の午前0時(日本時間9時)の、地上10m地点の風速データを使います。
ですので、ダウンロードするファイルはこちらになります。
キャプチャ.PNG
http://database.rish.kyoto-u.ac.jp/arch/jmadata/data/gpv/original/2018/05/15/Z__C_RJTD_20180515000000_MSM_GPV_Rjp_Lsurf_FH00-15_grib2.bin
MSM, GPV, Lsurf 等の意味については、各自で調べていただきたいです(僕もあまり自信がないので)。

2. 落としてきたファイルから、風速データを取り出す!

大体、気象データは "grib" という形式で記述されています。
このファイルを人間が解読するには、wgrib2というツールを使うのが便利です。
(wgrib2の導入は、簡単ですがこちらに書いています↓)
https://qiita.com/artistan/items/596cd35202a518fa6c5e
では、さっそくwgrib2を使っていきます。

一. 風速データのみを一覧表示する。

gribファイルは通常、一つのファイルに色々な種類のデータが入っています。

wgrib2 (gribファイル)

このコマンドでもデータの一覧表示ができますが、量が多すぎて大変なので、-matchオプションを使って風速データのみを取り出します。
(ちなみに、風速はU:東西方向、V:南北方向 の二つから成り立っています。
なので、風速を扱いたいときは、UGRD, VGRD両方を取り出す必要があります。)

wgrib2 (gribファイル) -match UGRD

キャプチャ.PNG

ここで、少し出力内容を見ていきます。

1.3:0:d=2018051500:UGRD:10 m above ground:anl

このような出力の場合、

  • 1.3 => データのインデックス番号
  • d=2018051500 => 2018年5月15日のデータ
  • UGRD => U方向の強さ
  • 10m above ground => 地上10m地点
  • anl => 何時間後の数値予想か(anlの場合は0)

となります。
今回は要件が【地上10m地点で午前0時時点の風速データ】なので、一番上(index番号が1.3のデータ)で良さそうです。

二. U, V それぞれの方向のデータを取り出す

wgrib2 の-dオプションに、取り出したいデータのインデックス番号を与えることで、データを抽出できます。

wgrib2 -d 1.3 (grib2ファイル) -grib u.grib2

キャプチャ.PNG

出力ファイルは、U方向のデータということで、"u.grib2" という名前にしました。
そのあと、同じようにして"v.grib2"ファイルも準備します。
キャプチャ.PNG

三. U, V それぞれのファイルを連結する。

これは、leaflet-velocityが読み込む際に必要な手順となります。
ここはさらっと流します。

copy /b u.grib2 + v.grib2 wind.grib2

==出力==
u.grib2
v.grib2
        1 個のファイルをコピーしました。

3. gribファイルをJSON形式に変換する

leaflet-velocityで風速データを読み込ませるには、形式をJSONにする必要があります。
そこで、"grib2json"というツールを使います。
https://qiita.com/artistan/items/596cd35202a518fa6c5e

実際に変換するコマンドはこちらです。

grib2json --names --data --o wind.json wind.grib2

HTML, JavaScriptを準備

と、ここでコードを書こうかと思ったのですが、もう今回は自分で作ったJSONファイルを読み込む設定だけして、あとはGithubに上がっているものを使うことにします。

ので、以下のコマンドを実行します。

git clone https://github.com/danwild/wind-js-leaflet.git

Githubから落としてきたプロジェクトのdemoディレクトリに、すでにHTML, CSS, JavaScriptが記述されています。
その中のdemo.js内の59行目に付近に以下を追記します。
もちろん、作った"wind.json"をdemoディレクトリに設置し忘れないように!

$.getJSON('wind.json', function (data) {

    var velocityLayer = L.velocityLayer({
        displayValues: true,
        displayOptions: {
            velocityType: 'Japan Wind',
            displayPosition: 'bottomleft',
            displayEmptyString: 'No japan wind data'
        },
        data: data,
        maxVelocity: 0.6
    });

    layerControl.addOverlay(velocityLayer, 'Japanese Wind');
});

これで準備は完了です。

あとは、ローカルサーバで動かして、右上に表示されるレイヤコントローラから"Japanese Wind"のチェックを選択するだけです!
地図の日本周辺に小さい点で風が描画されるはずです。
こんなに簡単にパーティクルで描画がされるとは、という感じですね。

最後に

前半のデータ取得部分を書いてほぼ力尽きてしまいました。
後半は少し分かりにくい記事になってしまいましたので、少し時間が経ったら最後の方は書き換えた方がいいかな、と思っています。(こういうときは大概やらないのですが)

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.