はじめに

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

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～4000の範囲を指定しています）。なお、Mapboxのドキュメントによれば、この範囲が256に等分割されて、raster-colorで利用されるようです（@mg_kudoさんに情報提供いただきました）。

javascript

      // カラーを定義
      var colors = {
        "-0": '#7B77D8',
        "250": '#72D3FE',
        "500": '#72FED9',
        "750": '#74FF8A',
        "1000": '#AAFE72',
        "1250": '#F9FF74',
        "1500": '#FDB271',
        "1750": '#FF7380',
        "2000": '#FE72D2',
        "2000-": '#F274FC'
      };

      // 標高分解能
      const u = 0.1

      // 標高タイルラスターレイヤ
      map.addLayer({
        id: 'gsi-terrain-raster',
        source: 'gsi-terrain-raster',
        type: 'raster',
        paint: {
          'raster-color': [
            'interpolate',
            ['linear'],
            ['raster-value'],
            0, colors['-0'],
            250, colors['250'],
            500, colors['500'],
            750, colors['750'],
            1000, colors['1000'],
            1250, colors['1250'],
            1500, colors['1500'],
            1750, colors['1750'],
            2000, colors['2000'],
            4000, colors['2000-']
          ],
          'raster-color-mix': [
            2 ** 16 * 255 * u,
            2 ** 8 * 255 * u,
            255 * u,
            -10000
          ],
          'raster-color-range': [0, 4000],
          'raster-opacity': 0.7,
          'raster-resampling': 'nearest'
        }
      })

dat.GUIで標高レンジに応じてラスターの色を動的に変更できるようにしてあります（ただ、標高レンジも動的に変更したかったのですが、やり方が思い浮かばず断念しました。この記事を見た方に実装していただけることに期待しています（他力本願））。

javascript

      // GUIに標高レンジの色設定用コントローラを追加
      var gui = new dat.GUI();
      gui.addColor(colors, '-0').onChange(setReliefColors);
      gui.addColor(colors, '250').onChange(setReliefColors);
      gui.addColor(colors, '500').onChange(setReliefColors);
      gui.addColor(colors, '750').onChange(setReliefColors);
      gui.addColor(colors, '1000').onChange(setReliefColors);
      gui.addColor(colors, '1250').onChange(setReliefColors);
      gui.addColor(colors, '1500').onChange(setReliefColors);
      gui.addColor(colors, '1750').onChange(setReliefColors);
      gui.addColor(colors, '2000').onChange(setReliefColors);
      gui.addColor(colors, '2000-').onChange(setReliefColors);

      // 標高レンジに基づいて色を設定する関数
      function setReliefColors() {
        map.setPaintProperty('gsi-terrain-raster', 'raster-color', [
          'interpolate',
          ['linear'],
          ['raster-value'],
          0, colors['-0'],
          250, colors['250'],
          500, colors['500'],
          750, colors['750'],
          1000, colors['1000'],
          1250, colors['1250'],
          1500, colors['1500'],
          1750, colors['1750'],
          2000, colors['2000'],
          4000, colors['2000-']
        ]);
      }

参考文献

おわりに

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