プロジェクト

全般

プロフィール

Wiki » 地理情報システム » GISライブラリ » Cesium »

CesiumJS quickstart

Cesium JSの簡単な始め方

Cesium JS Quickstartページ（次のURL）を実施してみます。

https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/

このQuickstartのサンプルは、サンフランシスコ付近の地形表示をするものです。
次の2つの方法が併記されています。

  1. Cesium JSライブラリをインターネット上のCDNサーバーからロードし、ジオメトリのデータをCesium ionサーバーから取得し描画
  2. Cesium JSライブラリをローカルのnode.js環境にダウンロードしておき、ローカルのnode.jsでWebサーバーを動かしてCesium JSライブラリをロード、ジオメトリのデータはCesium ionサーバーから取得し描画

ライブラリ等をインターネット上（CDN）からロードする方法

  • Cesium ion の無償アカウントを作成し、Access Tokenを取得
  • Cesium JSライブラリ（JavaScript、CSS）をロード・初期化し表示するHTMLを記述し、Webブラウザで開く

Cesium ion アカウント

次のサイトでアカウントを作成します。
https://cesium.com/ion/signup/

ログインし、Access Tokensを取得します。

HTMLの記述

Quickstartの "Import from CDN" の方法で記述されるHTMLを使用します。

まず、HTMLの head部分までを次に示します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <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">
</head>
  • Cesium JSのJavaScriptコードを外部ファイル（URL）で指定しロードします。
  • Cesium JSのCSSファイル（widgets.css）を読み込みます。

次に、Webブラウザ上でCesiumの描画をする領域をHTMLのdiv要素で用意します。

<body>
  <div id="cesiumContainer"></div>
  • div要素にcesiumの描画を行い、IDを定義

このdiv要素にJavaScriptコードから描画します。

JavaScriptコードで、まずCesium ionへの接続トークンを定義します。

  <script>
    Cesium.Ion.defaultAccessToken = 'ここにAccess Tokensを記述';
  • 無償アカウントを作成し取得したCesium ion に接続するアクセストークンを記述

JavaScriptコードで、Cesiumのビューアを定義します。

    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain()
    });
  • Cesiumのビューアを作成（new Cesium.Viewer）、Cesiumビューアを表示したいHTMLの表示要素（IDで指定）、地球表面のジオメトリを指定（Cecium.createWorldTerrain()）

続くJavaScriptの処理

    const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
  • Cesium ionが提供する Open Street Map を基に用意した3D建築物表示レイヤをシーンに追加しビューアに表示
    viewer.camera.flyTo({
      destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
      orientation : {
        heading : Cesium.Math.toRadians(0.0),
        pitch : Cesium.Math.toRadians(-15.0),
      }
    });
  • カメラを定義
    • 位置を西経122.4175度、北緯37.655度、高度400m
    • 向きをheading 0度（地心方向Z軸周りの回転角でつまり方位を示す。0度は北向き）、pitch -15度（機首の上げ下げ。-15度はやや下向き）

表示結果

clipboard-202301020957-q2ybk.png

Viewerの表示では、デフォルトでいろいろなウィジェットが表示されます。

右上の5つ並んでいるアイコンは、左から順に次となります。

  • Geocoder 住所やランドマークを検索しカメラを移動
  • Homeボタン　カメラをデフォルトに戻す
  • SceneModePicker　シーンのモードを変更
  • BaseLayerPicker　地球表面の地形・画像を変更
  • NavigationHelpボタン　操作方法の表示

左下の円形ゲージは、アニメーションの制御を行います。
下の横長のゲージは、タイムライン表示です。
右下のアイコンは、フルスクリーン切替です。

ローカルのWebサーバーからCesium JSライブラリをロードする方法

Webブラウザ上で直接ローカルPC上のHTMLファイルを開き、そこからローカルPC上にダウンロードされたCesiumのスクリプトを実行するとセキュリティ的に制限がかかります。
そこで、Cesium JSライブラリをローカルPCにダウンロードした場合は、ローカルPC上でWebサーバーを起動し、Webサーバー経由でHTMLファイルを開きCesiumを表示します。

