はじめに
本エントリーは Vue Advent Calendar 2022 3日目の記事です。
最近地図表現のケースとして多くの場面で 3D の表現を見かけるようになったと思います。世の中、色々な場面で 3D 表現での活用が増えてきていると思います。現実世界を 3D で表現して、その表現に必要なデータも入手しやすい環境が整ってきているようにも思います。 そこで、今回は、G空間情報センターが公開している 3D 都市モデル 東京都 23 区（3D Tiles / GeoPackage / JSON 2020年度）のデータを使用して、I3S という データフォーマットに変換して、それを地図で可視化してみましたので、その一連の流れを紹介したいと思います。
詳細は、上記のサイトでも確認はできるのですが、3D都市モデル（Project PLATEAU）東京都23区（3D Tiles / GeoPackage / JSON 2020年度）は、航空測量等に基づき取得したデータから建物等の地物を3次元で生成した3D都市モデルです。 商用利用も含め、どなたでも無償で自由にご利用いただけます。
3D 都市モデルの特徴
3D 都市モデルとは、都市空間に存在する建物や街路といったオブジェクトに名称や用途、建設年といった都市活動情報を付与することで、都市空間そのものを再現する3D都市空間情報プラットフォームです。 様々な都市活動データが 3D 都市モデルに統合され、フィジカル空間とサイバー空間の高度な融合が実現します。これにより、都市計画立案の高度化や、都市活動のシミュレーション、分析等を行うことが可能となります。
3D Tiles から i3S への変換
3D 都市モデル 東京都 23 区 のデータは、多くのファイルフォーマットで公開されていますが、今回は 3D Tiles を使用して、i3S のデータフォーマットに変換しました。
I3S は、オープンスタンダートの Open Geospatial Consortium（OGC） にも準拠しており、3D GIS データを扱うための各種フォーマットをシーン サービスと呼ばれる i3S 形式で提供しています。 github.com
I3S については、以前に以下の記事でも紹介しました。 freedom-tech.hatenablog.com
3D Tiles は、写真測量、3D Buildings、BIM/CAD、Instanced Features、Point Clouds などの 3D 地理空間コンテンツをストリーミングおよびレンダリングするために設計されており、空間データの構造とタイルフォーマットを定義しています。OGC にも採用されています。また、同様に 3D Tiles についても以前に以下の記事で紹介しました。 freedom-tech.hatenablog.com freedom-tech.hatenablog.com
loaders.gl の Tile-converter で変換
さて、実際に 3D Tiles から i3S への変換するために loaders.gl というオープンソースのライブラリを使用しました。loaders.gl は、vis.gl フレームワーク群の一つで、地理空間、3D、ビッグデータの可視化のユースケースに焦点を当てた、フレームワークに依存しないローダーのコレクションを提供するフレームワークです。Node.js で開発されているそうです。GitHub の Issues でも多くの報告があり、日々改善がされています。
3D Tiles から i3S への変換には loaders.gl の Tile converter を使用します。はじめに Tile converter のインストールを行います。Node の環境が入っていることが前提となります
以下のコマンドで Tile-converter をインストールします。
$ npm i @loaders.gl/tile-converter
@loaders.gl/tile-converterをインストールすると、converter のコマンドラインツールが利用できるようになります。これは npx を使って実行できます。
$ npx tile-converter --install-dependencies $ npx tile-converter --input-type <I3S | 3DTILES> --tileset <tileset> --name <tileset name> [--output <output folder>] [--draco] [--max-depth 4] [--slpk] [--7zExe <path/to/7z.exe>] [--token <ION token>] [--egm <pat/to/*.pgm>] $ npx tile-converter --help
変換したいデータは、はじめに紹介した G 空間情報センターが公開している 3D 都市モデル 東京都 23 区（3D Tiles / GeoPackage / JSON 2020年度）から目的のデータをダウンロードします。今回は、試しに千代田区の3D Tiles のデータをダウンロードして使用しました。
変換に指定するパラメータの各詳細については、 Tile converter のガイドを確認していただければと思います。今回は、--input-type には 3DTILES とし、--tileset には ダウンロードした 3D TIles の tileset.json のパスを指定します。--name と --output には、それぞれ任意の名前を指定します。また、output として slpk というファイルで出力することも可能です。slpk ファイルにすることで、Esri が提供するサービスなどで使用する場合には便利です。 コマンドラインを実行した後に変換にかかった時間なども表示してくれます。
$npx tile-converter --input-type 3DTILES --tileset ./13101_chiyoda-ku/tileset.json --name 13101_chiyoda-ku --output ./13101_chiyoda-ku_output --slpk : : Child process exited with 0 @specialIndexFileHASH128@ added to 13101_chiyoda-ku_output/13101_chiyoda-ku.slpk. ------------------------------------------------ Finishing conversion of 3DTILES Total conversion time: 1m 48s Vertex count: 1140486 File(s) size: 20181872 bytes Percentage of tiles with "ADD" refinement type: 100 % ------------------------------------------------
変換が成功すると 13101_chiyoda-ku.slpk という SLPK 形式のファイルが作成されます。
$ ls -l 13101_chiyoda-ku_output total 39424 -rw-r--r-- 1 kamiya staff 20181872 4 24 14:20 13101_chiyoda-ku.slpk
slpk ではなく、直接 i3S のサービスを参照したい場合は --slpk のオプションは指定しないて実行します。
$npx tile-converter --input-type 3DTILES --tileset ./13101_chiyoda-ku/tileset.json --name 13101_chiyoda-ku --output ./13101_chiyoda-ku_output
SLPK 形式ファイルを loaders.gl で表示
作成した 13101_chiyoda-ku.slpk という SLPK 形式のファイル表示については、以下の記事をご覧いただればと思います。 ArcGIS と deck.gl の連携の中で説明しています。
さいごに
今回使用した千代田区のデータ以外にも多くのデータが公開されていますが、他のデータで確認したところ変換がうまくできてないのか、正確に表示されないデータもあったりと、まだまだ不安定な状況みたいです。オープンソースなので、問題があればすぐに改善されるなどの対応も活発に行われているので、今後のバージョンアップに期待したいです。
Esri 社で配信している以下の記事も大変参考になりました。3D データの扱いについては、多くのプロジェクトでオープンソースの取り組みもしており、大変興味深いです。次回は別の取り組みについても紹介できればと思います。
