Mapbox GL JS v3と国土地理院標高タイルで海面上昇シミュレータを作成してみました

Last updated at 2023-12-16Posted at 2023-12-12

はじめに

この記事は Mapbox Advent Calendar 2023 4日目の記事です。

Mapbox GL JS v3で、ラスタータイルの色を変更して表示する機能（raster-color、raster-color-mix、raster-color-range）が実装されました。

今回は、Mapbox GL JS v3のラスタータイルの色を変更できる機能と国土地理院標高タイル（Terrain-RGB形式）を用いて、海面上昇シミュレータを作成してみました。

Mapbox GL JSで利用する標高タイルのエンコーディング（標高換算式）はTerrain-RGB形式（もしくはTerrarium-RGB形式）である必要があります。一方で、国土地理院標高タイルは、Terrain-RGB形式ではないエンコーディングを利用しているため、Terrain-RGB形式に変換する必要があります。Terrain-RGB形式と国土地理院標高タイルの考え方の違いについては、下記の記事が詳しいです。
https://qiita.com/Kanahiro/items/e22594b738655a189c1d

Terrain-RGB形式に変換済みの国土地理院標高タイルを下記のGitHubで公開していますのでこちらを使用しました。

アウトプットイメージ

デモサイト

本シミュレータは地形データで一定の高さ以下の場所を青く塗りつぶす処理をするだけのものであり、ハザードマップとは異なります。堤防等による防災対策や土砂の堆積等は考慮されていません。実際の洪水や津波発生時の危険性は各自治体が公表するハザードマップでご確認ください。

標高タイルのRGB値の標高換算式（=エンコーディング）

標高タイル（Terrain-RGB形式）のRGB値の標高換算式（=エンコーディング）は下記のとおりになります。
RGBピクセル値を3桁の256進数として捉え、横軸が縦軸を標高とした傾き0.1の単調増加関数になります。

Terrain-RGB形式の標高換算式

標高=-10000+((R値×256×256+G値×256+B値)×0.1)

（引用元：『現場のプロがわかりやすく教える位置情報エンジニア養成講座』）

ソースコードと解説

全体のソースコードは、下記のGitHubから入手してください。
MapboxのAPIキーはご自身で用意してください。

解説は下記のとおりになります。
raster-color:raster-valueに基づく色を定義します（初期値として透明にしています）。
raster-value:raster-color内でのみ利用できる設定で、raster-color-mixの設定により得られた値を取得できます。
raster-color-mix:RGB値を一つの値（raster-valueで取得できるもの）に変換するパラメータを指定します。[mix.r,mix.g,mix.b,mix.a]の4つのパラメータを指定します。4番目のパラメータであるmix.aは透明度ではなく、固定値のオフセットになります。上述の標高タイルのRGB値の標高換算式をraster-color-mixで定義すると下記のとおりになります。uは標高分解能（0.1）です。
raster-color-range:raster-color-mixで得られる値の範囲を指定します（スライダーの値を0～100mで設定しているので、0～128の範囲を指定しています）。なお、Mapboxのドキュメントによれば、この範囲が256に等分割されて、raster-colorで利用されるようです。

javascript

      // 標高タイルラスターレイヤ
      map.addLayer({
        id: 'gsi-terrain-raster',
        source: 'gsi-terrain-raster',
        type: 'raster',
        paint: {
          // 初期状態で全ての標高に対して透明を指定
          'raster-color': [
            'interpolate',
            ['linear'],
            ['raster-value'],
            0, 'transparent',
            128, 'transparent'
          ],
          'raster-color-mix': [
            2 ** 16 * 255 * u,
            2 ** 8 * 255 * u,
            255 * u,
            -10000
          ],
          'raster-color-range': [0, 128],
          'raster-opacity': 0.7,
          'raster-resampling': 'nearest'
        }
      })

また、raster-colorは、下記でスライダー機能を用いて動的に変更できるようにしてあります（標高がスライダーの値以下のときに青に着色されます）。

html

  <div class="map-overlay top">
    <div class="map-overlay-inner">
      <h2>海面上昇シミュレーション</h2>
      <label>海面高さ: <span id="elevation-slider-value">0m</span></label>
      <input id="elevation-slider" type="range" min="0" max="100" step="1" value="0">
      <input id="disclaimer-button" type="button" value="免責事項" onclick="showDisclaimer();">
    </div>
  </div>

javascript

      // スライダーで標高に応じた色を制御
      document.getElementById('elevation-slider').addEventListener('input', function (e) {
        const elevation = parseFloat(e.target.value);
        document.getElementById('elevation-slider-value').innerText = elevation + 'm';

        // 標高タイルレイヤの色を更新
        map.setPaintProperty('gsi-terrain-raster', 'raster-color', [
          'step',
          ['raster-value'],
          '#000098', elevation,   // 標高がelevation以下の場合の色
          'transparent'           // 標高がelevationより高い場合の色
        ]);

      });

全球バージョン

海面上昇シミュレータの全球バージョンのソースコードとデモサイトになります。
標高タイルには、AWS(Mapzen) Terrain Tilesを使用しています。

海外の事例

ありがたいことに、海面上昇シミュレータは海外でも展開されています。

https://aws-terrain-flood.netlify.app/#6/45/-123 (@dkwiens)

国内の事例

JAXA

数値表層モデル（DSM：樹木や建物等の高さを含む地表面の高さ）を使った海面上昇のシミュレーション
Web地図ライブラリー：OpenLayers

産業技術総合研究所

ASTER GDEM Ver.2(30m空間分解能)と地理院タイル（10m空間分解能）に基づく海面上昇シミュレーション
Web地図ライブラリー：Leaflet

参考文献

おわりに

Mapbox GL JS v3のラスタータイルの色を変更できる機能と国土地理院標高タイル（Terrain-RGB形式）を用いて、海面上昇シミュレータを作成してみました。Mapbox GL JSでラスタータイルの色を変更できると様々な地図表現が可能になります。最後に、Mapbox GL JS v3のラスタータイルの色を変更できる機能を用いた事例をもう一つ紹介して終わります。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Mapbox GL JS v3と国土地理院 標高タイルで海面上昇シミュレータを作成してみました