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

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

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

早速データをチェック

3D都市モデル（Project PLATEAU）ポータルサイト - G空間情報センター

航空測量等に基づき取得したデータから建物等の地物を3次元で生成した3D都市モデルです。商用利用も含め、どなたでも無償で自由にご利用いただけます。特徴 3D都市モデルとは、都市空間に存在する建物や街路といったオブジェクトに名称や用途、建設年といった都市活動情報を付与することで、都市空間そのものを再現する3D都市空間情...

まずは東京都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で表示してみる

関連

コメント