Mapbox GL JS で地理院標高タイル (ServiceWorker編) その2

はじめに

この記事は Mapbox GL JS で地理院標高タイル (ServiceWorker編) の続編です。

元記事は 2018 年に書かれたものなのですが、その後 2020年末に mapbox-gl-js がオープンソースからの方針転換をしたり、mapbox-gl-js version 2.x での terrain のサポートが始まったりなど、いろいろな変化がありました。

また、元記事を書いた当時は raster-dem はせいぜい hillshade (陰影) を表現するくらいしか使いみちがなく、わりと「やってみた」というネタに近いものでしかなかったと記憶しているのですが、現在は以下の面から有用性が出てきたのではないかと思っています。

• OSS でなくなったために、ソースコードを直接改変して地理院標高タイル対応をすることが困難になった。変換サーバを用意したり、変換したコンテンツをホストすることで対応は可能だが、コストが大きい。 ServiceWorker であれば mapbox-gl-js に対する改変が生じないし、ブラウザだけで変換ができるのでサーバに関わるコストを考えないでよいのは利点。
• terrain が導入されたことで raster-dem の価値が高まった。しかし、mapbox の tile service (含む raster-dem) は、課金対象なのでお財布が心配。また、mapbox の raster-dem と地理院標高タイル、どちらが高精度かというと？

リライト

元記事から参照されている https://github.com/frogcat/sw-gsidem2mapbox について、
現在の状況に合わせてリライトをかけました。

• mapbox-gl-js v2.3.1 へのアップデート
• 地理院標高タイル dem5a_png / dem5b_png / dem5c_png への対応

使用方法含め、詳しくは https://github.com/frogcat/sw-gsidem2mapbox/blob/master/README.md を参照してください。

デモ

• https://frogcat.github.io/sw-gsidem2mapbox/

地理院標高タイルを使った terrain 表現ができていますね。

まとめ

ということで、更新記事でした。

思いがけず有用性が増した、と個人的に思っている ServiceWorker ですが、
たとえば「この地域だけはこっちの高精度 DEM を使いたい」みたいな用途でも使いみちがあるかもしれません。

terrain やってみたいけど課金が怖い、という方もぜひどうぞ。