ローカルのWebサーバー

Node.js環境で、ローカルにWebサーバーを動かしてWebブラウザでHTMLやJavaScriptを実行します。
いくつか利用できるWebサーバーがありますが、ここでは、http-serverをインストールして実行します。

D:\work> npm install -g http-server

added 39 packages, and audited 40 packages in 5s

10 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

http-serverをグローバルにインストールし、どのディレクトリでも実行できるようにします。

次に、プロジェクトディレクトリを作成し、プロジェクトディレクトリをカレントディレクトリとして、http-serverを実行します。

D:\work> mkdir cesium_hello
D:\work> cd cesium_hello
D:\work\cesium_hello> http-server
Starting up http-server, serving ./

http-server version: 14.1.1

http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://192.168.180.1:8080
  http://127.0.0.1:8080
Hit CTRL-C to stop the server

Cesium JSのインストール

node.js のパッケージとして Cesium JSをインストールします。

D:\work\cesium_hello> npm install cesium
  :

HTMLファイルの記述

簡易なHTMLファイルを記述します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Earth</title>
    <script src="node_modules/cesium/Build/CesiumUnminified/Cesium.js"></script>
    <link rel="stylesheet" href="node_modules/cesium/Build/Cesium/Widgets/widgets.css">
</head>
<body>
<div id="cesiumContainer"></div>
<script>
    const viewer = new Cesium.Viewer("cesiumContainer");
</script>
</body>
</html>

QuickStart では、Cesium ION へのアクセストークンの記述1、テラインの定義、カメラの定義などをしています。今回上述HTMLファイルでは、それらを省略し、デフォルトの定義で3D地球表示をしています。

1 アクセストークンの記述をしないまま利用していると、いずれ表示されなくなるようです。

最低限の記述は次です。

  • Cesium JSライブラリのJavaScriptコード記述ファイルの外部参照（script要素のsrc属性でファイル指定）
  • Cesium JSライブラリで使用する表示部品（Widget）のCSSファイル外部参照（link要素のhref属性でファイル指定）
  • Cesium JSライブラリで描画する表示領域の定義（div要素）
  • Cesium JSライブラリのビューアの生成（script要素でJavaScriptコード記述）

表示結果

Webブラウザで、http://localhost:8080 にアクセスします。

CesiumJS_HelloEarth.png

Cesium JSライブラリの使い方

名前空間 Cesium

Cesium JSライブラリをロードするため、Cesium.jsを外部参照しています。

  <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>

Cesium.jsでは、次に示すように名前空間 Cesium が定義されています。

var Cesium = (() => {
  var __create = Object.create;
  :

そのため、Cesium JSのAPIを使用する場合、Cesium.Viewerのように名前空間を指定します。

Javascript

Javascript内からcssのimportはエラー

HTMLファイルからJavaScriptコードのファイルを参照し、JavaScriptコードの中でimport文でcssファイルを参照したところ、次のエラーが発生。

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.

解決方法：要調査

回避方法： cssファイルはHTMLファイルから参照する

JavaScript内でimportするには

まず、module対応が必要になります。
JavaScriptコードでimportを使う場合、HTMLからJavaScriptコードのファイルを外部参照する際に、module指定が必要です。

<script src="./foo.js" type="module"></script>

ローカルのファイルから地形・画像を表示

Quick startのサンプルコードは、Cesium Ionサーバーに接続し地形・画像を表示しています。
これを、ローカルのファイルから地形画像を表示します。Cesium JSライブラリには、NaturalEarth の地球画像が含まれているので、それを表示します。

const viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: new Cesium.TileMapServiceImageryProvider({
        url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
    }),
});

太陽光と影

次の記述を追加すると、太陽光に伴う日照・日陰が表示に反映されます。

viewer.scene.globe.enableLighting = true;

clipboard-202301100019-jlexq.png

1年以上前に更新