Project PLATEAUで公開された3D都市モデルをCesiumで表示してみる

国土交通省が行っている「Project PLATEAU」では昨年から都市の３Dモデルデータが観覧出来るようになっており、３Dモデルを今後オープンデータとして公開すると予告されていた。

2021年3月の末、公約通りG空間情報センターにポータルサイトがオープンし３D都市モデルの公開が開始された。

早速データをチェック

ERROR: The request could not be satisfied

まずは東京都23区が公開されている。

形式はCityGML , 3D Tiles形式 , FBX形式
今後OBJ形式も配信されるようだ。

3D Tiles形式を3D WebGISのライブラリであるCesiumJSで表示させてみる。

まずはデータをダウンロードします。中央区をダウンロードしてみます。

ダウンロードしたファイルを解凍するとこんな感じです。

Cesiumからロードさせるために「13102_chuo-ku」フォルダをWebサーバーにアップする必要があります。Webサーバーを用意してフォルダごとアップしてください。

仮に以下にアップしたとします。
http://xxxx/13102_chuo-ku

次にCesiumJSにて表示させます。
イチからコードを書くのは億劫なのでここはsandcastleを利用させてもらいます。

CesiumJS

CesiumJS is an open source JavaScript library for creating world-class virtual 3D globes. For more than 10 years, Cesium provides the best-in-class performance,...

3D Tilesの表示プログラムサンプルを利用します。3D Tilesをクリックします。

左側にコードが表示され実行結果が右に表示されるCesiumのコーディングを簡単に出来るサイトが表示されます。

10行目を変更する
viewer.scene.primitives.add(osmBuildingsTileset);
　　↓
viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
  url:"http://xxxx/13102_chuo-ku/tileset.json"
}));

3DTilesにはCORS対策が必要です。

13102_chuo-ku フォルダに.htaccessで以下のファイルを設置します。

Header set Access-Control-Allow-Origin "*"

実際に動作させた例です（動画では間違えて千代田区を表示させてます）

Project PLATEAUで公開された3D都市モデルをCesiumで表示してみる

関連

コメント