おもしろげな機能が MapLibre GL JS にマージされていました。terrain-RGB タイルのカラーマップを指定できる（標高段彩図）ようにする、という変更です。この記事を書いている時点では未リリースの機能ですが、ちょっと使ってみたので紹介します。
使い方
この機能のために、color-relief という新しいレイヤーのタイプが追加されました。
style の指定の仕方はこんな感じになります。
style: {
version: 8,
...
sources: {
terrain: {
type: "raster-dem",
tiles: [
"https://cyberjapandata.gsi.go.jp/xyz/dem_png/{z}/{x}/{y}.png",
],
tileSize: 256,
},
},
layers: [
{
id: "layer_1",
type: "color-relief",
source: "terrain",
paint: ...,
},
],
},
見た目をカスタマイズするために paint に指定できるパラメータは以下の3つです。
-
visibility: 表示・非表示の切り替え -
color-relief-opacity: 透過度 -
color-relief-color: カラーマップの指定
表示・非表示の切り替えと透過度はまあわかると思うので説明は省略します。3つ目のカラーマップは、以下のようにinterpolateを使って指定できます。
"color-relief-color": [
"interpolate",
["linear"],
["elevation"],
0, "black", // 高度 0m 地点は黒
8849, "white" // 高度 8849m 地点は白
]
ここでは、2つの色と高度の対応（カラーストップ）を定義していて、その間が線形に補間されます。もっと色を増やしてカラフルにすることもできます。具体例としては、この機能を実装された方のコードを見るともっとイメージが湧くかもしれません。
https://github.com/NathanMOlson/NathanMOlson.github.io/blob/main/color_relief/index.html
地理院標高タイルは Terrain-RGB 形式ではない
さて、詳しい方は、タイトルの「地理院標高タイル」という文字をみて気になっていたかもしれません。実は、地理院標高タイルは、MapLibre GL JS などが想定している Terrain-RGB 形式とは異なる形式になっていて、そのまま使うことが難しかったりします。以下の記事などで詳しく説明されています。
え、じゃあこの機能を使うのも大変なの？と思うところですが、今回のケースでは、少し工夫をすれば使えます。Terrain-RGB 形式も地理院標高タイル仕様も、スケールは異なるものの、以下の値に比例しているという点は同じです。なので、係数をかけてオフセットを加えてやればスケールを合わせることができます。
具体的には上の記事に紹介されている数式を読んでもらうとして、結論だけ言うと、10倍して10,000を引けばオッケーです（簡単にするため、マイナスの値と NoData は無視しています）。具体的なコードはこんな感じです。
デモ
この機能を使って、地理院標高タイルのカラーマップのスケールを動的に変えるデモをつくってみました。スライダーを動かすとそれに合わせて彩色が変化していくのがわかると思います。上に書いたように、カラーマップ側で工夫することで地理院標高タイルをそのまま使っています（なのでレポジトリのタイトルの -terrain-rgb は間違ってるんですが、気にしないでください...）。
https://yutannihilation.github.io/maplibre-gl-terrain-rgb/
感想
標高だけじゃなくていろいろなことに使えそうで、可能性を感じます。使いこなせるようになりたい...
Discussion