(気象庁, ©CARTO, ©OpenStreetMap contributors)
MapLibre GL JS というオープンソースのWeb地図ライブラリのうえで天気図（のようなもの）を描いてみたので、やりかたをごく簡単に紹介します。
天気図データを準備する
あまり知られていないかもしれませんが、気象庁は気象庁防災情報XMLのデータの1つとしてベクトル形式の天気図を配布しています。入手経路はいくつかありますが、無料で入手したい場合は先のリンク先の「PULL型フィード」というのを辿っていくとよいです。以下のような種類の天気図が提供されています：
- 地上実況図、地上２４時間予想図、地上４８時間予想図
- アジア太平洋地上実況図、アジア太平洋海上悪天２４時間予想図、アジア太平洋海上悪天４８時間予想図
ただしこのベクトルデータは、残念ながら、気象庁のサイトに表示されている天気図ほどのリッチな情報は含んでいません。
「ベクトル形式」といっても、気象庁防災情報XMLが独自に定めるXML形式ですので、何の加工もせずに使えるわけではなく、データを適切に取り出してあげる必要があります。私は、等圧線や前線を表す経緯度の情報を取りだして、MapLibreが直接読めるGeoJSON形式に変換しました。
（変換のサンプルコードも示したいのですが、私は諸事情で特殊なワークフローを組んで変換しているため、ここでは紹介することができません。すみません。）
前線を描く
今回試したかったことは「前線」（寒冷前線、温暖前線、停滞前線、閉塞前線）のような表現を MapLibre GL JS で手軽に描けるかです。小中学校の理科で習った気がする下図のようなアレです（画像出典: NOAA、パブリックドメイン）。
MapLibre では、 Line Layer の line-patten プロパティを使うことで、画像のパターンを使って線を引くことができます。
以下のような画像を用意して、line-patten として与えることにしました。
なお、パターンが途切れるのをなるべく防ぐために、画像の幅を2のべき乗にするとよいとMapLibreのドキュメントに書かれています。
そんなこんなで、このような前線を描くことができました。それなりにそれっぽく描けたような気がします。
補足
- 等圧線は 20 hPa ごとに太線にしています。
- 天気図データには高気圧や低気圧の移動速度なども含まれていますが、それらは描けていません。
- 気象注意報が発表されているエリアを黄色で塗っていますが、今回の話とは関係ないです。単なる別の遊びです。
MapLibre GL JS は、メジャーバージョン 5 から 3Dの地球儀表示 (Globe Projection) に対応しています。3D地球儀に天気図を描くのは見た目的になかなか新鮮に感じました。
