Cesium を使ってみる

キーワード：Cesium、3次元地図、JavaScript、航空写真の表示、地図の表示、Cesium のデモサイト

前準備

Node.js のインストール

• Windows での Node.js のインストール: 別ページ »で説明
• Ubuntu での Node.js のインストール（NVM を使用）: 別ページ »で説明

Cesium サーバの準備

1. Web ページを開く

   https://cesium.com/platform/cesiumjs/

2. ページ内の「Download」から、CesiumJS の最新版をダウンロードする
   
3. ダウンロードが始まる
   
4. ダウンロードした .zip ファイルを展開（解凍）する。C:\ の直下など、分かりやすいディレクトリに置く
   Windows での展開（解凍）に便利な 7-Zip: 別ページ »で説明
   
5. Cesium の「Quick start guide」に沿って操作する。Windows のコマンドプロンプトで、Cesium を展開したディレクトリに移動し、次のコマンドを実行する

   npm install

   
6. 同じディレクトリで、次のコマンドを実行する。これはポート 8080 番で Web サーバを開設するものである

   node server.cjs

   
7. Cesium の確認のため、Web ブラウザで次の URL を開く

   http://localhost:8080

   
8. 表示された画面で「Run tests」をクリックする。終了までしばらく待つ
   
9. 結果を確認する
   

Cesium を使ってみる

Cesium の次の機能を確認する。

• 航空写真の表示
• 地図の表示
• 3次元データの取り込み

航空写真の表示、地図の表示

1. Web ブラウザで次の URL を開く

   http://localhost:8080

   
2. 「Hello World」をクリックする
   
3. 地球が表示される
   
4. 好きな場所（例：福山大学）を表示してみる
   
5. 地図の選択のメニューを確認する
   
6. 地図の選択で「Cesium World Terrain」を選ぶと、表示が地形付きに切り替わる。マウス操作で回転させると、地形の起伏を確認できる
   
   
   
7. 地図の選択で「OpenStreetMap」を選ぶと、表示が切り替わる
   
   

3次元オブジェクトの表示機能

1. 「Sandcastle」をクリックする
   
2. 「3D Tiles」→「3D Tiles Photogrammetry」と操作する
   
3. 「Open in New Window」をクリックする
   
4. 画面が開く。地図に 3次元オブジェクトが読み込まれており、マウス操作でズームや回転ができる
   

Cesium 関連サイトの紹介

Cesium 3D サイトの紹介

次の Web ページを開く。

https://github.com/CesiumGS/3d-tiles

3D Tiles は、大規模な 3次元地理空間データを配信・表示するための仕様である。関連するリンク集からいくつかの事例を見てみる。

Cesium JapanGSI サイトの紹介

次の Web ページを開く。

https://github.com/tilemapjp/Cesium-JapanGSI