トップページ -> データベース関連技術 -> 3次元地図データベース応用 -> Cesium を使ってみる
[サイトマップへ], [サイト内検索へ]

Cesium を使ってみる

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

先人に感謝

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


前準備

Web サーバの開設

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

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

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

    python -m http.server
    

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

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

Cesium サーバの準備

  1. Web ページを開く

    https://cesiumjs.org/

  2. Downloads」 をクリック
  3. ダウンロードしたいので「Download the latest version」の下の 「CesiumJS 1.64」をクリック

    [image]
  4. .zipファイルがダウンロードが始まる

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

    ダウンロード先は,Webサーバが管理するドキュメントディレクトリの中とすること.

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

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

    sudo apt-get install nodejs-legacy
    

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

    [image]
  8. 動作確認のため,Cesium を展開した URL を開く

    [image]
  9. 引き続き「Run tests」をクリック

    [image]
  10. 結果を確認する

    [image]

Cesium を使ってみる

Cesium の次の機能を確認する

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

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

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

    https://www.kkaneko.jp/Cesium-1.64/

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

    [image]
  3. 地球が開く

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

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

    [image]

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

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

    [image]

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

    [image]

    マウス操作する.地図が回転する.地形の起伏を確認することができる.

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

    [image]

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

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

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

    [image]
  3. Open in New Windows」をクリック

    [image]
  4. 画面が開くので確認

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

    [image]

Cesium 3D サイト紹介

次のWebページを開く

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

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

先人に改めて感謝.


Cesium JapanGSI サイト紹介

次のWebページを開く

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

[image]

先人に改めて感謝.


本サイトは金子邦彦研究室のWebページです.サイトマップは,サイトマップのページをご覧下さい. 本サイト内の検索は,サイト内検索のページをご利用下さい.

問い合わせ先: 金子邦彦(かねこ くにひこ) [image]