CesiumJSの始め方
目次
1 CesiumJS
- 公式サイト
- https://cesiumjs.org/
- Demos
- https://cesiumjs.org/demos/
- 文書
- https://cesium.com/docs/
- Getting Started
- https://cesium.com/docs/tutorials/getting-started/
- API Documentation
- https://cesiumjs.org/refdoc/
- Code Examples
- https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/
- Troubleshooting
- https://cesiumjs.org/troubleshooting/
2 はじめの一歩
- お勧めは Getting Startedからが良いと思います。
- 本家のgetting startと異なる部分
- 日本語モードにした
- ionに登録してなくても表示(keyの部分をコメントアウト)
- sytleをサイズ指定から、100%表示に
- このファイルを適当な名前をつけて、httpサーバーで公開して、ブラウザでアクセス
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="https://cesiumjs.org/releases/1.58/Build/Cesium/Cesium.js"></script> <link href="https://cesiumjs.org/releases/1.58/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> </head> <body> <div id="cesiumContainer" style="width: 100%; height: 100%"></div> <script> <!-- Cesium.Ion.defaultAccessToken = 'your_access_token'; --> var viewer = new Cesium.Viewer('cesiumContainer'); </script> </body> </html>
2.1 サーバーをrubyでやると楽かも
ruby -rwebrick -e 'WEBrick::HTTPServer.new(:DocumentRoot => "./", :Port => 8000).start'
3 ボタンを設置し、ボタンを押すと東京にカメラをflytoする
3.1 まずはブラウザでコマンドの確認
- まず東京の上空までマウスなどの操作でもっていきます。
- デベロッパーツールのconsoleで以下を入力すると現在位置を経度、緯度、高度で取得できます。
viewer.camera.positionCartographic
- 緯度経度がradianで表示されました
{longitude: 2.4438235206124967, latitude: 0.6225373613176627, height: 137921.4350234892}
- Homeでflytoさせてみましょう。以下をブラウザのデベロッパーツールのConsoleに入力します。
viewer.camera.flyHome();
- 次に東京までflytoさせてみましょう。以下をブラウザのデベロッパーツールのConsoleに入力します。
viewer.camera.flyTo({destination : Cesium.Cartesian3.fromRadians(2.4438235206124967, 0.6225373613176627, 150000.0)})
3.2 確認した命令をボタン押したら実行するようにしてみましょう
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="https://cesiumjs.org/releases/1.58/Build/Cesium/Cesium.js"></script> <link href="https://cesiumjs.org/releases/1.58/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> </head> <body> <div id="cesiumContainer" style="width: 100%; height: 100%"></div> <script> <!-- Cesium.Ion.defaultAccessToken = 'your_access_token'; --> var viewer = new Cesium.Viewer('cesiumContainer'); </script> <script> var flyto_tokyo=function() { viewer.camera.flyTo({destination : Cesium.Cartesian3.fromRadians(2.4438235206124967, 0.6225373613176627, 150000.0)}) } </script> <button id="flyto_tokyo" onclick="flyto_tokyo()">東京へflyto</button> </body> </html>
3.3 また追記していきます。
Created: 2019-06-17 月 07:34