Cesium JSの始め方

CesiumJSの始め方

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 また追記していきます。

著者: NM Max

Created: 2019-06-17 月 07:34

Validate

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です