jma-wind-map

気象庁「全球数値予報モデルGPV (GSM全球域)」データ（GRIB2）から風ベクトル（U、V）データを取得しRGBエンコーディングしたPNGを地図上に可視化するサンプルです。

デモURL

https://naogify.github.io/jma-wind-map/

概要

• MapLibre GLとDeck.gl、weatherlayers-glを利用して、風向・風速データを地図上に可視化します。
• 風データはpublic/wind_data.pngを利用しています。

風ベクトルデータのPNGのエンコーディングについて

• 風ベクトルデータ（U, V成分）・地上10m をPNG画像にエンコードしています。
• weatherlayers-gl公式ドキュメント および データフォーマット で提唱されている形式でRGBエンコードしています。
• grib2 to RGB Encode PNG tools を使って PNG 画像を作成しています。

データ可視化サンプルコード

map.on('load', async () => {

  const image = await WeatherLayers.loadTextureData('./wind_data.png');

  const deckOverlay = new MapboxOverlay({
    interleaved: true,
    layers: [
      new WeatherLayers.ParticleLayer({
        id: 'particle',
        numParticles: 5000,
        maxAge: 10,
        speedFactor: 30,
        width: 2.0,
        opacity: 0.03,
        image: image,
        bounds: [-180, -90, 180, 90], // 全世界を指定
        imageUnscale: [-128, 127], // RGBエンコード画像作成時に指定した -scale の値。 grib2uv2png.sh を使っている場合はこのまま。
      }),
    ]
  });

  map.addControl(deckOverlay);
});

属性の詳細は Particle Layer | WeatherLayersを参考にしてください。

セットアップ

git clone [email protected]:naogify/jma-wind-map.git
cd jma-wind-map
npm install

開発サーバーの起動

npm run dev

ブラウザで http://localhost:5173 を開いて地図を確認できます。

データ出典

気象庁「全球数値予報モデルGPV (GSM全球域)」を加工して作成

参考

このプロジェクトは以下のプロジェクトに触発されて作成しています。

• https://github.com/Kanahiro/japan-windmap-example
• https://github.com/shiwaku/japan-windmap-example