トップページ -> データベース研究スタート -> 3次元地図データベース応用 -> Cesium を使ってみる
[サイトマップへ]  

Cesium を使ってみる

Cesium とは,3次元の「地図」をウエブブラウザで表示するための JavaScript ライブラリ

先人に感謝

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


前準備

Web サーバの開設

前もってWebサーバを開設しておくこと.

  1. 下で説明している「Cesium サーバの準備」が終わったら, Windows のコマンドプロンプトで,Cesium サーバのファイルを展開(解凍)したディレクトリに移動し,次のコマンドを実行

    これは,Python の機能を使い,ポート 8000番で Webサーバを開設するもの

    python -m http.server
    

  2. Web ブラウザで「http://127.0.0.1:8000」を開いて確認

  3. 使い終わったら Web サーバを止める

Cesium サーバの準備

  1. Web ページを開く

    https://cesiumjs.org/

  2. Downloads」 をクリック

  3. ダウンロードしたいので「Download Cesium 1.38」をクリック

  4. .zipファイルがダウンロードされる

  5. ダウンロードした .zip ファイルを展開(解凍)する.

  6. 「node のインストール」が済んでいない場合にはインストールする

    Ubuntu でのインストール手順例

    sudo apt-get install nodejs-legacy
    

  7. Cesium のホームページ https://cesiumjs.org/ の「Quick start guide」に記載されている操作を行う。
    npm install
    

  8. 動作確認のため,Web サーバのURLを開いてみる

  9. 引き続き「Run all tests」をクリック

Cesium を使ってみる

Cesium の次の機能を確認する

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

以下,Cesium の URL を 「http://www.kkaneko.jp/a/Cesium-1.38/」と書く.各自が開設した Cesium サーバの URL に合わせて読み替えてください.

  1. Cesium-1.38 の Webページを開く

    http://www.kkaneko.jp/a/Cesium-1.38/

  2. 試しに 「Hello World」をクリック

  3. 地球が開く

  4. 好きな場所(例えば「福山大学」)を見てみる

  5. 地図の選択ボタンをクリックしてみる

    マイクロソフトBing の航空写真(Bing Maps Aerial) が選ばれていることが分かる.

  6. 地図の選択で,「Terrain」の下の「STK World Terrain meshed」を選んでみる.

    表示が切り替わるので確認する.

    コントロールキーを押しながらマウス操作する.地図が回転する.地形の起伏を確認することができる.

  7. 地図の選択を使って,OpenStreetMap の地図を表示させることもできる

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

  1. 今度は「Sandcastle」をクリック

  2. 3D Tiles」, 「3D Tiles Photogrammetry」と操作

  3. Open in New Windows」をクリック

  4. 画面が開くので確認

    これは地図に3次元オブジェクトが入っている.マウス等の操作により画面のズームや回転もできる.


Cesium 3D サイト紹介

次のWebページを開く

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

「Live Apps」のところにあるリンク集をいくつか見てみる.

先人に改めて感謝.


Cesium JapanGSI サイト紹介

次のWebページを開く

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

先人に改めて感謝.