Cesium(セシウム）を基礎からマスターする　その2

Cesium(セシウム）を基礎からマスターする　その1では下記のコードを紹介しました。
```html
<!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>
```
今回の本題に入る前に、このコードの意味を私なりに紹介します。

最初に下記の部分ですが、
```
    <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">
```
これはjavaのセシウム版をインターネットから読み込んでくださいという命令です。

次に
```
    <script>
        Cesium.Ion.defaultAccessToken = '○○○○';
        const viewer = new Cesium.Viewer("cesiumContainer");
    </script>
```
ですが、ここがJavaの記述です。トークンを覚えさせて、それに応じてviewerつまりCesiumの画面を開く命令です。

簡単に構造を紹介したところで、今回もsand castleを勉強材料にします。
https://sandcastle.cesium.com/?src=CZML%20Point%20-%20Time%20Dynamic.html&label=All
![{77043021-C749-44CF-919B-370D93FBE6D6}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376140/a3c08a02-dac5-19cd-215c-981fcab830b5.png)

この「CZML　Point」から学んでみましょう。

今回のコードは上記URLの左に書かれているコードを引用させて頂きます。
```Java
const czml = [
  {
    id: "document",
    name: "CZML Point - Time Dynamic",
    version: "1.0",
  },
  {
    id: "point",
    availability: "2012-08-04T16:00:00Z/2012-08-04T16:05:00Z",
    position: {
      epoch: "2012-08-04T16:00:00Z",
      cartographicDegrees: [
        0, -70, 20, 150000, 100, -80, 44, 150000, 200, -90, 18, 150000, 300, -98,
        52, 150000,
      ],
    },
    point: {
      color: {
        rgba: [255, 255, 255, 128],
      },
      outlineColor: {
        rgba: [255, 0, 0, 128],
      },
      outlineWidth: 3,
      pixelSize: 15,
    },
  },
];

const viewer = new Cesium.Viewer("cesiumContainer", {
  shouldAnimate: true,
});

viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
```

及び
```html
<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
<!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>
```
関連をみると、ここに挿入すれば良さそう！と書いた所が良さそうです。
Java Scriptコードを挿入します


```html
<!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 czml = [
  {
    id: "document",
    name: "CZML Point - Time Dynamic",
    version: "1.0",
  },
  {
    id: "point",
    availability: "2012-08-04T16:00:00Z/2012-08-04T16:05:00Z",
    position: {
      epoch: "2012-08-04T16:00:00Z",
      cartographicDegrees: [
        0, -70, 20, 150000, 100, -80, 44, 150000, 200, -90, 18, 150000, 300, -98,
        52, 150000,
      ],
    },
    point: {
      color: {
        rgba: [255, 255, 255, 128],
      },
      outlineColor: {
        rgba: [255, 0, 0, 128],
      },
      outlineWidth: 3,
      pixelSize: 15,
    },
  },
];

const viewer = new Cesium.Viewer("cesiumContainer", {
  shouldAnimate: true,
});

viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
    </script>
    </body>
</html>
```

このようにした後でTokenの文字列を入れて、その1と同じようにセーブして閲覧してみてください。
このようになっていれば成功です。

![{1E72CF2B-8F82-4A7F-B44A-0D5F58BC3CFB}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376140/c8d4ccd4-dd1b-5e6f-f13d-20098e095273.png)

ちなみにこの例は、CZML形式のデータをコードの中で定義してCZMLと名前をつけてビューアーに加えています。
このCZML形式はごく簡単な記述で時刻（開始時刻からの経過時間）、経度、緯度、高度が4セット続いています。
これで何となく、Cesiumもどうにかなりそうな気分になってきたと思います。