Mapbox Japan weather layersを使用した雨雲レーダーのデモ

雨雲レーダーは、現在の雨雲の位置と予測される将来の位置を地図上に表示するサービスで、日本で広く利用されています。気象災害対策、交通機関、マーケティングなど様々な分野で活用されています。本ブログ記事では、Mapbox Japan Weather Layers （JWL）Mapbox 雨雲レーダーを作成する手順を詳しく説明します。実際の動作はデモでご覧いただき、完全なコードはGitHub リポジトリでご確認ください。

Mapbox Japan Weather Layers JWL）について

雨雲などの気象データは、通常、気象庁などの機関によりGRIB2と呼ばれるバイナリ形式で提供されます。このデータを地図上に表示するには、GRIB2データを解析し、タイルセットに変換する必要があります。 元の生データから作業を行う場合、複雑なパイプラインを構築し、絶えず更新される気象データを継続的にタイルセットに変換するためのインフラコストを管理する必要があります。JWLは、従来の方法とは異なり、Mapboxで配信するためのタイルセットに変換することで、誰でも簡単に地図上に気象データを表示できるようにします。さらに、Mapbox Tilequery API 、気象データをJSON形式で取得することが可能です。 Mapbox Japan Weather Layers詳細については、こちらをご覧ください。

雨雲レーダーを構成する五つの要素

雨雲レーダーのデモは、以下の5つの要素で構成されております： 

1. ベースマップレイヤー
2. Japan Weather Layers JWL）タイルセット
3. 降水記号
4. 表示されているタイルセットのバンドを切り替えるためのタイムスライダー
5. 現在表示されているバンドの時間を示すタイムボックス

「バンド」とは、JWLタイルセットの単一の時系列スライスを指します。各バンドは異なる時刻のデータを表します。例えば、mapbox.weather-jp-nowcastは現在降水量と最大60分先までの5分刻みの将来降水量をカバーしているため、13の異なる時間バンドを含んでいます。 データが9:00に開始すると仮定した場合、最初のバンドは9:00時点の観測降水量を表します。続くバンドは予測降水量を表し、2番目のバンドは9:05の予測値となります。このパターンはデータの終了時刻である10:00まで継続します。

ベースマップは mapbox://styles/mapbox/light-v11 Mapbox提供されています。凡例はJWLタイルセットの色設定に基づいて表示されます。時間ダイアログでは、現在表示されているバンド（時間）が日本標準時（JST）に変換され表示されます。JWLタイルセットは以下の4つのタイルセットを使用しており、時間スライダーで表示されるタイルセットのバンドを切り替えることができます。

本デモで使用されているタイルセットに加え、JWLで利用可能なタイルセットの完全な一覧もご参照ください。

降水強度を定義することにより可視化します ラスターカラー

JWL降水量の値が色でどのように表現されるかは、ユーザー体験に直接影響します。デモ実装では、気象庁の標準降水量分類に基づく色表現を採用しております。 以下では、値が存在しない場合や値が0の場合、rgbaを0に設定して透明化します。また、Mapbox 上、例えば降水強度1mmに対応する色を指定したい場合、コード内では1未満の値（下記例では0.99）を記述する必要があります。

const rasterColorExpression = [  'step',
  ['raster-value'],
  透明な黒  0.05, 'rgba(242, 242, 255, 0.9)',  0.99, 'rgba(160, 210, 255, 0.9)',
  4.99, 'rgba(33, 140, 255, 0.9)',  9.99, 'rgba(0, 65, 255, 0.9)',  19.99, 'rgba(250, 245, 0, 0.9)',
  29.99, 'rgba(255, 153, 0, 0.9)',  49.99, 'rgba(255, 40, 0, 0.9)',  79.99, 'rgba(180, 0, 104, 0.9)'
];

ラスタ再サンプリングの設定を選択してください

設定 ラスタ再サンプリング ～へ最も近い' を選択すると、典型的な雨雲レーダーと同様に、格子状に配置された正方形のグリッドで構成される表示が生成されます。' に設定すると、補間する滑らかな外観の表現を生成します。デフォルト値は ' です。補間する'.

map.addLayer({
    id: `rain-layer-${tileset.id}`,
    type: 'grid',
    source: `rain-source-${tileset.id}`,
    paint: {
        'raster-array-band': '',
        'raster-color': rasterColorExpression,
        'raster-color-range': [0, 100],
        'raster-opacity': 0,
        'raster-resampling': 'nearest',
        'raster-color-range-transition': {
            duration: 0
        }
    }
});

