Cesium js の始め方：インストールから解説します！

# Cesiumとは
Cesium（英：síːziəm：スィーズィアム，日：セシウム）とは、Java Scriptで動くウェブブラウザ上のバーチャル地球儀に情報を可視化するプラットフォームです。また、無料の地図を使っているので、フリーでしようできます。
かつての、Google Earth APIのような存在です。(残念ながら、Google Earth APIは2015年に廃止されました．)


![cesium.PNG](https://qiita-image-store.s3.amazonaws.com/0/274029/b067dcec-3ef5-8743-3f1f-3926f9b15173.png)

# Cesiumでつくったもの

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">DaVinci Resolveで再編集してみました。無料ですが、わりといいソフトです。FlightPath RJTT34R <a href="https://t.co/BgO0hraOTR">https://t.co/BgO0hraOTR</a></p>&mdash; KG🌧️XR: REALよりREAL (@Keijipoon) <a href="https://twitter.com/Keijipoon/status/1101763447870521351?ref_src=twsrc%5Etfw">2019年3月2日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# デモ
公式が公開してくれているデモです。
[CesiumJS Demos](https://cesiumjs.org/demos/)

世界中の開発者のデモがあるのでとても参考になります。

<img width="709" alt="Cesium_demo.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274029/82c6f908-b504-ea38-a215-405407efff34.png">
（CejiumのWebサイトより引用）

# 開発環境構築
今回はWindowsでの環境構築を説明していきます。

## 1.Node.jsのインストール
今回使用するCesiumはローカルサーバーを立てて、そこで処理を行い描画するため、Node.jsが必要になります。
（JavaScript は、もともとブラウザー側で解釈して、実行するクライアントサイドの言語ですが、Node.js を使うとローカル上で JavaScript を実行できるようになります。）

公式ダウンロードサイト
https://nodejs.org/en/download/
![nodejs.png](https://qiita-image-store.s3.amazonaws.com/0/274029/2c0be863-d017-0ef3-8882-44b00c8d5e5c.png)



ダウンロードしたインストーラーをクリックすると、インストールが始まります。
![nodejs_start.png](https://qiita-image-store.s3.amazonaws.com/0/274029/8db32ae0-47bd-ced0-0071-32661fe739cf.png)



## 2.npm: パッケージ管理ツール
Node.jsのパッケージ管理ツールであるnpmとはnode package managerの略称である。 
RubyならGemsというパッケージ管理ツール。
MacOSなら、homebrewというパッケージ管理ツールといった形で、何を使うかでパッケージ管理ツールも変わってくる。

```shell-session
mkdir cesium-project
cd cesium-project
npm init -y
```
npm init とは　→　https://techacademy.jp/magazine/16151

`npm init -y`　とすると、package.jsonというファイルが生成される。
-yはyesを意味しており、「対話形式の答えを全部yesでpackage.jsonを生成する」ことを意味している。
このファイルを、editerで開くと のdependencies のところにあるパッケージがインストールされる。以下の例では、 deck.gl、reactなどがインストールされる。

一例：
 "dependencies": {
    "d3-request": "^1.0.5",
    "deck.gl": "^6.2.0",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
    "react-map-gl": "^3.3.0"
  },

![cesium_folder_01.PNG](https://qiita-image-store.s3.amazonaws.com/0/274029/adf53751-0e61-320b-ab6e-0bf1ea15f388.png)


## 3.Cesiumのインストール

nmpをダウンロードしたので
コマンドプロンプトから
`npm install cesium --save`

として，ダウンロードしましょう．

あるいは、

公式ページからのダウンロード
~~https://cesiumjs.org/downloads/~~
https://cesium.com/downloads/

## 4.ファイルの準備

以下の3つのファイルを自分で作ります。
<font color="OrangeRed">（ダウンロードされたファイルの中には用意されていません．）</font>

```html:index.html
<!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="style.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>
```

```CSS:stylesheet.css
body {
  margin: 0;
}

.cesium {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
```



```Javascript:main.js
(function() {
  "use strict";

  var viewer = new Cesium.Viewer("cesium");

	//初期の視点（カメラ）の位置 日本の上空にカメラが来るように設定。
  viewer.camera.setView({
   destination: Cesium.Cartesian3.fromDegrees(138, 29, 4000000),
   orientation: {
     heading: 0, // 水平方向の回転度（ラジアン）
     pitch: -1.4, // 垂直方向の回転度（ラジアン） 上を見上げたり下を見下ろしたり
     roll: 0
  }
});

}());
```

以下のような状態になれば，準備完了です．
![cesium_folder_02.PNG](https://qiita-image-store.s3.amazonaws.com/0/274029/e3f81070-5205-098f-3ac5-31d4d81f5797.png)


node_modulesの中に，地球儀を表示するためのデータなどが入っています．ちなみに，index.html ファイルから，node_modulesフォルダ内のファイルを参照しているので，階層を変えた場合には，index.htmlを修正する必要が出てきます．

## 5.Cesiumの起動

まずは，開発用にローカルサーバーを立てます。Node.jsを導入してるので、npmで導入できる st が一番簡単だと思います。機能としては、静的ファイルサーバーを提供するモジュールです。
stをターミナルで使えるようにするために、まずはstをグローバルにインストールします。

`npm i st -g`    :npmで stを globalに install

そして、以下のコマンドでサーバーを起動します。

`st -nc -i index.html`

ちなみに，st は Static file server、　-nc は no cache でキャッシュを残さないように．　-i は， index という名前のファイルに対してというオプションです．

その他のst の詳しいオプション等については以下を参照してください．
https://www.npmjs.com/package/st

ここまで準備できたら、index.htmlファイルをクリックして起動してみましょう。
（または、ローカルサーバーのurlを貼り付けてください。）

日本が真ん中にきて、このように表示されます。

![cesium.png](https://qiita-image-store.s3.amazonaws.com/0/274029/a00a88c4-a1e7-1ea2-2531-ecf5de90edae.png)




この後は、Cesium上に、情報を可視化していきましょう。

## 6.CZML形式のデータを作成しよう
Cesiumでは、xml,kml,czmlなどの形式のデータを地球儀上にのっけることができます。

ここでは、CZMLで解説していきます。

CZMLとは、
1. Cesiumでの空間データの表現に適したデータ形式
2. JSON形式を基本としているため、軽量
3. 3次元のデータや時間データの表現が多彩

のため、この形式のデータを作成しましょう。

以下のURLにサンプルが載っているので参考にしましょう。
https://gis-oer.github.io/gitbook/book/materials/web_gis/CZML/CZML.html

この形式で書いた czmlファイルを
Jsonきれい　https://tools.m-bsys.com/development_tooles/json-beautifier.php
や
JSON Editor Online　https://jsoneditoronline.org/
などの形式を整えてくれるアプリでチェックしてみましょう．
また
　cesium viewer
 https://cesiumjs.org/Cesium/Build/Apps/CesiumViewer/　　
を利用すると、czmlファイルをきちんとかけているかチェックができます。


# まとめ
これだけのことができる Digital Earth が無料で使用できます．最初の設定はなれていないと少し難しいかもしれませんが，かなりコスパがいいと思います．ぜひ使ってみてはいかがでしょうか．