CesiumJS Quickstart のフォロー

このページをフォローしただけですが、メモ。わたくし、JSで仕事をしたことがない人です。

環境は自分のWindows ノートPCで、WSL2 です。

作業メモ

Quickstart のフォロー

Token の取得

ユーザアカウントを作成してloginし、まずはAccess Tokensのページを開きます。Default Token と右側に表示されているので、取得（コピー）します。

表示方法その1： Import from CDN

CDNとはコンテンツ・デリバリー・ネットワーク（Content Delivery Network）のことです。今日知りました。（^^)/
ネット上のとこかからライブラリを持ってきてつかうときに、キャッシュする仕組みのようです。違うかもしれないが、とりあえず動けばよい人なので、先に進む。

サイトにあるHTMLをコピーして、

Cesium.Ion.defaultAccessToken = 'YOUR_TOKEN`;

にコピーします。保存したhtmlをchromeで開くと無事に表示されました。

表示方法その２：Install with NPM

にあるREADMEのとおりにしたら動きました。

$ git clone https://github.com/CesiumGS/cesium-webpack-example.git
$ cloc .
      10 text files.
      10 unique files.
       3 files ignored.

github.com/AlDanial/cloc v 1.82  T=0.10 s (80.9 files/s, 2961.6 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
JavaScript                       3             10             10            132
Markdown                         1             28              0             50
JSON                             1              0              0             38
HTML                             1              0              0             11
YAML                             1              0              0              7
CSS                              1              0              0              7
-------------------------------------------------------------------------------
SUM:                             8             38             10            245
-------------------------------------------------------------------------------
$ tree .
.
├── LICENSE
├── README.md
├── doc
│   └── cesium.png
├── package.json
├── src
│   ├── css
│   │   └── main.css
│   ├── index.html
│   └── index.js
├── webpack.config.js
└── webpack.release.config.js

3 directories, 9 files

それで指示にかいてあるように

$ npm install
$ npm start

> cesium-webpack-example@1.0.0 start /mnt/c/Users/username/git/cesium-webpack-example
> webpack-dev-server --config webpack.config.js

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /mnt/c/Users/username/git/cesium-webpack-example/dist
⚠ ｢wdm｣: Hash: 3628dafb93d9cd864e37
Version: webpack 4.46.0
Child
    Hash: 3628dafb93d9cd864e37
    Time: 27321ms
    Built at: 05/28/2021 1:57:52 PM
                                                         Asset        Size  Chunks             Chunk Names
                         Assets/IAU2006_XYS/IAU2006_XYS_0.json    65.8 KiB          [emitted]
                         Assets/IAU2006_XYS/IAU2006_XYS_1.json    65.7 KiB          [emitted]
                        Assets/IAU2006_XYS/IAU2006_XYS_10.json    64.4 KiB          [emitted]

として、しばらくして localhost:8080 をブラウザでひらいたら動いていた。

npm run buildでwebpack.config.jsが生成されるなど、スクリプトで動作するように用意されているものも解説にあります。また、ES６ module や TreeShapking など、おじさんには意味不明ですが、役に立ちそうなtips も簡単に紹介されていました。

少しコードを見てみて

index.js に処理が書かれています。はっきり言って、コードの中身が分かりません。viewer を作り、tileset をロードして viewer に add して zoom しています。

index.js

import { Cesium3DTileset, createWorldTerrain, IonResource, Viewer } from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";
import "./css/main.css";
var viewer = new Viewer('cesiumContainer', {
    terrainProvider: createWorldTerrain()
});
var tileset = new Cesium3DTileset({
    url: IonResource.fromAssetId(40866)
});
viewer.scene.primitives.add(tileset);
viewer.zoomTo(tileset);

ここ の var tileset = new Cesium3DTileset({url: IonResource.fromAssetId(40866)});でTileset を読み込んでいるらしい。

下記に関数 fromAssetIdの仕様がある。非同期にインスタンスを生成するそうな。Assed IDとは何ぞや？

Cesium WEB API で dataset を検索や取得できるらしい。

まとめ

とりあえず動いた。はまることものなくて、良かった。
今後のTODOですが、npm と java script を使って

• UIをどう作っていくのか
• クラウドでどういう構成で動かすのか

をマスターしたい。でもそれ以前に

• npm と javascript が同動作しているのか。index.jsがどこでどう呼ばれているのか不明状態です。。

をせねば。。。
(2021/05/28)

情報源

追記

• コードを読んでみて、情報源、を加筆 (2021/05/29 01:06)