複数のタイルセットを同時に読み込むことで、滑らかな動作を実現します。

タイムスライダーが操作されるたびにタイルセットを読み込むと、UIの遅延や視覚的なちらつきが生じます。そのため、デモ実装では、最初に4つのJWLタイルセットを読み込み、タイムスライダーの操作に応じてバンド（時間）のみを切り替える方式を採用しております。

map.addSource(`rain-source-${tileset.id}`, {
    type: 'raster-array',
    url: `mapbox://${tileset.id}`,
    tileSize: 1026
});

時系列バンドを単一の時間軸に沿って整理する

4つのタイルセットは異なる時間帯をカバーしております。そのため、重複する帯域を除去するには、時系列データをソートし、現在の時刻を位置付けて統合し、単一の連続した時間スライダーとして使用可能な形式に整える必要がございます。ユーザー様は単一のUI上で、過去から未来へと自然に操作いただけます。 この雨雲レーダーにおける帯域の重複についてですが、気象庁のデータ仕様により、mapbox.weather-jp-nowcast（現在から60分先までの雨雲データをカバー）の最終帯域（60分先）と、mapbox.weather-jp-rain-1-6（1時間先＝60分先）の最初の帯域が同一時刻を示す場合があります。そのため、更新頻度の高いmapbox.weather-jp-nowcastの帯域を優先的に表示いたします。 （1時間先＝60分先）の最初の帯（1時間先＝60分先）が同一時刻を示す場合があります。そのため、更新頻度mapbox.weather-jp-nowcastの帯を優先的に表示しております。

allBands = [];
let lastNowcastBandId = null;

for (const tileset of sortedTilesets) {
    const result = results.find(r => r?.tileset.id === tileset.id);
    if (!result || !result.metadata) continue;

    const metadata = result.metadata;

    if (metadata.raster_layers && metadata.raster_layers.length > 0) {
        const layer = metadata.raster_layers[0];
        const layerName = layer.name || 'precipitation';
        const rawBands = layer.bands || layer.fields?.bands || [];

        // Parse and sort bands once
        let bandIds = rawBands
            .map(b => {
                if (typeof b === 'object' && b.band_id) return parseInt(b.band_id);
                if (typeof b === 'string' || typeof b === 'number') return parseInt(b);
                return NaN;
            })
        Filter the array to include only values that are not NaN.
            .sort((a, b) => a - b);

        // Apply filters based on tileset type
        if (tileset.id === 'mapbox.weather-jp-nowcast-last-60m') {
            // Remove last band (overlaps with nowcast)
            if (bandIds.length > 0) {
                bandIds = bandIds.slice(0, -1); // ← Remove last band
            }
        } else if (tileset.id === 'mapbox.weather-jp-rain-1-6') {
            // Only keep bands after last nowcast band
            if (lastNowcastBandId !== null) {
                bandIds = bandIds.filter(b => b > lastNowcastBandId); // ← Filter overlapping bands
            }
        }

        // Track last nowcast band for filtering next tileset
        if (tileset.id === 'mapbox.weather-jp-nowcast' && bandIds.length > 0) {
            lastNowcastBandId = bandIds[bandIds.length - 1]; // ← Store for comparison
        }

スライダーの操作に応じてバンドを切り替えてください

ユーザーがスライダーを動かすと、表示されているバンド（時間帯）が瞬時に切り替わります。JWLのタイルセットの不透明度を操作することで、表示中のバンド以外のタイルセットは透明になります。例えば、mapbox.weather-jp-nowcastのバンドを表示する際には、他の3つのタイルセットの不透明度は0に設定されます。

map.setPaintProperty(layerId, 'ラスター配列バンド', バンドのバンドID.toString());
map.setPaintProperty(layerId, 'raster-opacity', 0.85);

ぜひ「Japan Weather Layers」をお試しください！ 

上記で説明した通り、Mapbox Japan Weather Layersをご利用いただくことで、雨レーダーなどの天気マップコンテンツを最小限の技術的労力とコストで簡単に実装できます。デモの完全なコードはGitHubリポジトリでご確認いただけます。

JWLの基盤となる気象庁（JMA）データに関する注意事項

JWLを通じて配布される降水タイルセットは、日本の防災インフラを支える気象庁（JMA）の数値予報および運用データに基づいています。