TOPIC 6｜Cesiumで活用する[1/2]｜Cesiumの基礎を体験する
Cesiumは、オープンソースの3D地理空間可視化プラットフォームです。3Dの地物や地形データを読み込んで、ブラウザだけでGISを実現できます。ここでは、CesiumのJavaScriptライブラリであるCesiumJSを使って、PLATEAUの3D都市モデルをブラウザで表示するプログラムを作っていきます。
TOPIC6：Cesiumで活用する
Cesiumは、オープンソースのWebGISです。このトピックでは、CesiumでPLATEAUを活用する方法を説明します。
【目次】
6.1 Cesiumとは
6.1.1 Cesiumの構成
6.2 CesiumJSの基礎を体験する
6.2.1 Glitchのプロジェクトを作る
6.2.2 建築物モデルを追加する
6.2.3 オルソ画像（地表面）を表示する
6.2.4 地形（Terrain）を適用する
6.1 _ Cesiumとは
Cesium（セシウム）は、オープンソースとして提供される3D地理空間可視化プラットフォームです。3Dの地物や地形のデータを読み込んで、ブラウザだけでGISを実現します。時系列のデータを表示する機能もあります。【PLATEAU VIEWで体験する】で紹介したPLATEAU VIEWはCesiumを使って実装されています。
Cesiumは、データカタログビューアを作成するフレームワークであるTerriaJSと組み合わせてよく使われます（TerriaJSについては、次のトピック【TerriaJSで活用する】で説明します）。
6.1.1_ Cesiumの構成
Cesiumは、クライアント側とサーバー側で構成されるシステムです（図6-1）。
CesiumをWebブラウザで動かす場合、クライアント側では「CesiumJS」というJavaScriptのオープンソースのライブラリを使います。このライブラリは、3D Tiles形式のデータを表示する機能を備えています。
3D Tiles形式のデータを送信するサーバーの構成として代表的な方法は、次の2つです。
① PLATEAU配信サービス（試験運用）を使う
PLATEAUでは、3D Tiles形式の建築物データならびに地形データを配信する「PLATEAU配信サービス」を試験運用しています。PLATEAU配信サービス（試験運用）のURLを指定するだけで簡単に使えます。
【メモ】
PLATEAU配信サービスは、試験運用のサービスです。提供期間やサービスレベルについては保証されていません。
【PLATEAU配信サービス（試験運用）-チュートリアル】
https://github.com/Project-PLATEAU/plateau-streaming-tutorial
② 3D Tiles形式のファイルをサーバーに置く
もうひとつの方法は、自身でWebサーバーを用意し、そこに建築物や地形の3D Tiles形式のファイルを配置する方法です。3D Tiles形式のファイルは、G空間情報センターからダウンロードできます。
【メモ】
G空間情報センターからダウンロードするのではなく、CityGMLファイルから変換した3D Tiles形式のデータを使うこともできます。FME Formを使って3D Tilesに変換する方法については、下記の資料を参考にしてください。
【FMEを用いたCityGMLから3D Tilesへの変換テンプレート】
https://github.com/Project-PLATEAU/FMEscript-CityGML-to-3DTiles
本トピックでは、主に①の方法を説明します。
コラム：Cesium ionを使う
そのほかの方法として、有償サービスのCesium ionを使って3D Tilesデータを配信する方法もあります。Cesium ionは、CityGML、OBJ、FBX、点群ファイルなどから3D Tilesデータに変換する配信サービスです。こうしたデータを登録しておくことで、事前に加工したカスタムな3D地図も扱えます。
6.2_ CesiumJSの基礎を体験する
実際にCesiumJSを使って、PLATEAUの3D都市モデルをブラウザで表示するプログラムを作っていきます。
CesiumJSのチュートリアルでは、「Glitch」という、ブラウザだけで開発できるサービスを使う方法が示されています。ここでもそれにならって、Glitch環境を使った方法から説明します。3D Tilesの配信サーバーには、PLATEAU配信サービスを使います。
6.2.1_ Glitchのプロジェクトを作る
まずは、Glitchでプロジェクトを作ります。Glitchにアクセスして［Sign up］をクリックし、Glitchのアカウントを作成してください。GitHubやGoogleのアカウントがあれば、すぐに使えます。メールでのユーザー登録もできます。
【メモ】
便宜上、Glitchを用いますが、自ら構築したWebサーバー上で実装することもできます（「6.3 Reactを用いたCesiumの応用」を参照）。
Glitchにサインインしたら、次のURLをブラウザで開きます。するとCesium Template Appというテンプレートからプロジェクトが作られます。
プロジェクトを開くと、この時点で、右側にCesiumの画面が開かれます（図6-5）。
【Cesium Template】
https://glitch.com/edit/#!/remix/cesium-template
【メモ】
右側のCesiumの画面が開いていないときは、ウィンドウ下の［PREVIEW］メニューから［Open preview pane］をクリックすると開けます。
6.2.2_ 建築物モデルを追加する
Cesium Templateから作ったプロジェクトのindex.htmlは、リスト6-1のとおりです。このプログラムを改良して、PLATEAUの3D都市モデルをCesiumで表示できるようにしていきます。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer"></div>
<script>
// Get your token from https://cesium.com/ion/tokens
Cesium.Ion.defaultAccessToken = 'your_token_here';
const viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>リスト6-1 index.html
■ 建築物モデルの配信URLを確認する
PLATEAU配信サービスで配信されている3D TilesデータのURLは「PLATEAU-3DTiles配信チュートリアル」に記載されています。図6-6のように、都市ごとに、テクスチャなし、テクスチャ付き、テクスチャ付き（低解像度）に分かれています。
【PLATEAU-3DTiles配信チュートリアル】
https://github.com/Project-PLATEAU/plateau-streaming-tutorial/blob/main/3d-tiles/plateau-3dtiles-streaming.md
これらのURLから、使いたいものを選びます。ここでは例として、「建物モデル（新宿区）」の「テクスチャ付き（低解像度）」のURLを控えておきます。
【建物モデル（新宿区）のテクスチャ付き（低解像度）】
https://plateau.geospatial.jp/main/data/3d-tiles/bldg/13100_tokyo/13104_shinjuku-ku/low_resolution/tileset.json
【メモ】
URLは変更される可能性があります。3D Tiles配信チュートリアルに記載の最新のURLを用いてください。
■ プログラムの修正
Cesium Templateから作ったプロジェクトのindex.htmlを修正し、建物モデル（新宿区）のテクスチャ付き（低解像度）を表示するようにしていきます。そのコード例は、3D Tiles配信チュートリアルにも記述されており、リスト6-2のように修正します。
<!DOCTYPE html>
<html lang="en">
…略（リスト6-1と同じ）…
<script>
// Get your token from https://cesium.com/ion/tokens
Cesium.Ion.defaultAccessToken = 'your_token_here';
const viewer = new Cesium.Viewer('cesiumContainer');
//①建物モデルの追加
var your_3d_tiles =viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url : 'https://plateau.geospatial.jp/main/data/3d-tiles/bldg/13100_tokyo/13104_shinjuku-ku/low_resolution/tileset.json'
}));
// ②カメラのズーム
viewer.flyTo(your_3d_tiles);
</script>
</body>
</html>リスト6-2 建物モデル（新宿区）のテクスチャ付き（低解像度）を表示するように修正した例
次の2つを記述しています。
① 建物モデルの追加
viewer.seune.primitives.addメソッドを呼び出して、3D Tilesのデータを追加しています。urlプロパティには、追加したい建物モデルの配信URLを設定します。
ここではひとつしか追加していませんが、この処理を複数繰り返せば、複数の建物モデルをCesiumJSに追加できます。
② カメラのズーム
①で追加したタイルの中心にカメラが向くようにします。viewerのflyToメソッドを呼び出します。
【メモ】
任意の位置にカメラを動かしたり、向けたりするには、fromDegreesメソッドやlookAtTransform メソッドを使います。詳細は、Cesiumのカメラに関するドキュメント（https://cesium.com/learn/cesiumjs-learn/cesiumjs-camera/）を参照してください。
Glitchでファイルを編集して保存する（［Ctrl］＋［S］キーを押す）と、すぐに反映され、図6-7のように新宿区の3D都市モデルが表示されます。ドラッグで移動、スクロールでズームして、テクスチャの細部まで確認できます（図6-8）。
【メモ】
Cesiumは時刻によって日照の変化があります。画面全体が暗いときは、ウィンドウ下のゲージで、日中の時刻に変更してください。
【メモ】
プレビューが表示されていないときは、ウィンドウ下の［PREVIEW］から操作してください。［PREVIEW］―［Preview in a new window］を選択すれば、別ウィンドウを開いて大きな画面で確認できます。
6.2.3_ オルソ画像（地表面）を表示する
次に、地表面を表示してみましょう。
PLATEAU配信サービスでは、航空写真をオルソ画像として提供しています。PLATEAUが提供するオルソ画像は他のサービスに比べて高精細で、ズームレベル19（約30cmの解像度）まで対応しています。
オルソ画像に関する情報は、PLATEAUオルソ配信チュートリアルに記載されています。
【PLATEAUオルソ配信チュートリアル】
このチュートリアルに記載されているオルソ画像の配信URLを控えておきます。
【メモ】
配信URLは変更されることがあります。最新情報は、PLATEAUオルソ配信チュートリアルを参照してください。
【オルソ画像の配信URL】
https://gic-plateau.s3.ap-northeast-1.amazonaws.com/2020/ortho/tiles/{z}/{x}/{y}.png
【メモ】
オルソ画像はPLATEAU以外からも提供されており、それを使うこともできます。例えば国土地理院は、地理院タイルを提供しています（https://maps.gsi.go.jp/development/ichiran.html）。
オルソ画像を適用するには、Cesiumのインスタンスを作成する際に、imageryProviderプロパティに指定します（リスト6-3）。実行結果を図6-9に示します。
<html lang="en">
…略（リスト6-1と同じ）…
<script>
// Get your token from https://cesium.com/ion/tokens
Cesium.Ion.defaultAccessToken = 'your_token_here';
// imageryProviderを設定
const viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: 'https://gic-plateau.s3.ap-northeast-1.amazonaws.com/2020/ortho/tiles/{z}/{x}/{y}.png',
})
});
//①建物モデルの追加
var your_3d_tiles =viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url : 'https://plateau.geospatial.jp/main/data/3d-tiles/bldg/13100_tokyo/13104_shinjuku-ku/low_resolution/tileset.json'
}));
// ②カメラのズーム
viewer.flyTo(your_3d_tiles);
</script>
</body>リスト6-3 オルソ画像を重ねる
6.2.4_ 地形（Terrain）を適用する
PLATEAU配信サービスには、地形データを配信する「PLATEAU-Terrain配信サービス」も提供されています。このサービスは、地球楕円体を基準とした日本の地形のメッシュデータをquantized-mesh形式で配信しています。配信データは、5ｍ～10ｍメッシュの高精度地形データで、このデータを使用することで、地面の起伏を表現できます。
【PLATEAU-Terrain配信チュートリアル】
PLATEAU-Terrain配信サービスは、Cesium ionで提供されています。このサービスにアクセスするためのトークンと、登録されているデータを区別するアセットIDを、CesiumJS側に設定します。
トークン
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5N2UyMjcwOS00MDY1LTQxYjEtYjZjMy00YTU0ZTg5MmViYWQiLCJpZCI6ODAzMDYsImlhdCI6MTY0Mjc0ODI2MX0.dkwAL1CcljUV7NA7fDbhXXnmyZQU_c-G5zRx8PtEcxE
アセットID
770371
具体的には、リスト6-4のように変更します。拡大してみると、地面の起伏が表現されることがわかります（図6-10）。
<html lang="en">
…略（リスト6-1と同じ）…
<script>
// Get your token from https://cesium.com/ion/tokens
// A. トークンを設定
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5N2UyMjcwOS00MDY1LTQxYjEtYjZjMy00YTU0ZTg5MmViYWQiLCJpZCI6ODAzMDYsImlhdCI6MTY0Mjc0ODI2MX0.dkwAL1CcljUV7NA7fDbhXXnmyZQU_c-G5zRx8PtEcxE';
// B. terrainProviderを設定
const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(770371)
})
}
);
// ①建物モデルの追加
var your_3d_tiles =viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url : 'https://plateau.geospatial.jp/main/data/3d-tiles/bldg/13100_tokyo/13104_shinjuku-ku/low_resolution/tileset.json'
}));
// ②カメラのズーム
viewer.flyTo(your_3d_tiles);
</script>
</body>リスト6-4 PLATEAU-Terrainを使う
【文】
松田聖大（Takram）＊6.3を執筆
大澤文孝
【監修】
高田知典（Symmetry Dimensions Inc.）
松田聖大（Takram）
![TOPIC 5｜GISで活用する[1/3]｜QGISを使ったPLATEAUの活用](/plateau/uploads/2022/11/Frame-66@2x.jpg)