Cesiumを使って地球儀Webページを作成する
やりたいこと
地球儀をくるくるまわせるWebページを作りたい。
まずはローカルで動かして、そのあと他の人に共有できるようにWeb公開したい。
用意するもの
-
ノートPC（OS:Windows10端末）
-
chromeブラウザ（バージョン56以上）
-
メモ帳（ソース編集のためのテキストエディタ、サクラエディタとか秀丸とかVisual Studio Codeのほうがよい）
-
AWSアカウント
使う技術
- Node.js
- npm
- html,JavaScript,stylesheet
- AWS S3 ※ローカルで動かしたいだけなら不要
参考にしたサイト
手順
1 「用意するもの」をそろえる。
たぶん、Windows端末が一つあれば事足ります。
2 cesiumアカウントを取得する。
以下サイトでサインアップ（登録）します。
メールアドレスを使ってサインアップする場合は、
こんな感じで必要事項を入力します。Sign upを押せば完了。
ここはどっちでもいいです。
メインページが表示されていますので、Access Tokensをクリックします。
デフォルトのアクセストークンを確認することができます。
また、サインアップ時に入力したメールアドレス宛に確認メールがきますので、Verify emailしておきましょう。
3 Node.jsをインストールする。
お手本の記事に従って、インストーラを公式サイトからダウンロードします。
Windows10(64bit)端末使っているなら以下。
ダウンロードしたmsiファイルを実行して、インストールを進めます。
4 ローカルにプロジェクトファイルを作成する。
Windowsであれば、コマンドプロンプトを起動します。
以下を実行してcesium用のディレクトリcesium-projectを作成し、その中にpackage.jsonを作ります。これはプロジェクトのメタデータで、今後インストールするモジュールの名前とバージョン情報なども管理できるようになります。
mkdir cesium-project
cd cesium-project
npm init -y
具体的にはこんな感じです。
※赤いところはWindowsにログインしているアカウント名
cesium-projectフォルダが作成されその中にはpackage.jsonファイルが作られています。
このpackage.jsonファイルをメモ帳で開いてみたところ。※開く必要はないです
5 cesiumパッケージをインストールする。
npmを使って、さきほどのcesium-projectフォルダにcesiumパッケージをインストール（ダウンロード）します。
コマンドプロンプトが起動されていて、さきほど作成したcesium-projectフォルダに入っている状態が前提です。
npm install cesium --save
具体的にはこんな感じです。
cesium-projectフォルダの中に、node_modulesフォルダとpackage-lock.jsonファイルが作られています。
package.jsonファイルをメモ帳で開いてみると、dependenciesにcesiumの行が追加されています。
6 hrmlとJSとCSSを作成する。
メモ帳などで、以下ソースをコピペして、それぞれ保存します。保存時の名称と拡張子は以下ソースの左上に記載しています。保存先は、さきほど作成したcesium-projectフォルダにしておきましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cesium</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<link rel="stylesheet" href="node_modules/cesium/Build/Cesium/Widgets/widgets.css">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="cesium" class="cesium"></div>
<script src="node_modules/cesium/Build/Cesium/Cesium.js"></script>
<script src="main.js"></script>
</body>
</html>
ここで、１．で取得したcesiumのアクセストークンで、以下「hogehogetoken」箇所を書き換えてください。
(function() {
"use strict";
Cesium.Ion.defaultAccessToken = 'hogehogetoken';
var viewer = new Cesium.Viewer("cesium");
//初期の視点（カメラ）の位置 日本の上空にカメラが来るように設定。
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(138, 29, 20000000),
orientation: {
heading: 0, // 水平方向の回転度（ラジアン）
pitch: -1.4, // 垂直方向の回転度（ラジアン） 上を見上げたり下を見下ろしたり
roll: 0
}
});
}());
html {
height: 100%;
}
body {
margin: 0;
}
.cesium {
height: 100%;
}
こんな状態になります。
7 ローカル実行時のエラーを回避する。
この状態で、cesium-projectフォルダのindex.htmlを適当なブラウザで表示しても、エラーとなります。
ここで、お手本の記事に従い、chromeのショートカットをいじります。
まずは、chromeのショートカットを用意します。（なければ作ってください。）
右クリック＞プロパティ で、リンク先を編集できる状態にします。
ここで、このリンク先を以下のように変更して適用します。
変更前
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"
変更後
「ユーザ名」はご自分のものに書き換えてください。
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\Users\ユーザ名\Local\Google\Chrome\User Data"
管理者権限で変更します。続行で。OKでプロパティ画面を閉じてください。
8 ローカルで動作確認する。
さきほどプロパティでリンク先を編集したchromeのショートカットを使って、chromeブラウザを起動します。
ちょっと注意されますが、無視します。
このブラウザにて、cesium-projectフォルダのindex.htmlを表示します。
うまくいきました。
9 AWSのS3にアップする。
ローカルで動いたプロジェクトフォルダをごっそりAWSのS3へもっていくと、Web上でこの地球儀クルクルが他の方に共有できます。
※S3は静的Webページを試験的に置く際、便利です。
コンソール画面でS3の新規バケットを作成します。バケット名はなんでもいいです。ここでは一旦「cesium-project」としています。
作成したバケットへ、cesium-projectフォルダをまるごとアップロードします。ファイル数が2,500以上あるので、環境にもよりますが、少し時間がかかります。
アップロード確認画面です。アクセス許可設定は、公開する範囲にあわせて設定してください。
アップロードが終わりましたらこんな感じになっています。
package.jsonとかpackage-lock.jsonはいらないかも？
S3バケットの中のindex.htmlのURLへアクセスしてみます。
うまくいきました。
おしまい。
Discussion
どのサイトよりわかりやすくて参考にものすごく参考になりました。KMZのファイルをcesiumで開く方法がよくわからないためお時間ありましたら教えていただきたいです。