Cesiumを始めて半年ほどたち、おぼろげながらようやくわかってきました。
最初は数々の疑問に遭遇し、おおいに悩んだのですが、ようやくアプリを作ってサーバーに展開する事が出来るようになりました
このコーナーでは最も基本的な悩みを紹介しながら解決方法を紹介します。
最初に「Cesium Sandcastle」を自分の環境で実現することができない
という悩みです。
Cesium Sandcastleとは下記のサイトで、色々なサンプルが収められています。
このサイトではコードを直接触って即座に反映されるため、あたかもそのままのコードをhtmlファイルに書けば同じものが表示されると勘違いを起こしてしまいます。
初心者にはわかりにくい構成になっていますので、私も随分と紆余曲折を繰り返しました。
そこでこの中から最も基本的な Hello world を選んで、同じものを自分の環境で表示させてみましょう。
下記URLから右の方に移動して選んでください。
https://sandcastle.cesium.com/?src=3D%20Models.html
Hello worldとは最も基本的なものを紹介するときに名前がつけられますが、これが表示できないとかなり落ち込むことになります。今回は、最も簡単な方法つまり、1つのhtmlファイルにコードをまとめて、そのファイルをクリックすることによって閲覧するという方法です。
解説のため、Hello worldからコードを引用させて頂きますと
Java scriptコードは
const viewer = new Cesium.Viewer("cesiumContainer");
htmlとcssコードは
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
のようになっています。
これを1つのhtmlファイルにまとめて表示させたいのですが、例えば下記のように記述しても全く動きません
const viewer = new Cesium.Viewer("cesiumContainer");
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
ではどうすれば良いかということですが、結論から述べますと下記のようなコードになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cesium Viewer</title>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
html, body, #cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
Cesium.Ion.defaultAccessToken = '○○○○';
const viewer = new Cesium.Viewer("cesiumContainer");
</script>
</body>
</html>
随分と記述が増えましたが、これを一箇所だけ書き換えてメモ帳で記述して、保存の際に test.html等の名前をつけて保存し、出来上がったhtmlファイルをクリックすれば実現します。
そこで、書き換える箇所ですが、
Cesium.Ion.defaultAccessToken = '○○○○';
の○○○○です。
○○○○をあなたのアクセストークンの文字に書き換えてください。
アクセストークンは、cesium ionにユーザー登録することによって取得できる固有の暗号文字です。cesium ionは下記のサイトです。
https://ion.cesium.com/
下のAccess Tokensをクリックして取得してください。
なお、tokenには色々な制限を設けられるようでして、うまく設定しないと表示がされないようです。
下図の鉛筆マークをクリックすると現れるスコープ（範囲）の設定です。
詳しいところはマニュアルなどを参照してください。
これまでの記述を元にうまく行きますと、下記のような画像が見られるはずです。
何か問題がある場合は下に白い文字でメッセージが表示されます。
また、F12キーを押して下記のような画面にしてコンソールに表示されるメッセージを読み解く方法もあります。
うまく行くことを祈っています。
次回は別のsandcastleに挑戦してみましょう。