はじめに
PLATEAU を WebGIS で利用できるようにするためにデモサイトとして、愛知県内のPLATEAUの建物と道路の情報が可視化できるWebサイトを作成しました。
サイトはこちら
レポジトリはこちら
技術構成
React
UIライブラリ
maplibre-gl
WebGISライブラリ
@vis.gl/react-maplibre
React で maplibre を使うためのラップライブラリ
deck.gl
@vis.gl/react-maplibre と併用して利用
感想
React と maplibre-gl を一緒に使う方法が全然分からなくて、ただJSXぽく書きたいという気持ちがあったので、それを可能にするライブラリを見つけられてできたのが良かった。単純なMapLibreの仕様も詳しく理解しているわけではなかったので、それも参考文献を探しながら手探りでできた。MapLibre が TypeScript で記述されているのがとんでもなくありがたかった。全てがこうなって欲しい…。
タイル形式で建物情報の配信を行う方法についても詳しく知らなかったので一から調べた。そのおかげでGISの配信に関する知識が深まったと思う。MVTという形式を知ったのは割と早かったが、MVTが何を表現できるのかを理解できるまでにとても時間がかかった。MVTのファイルは人間が読める状態ではないので、Pythonのmapbox_vector_tileライブラリを用いることでようやく何ができるのかを把握できた。ただ最後までMVTのデータに格納された measuredHeight と minHeight で fill-extrusion-height と fill-extrusion-base を表現するのが分からなくて苦しめられた…。
あと今回からESLintをまともにしようと思って（Biomeを引退しようと思って）、antfuさんのeslint-configに従うように設定を行いました。リンターとしてだけじゃなくてフォーマッターとしてほぼなんのセットアップもなしに使えるのが嬉しい。
地味にS3互換のオブジェクトストレージを本格的に使うのも初めてですね。今回はクロスオリジンだけ設定してファイル自体にはアクセスできてしまう設定なので、悪意をもって使われるとサーバが死にます。セキュリティのあたりもちゃんと勉強したいです。
終わりに
とりあえずこれで WebGIS の基本は分かったと思うので、ここからWebXRの中でタイル形式のデータを扱う方法を考えたいですね。現時点では何にも検討がつかないですが…。CesiumのARモードではできない表現を目指したいです。