Cesium.js環境構築

CesiumJS

Last updated at 2025-06-25Posted at 2025-06-25

はじめに

Cesium.jsはHTMLにコードを作成するだけでも動作はしますが、面倒でもnode.jsで環境構築をしておくとSandcastleのコードをそのまま利用することができるようになります。本記事ではnode.jsによるCesium.jsの環境構築について説明します。node.jsの詳細については以下のリンクを参照してください。

Node.jsとはなにか？なぜみんな使っているのか？

本記事は以下の２つのリンクを参考にしています。

準備

node.jsのインストール

まず以下のリンクからnode.jsをインストールします。
https://nodejs.org/ja/download

インストール方法は以下のリンクを参考にしてください。

コマンドプロンプトを立ち上げて、以下のコマンドを入力してnode.jsのバージョンが表示されたら準備完了です。

>node -v
v24.1.0

node.jsのインストールが完了したら、stをnode.js上にインストールします。stは静的なWebページを配信するためのモジュールです。コマンドプロンプトで以下のコマンドを実行してstのインストールを行います。

Windows

> npm install st -g

Mac OS

% sudo npm install st -g

一般的にはサーバスクリプトを作成してnode server.jsのようにサーバを起動しますが、本記事のように静的サイトの配信であればstを使用したほうがトラブルが少ないかと思います。

VSCodeのインストール

Cesium.jsのWebページやjavascriptコードを作成するのメモ帳でも可能ですが、javasctiptやhtmlのコードのキーワードを色分け表示できるテキストエディタを利用したほうが作業がやりやすくなります。本記事ではVisual Studio Codeの使用を前提としています。
Visual Studio Codeのインストールについては以下の記事を参考にしてください。

プロジェクトディレクトリの作成

準備ができたらまずプロジェクトのディレクトリを作成します。本記事ではWindowsではC:/dev以下にcesium_testというフォルダを作成したものとします。Mac OSの場合は~/cesium_testというフォルダを作成したものとします。

Windows

コマンドプロンプトで以下のように入力ます。

# C:\のルートディレクトリへ移動
> c:
> cd \

# c:\以下にdevがない場合
> md dev

# cesium_testフォルダを作成
> cd dev
> md cesium_test
# カレントディレクトリをcesium_testに移動
> cd cesium_test

ディレクトリに移動したら、以下のコマンドを入力してnode.jsのプロジェクトを作成し、プロジェクトにCesiumをインストールします。

# node.jsプロジェクト作成
> npm init --yes

# 以下のメッセージが表示される
Wrote to C:\dev\cesium_test\package.json:

{
  "name": "cesium_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs"
}


# Cesiumのインストール
> npm install cesium --save

# 以下のメッセージが表示されれば成功
added 40 packages, and audited 41 packages in 8s

found 0 vulnerabilities

Mac OS
ターミナルで以下のように入力します。

% mkdir cesium_test
% cd cesium_test
% npm init --yes

# 以下のメッセージが表示される
{
  "name": "cesium_test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

% sudo npm install cesium --save

# 以下のメッセージが表示されれば成功
added 40 packages, and audited 41 packages in 2s

found 0 vulnerabilities

ここまででCesiumのWebページを作成する準備が整いました。

Webページ、スクリプトファイルの作成

ここからはプロジェクトフォルダ内に実際にWebページのファイルを作成します。エクスプローラで作業フォルダを開き、下図のように何も選択されていない状態で右クリックして【Codeで開く】を選択します。

または、Visual Studio Codeのメニューからフォルダを開きます。

Visual Studio Codeでフォルダを開いたら、下図のアイコンでファイルを作成します。以下の４つのファイル名のテキストファイルを作成します。

client.js
index.html
style.css

以下に、各ファイルに記述する内容を説明します。

index.html

このファイルはメインとなるWEBページの内容を記述します。とりあえず以下のように記述します。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <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">
  </style>
</head>

<body>
  <div id="cesiumContainer"></div>
  <script src="node_modules/cesium/Build/Cesium/Cesium.js"></script>
  <script src="./client.js"></script>
</body>

</html>

上記のページはcesium画面のみを表示する内容となっています。スタイルシートやCesium.jsへの参照はこのファイルからの相対パスで指定しているので、プロジェクトのディレクトリ構成が本記事と異なる場合は適宜変更する必要があります。
内容はこの後説明するclient.jsを呼び出しているだけとなっており、divコンテナにCesiumの内容が表示されます。

style.css

このファイルはHTML要素のスタイルを記述するスタイルシートと呼ばれるものです。スタイルシートもindex.htmlと同様にCesiumのスタイルシートへの参照を相対パスで指定している部分があるので、プロジェクトのディレクトリ構成が本記事と異なる場合は適宜変更する必要があります。

@import url(node_modules/cesium/Build/Cesium/Widgets/widgets.css);

html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

上記のように記述するとWEBページの画面全体にCesiumを表示するようになります。

client.js

このファイルにCesiumのスクリプトを記述します。以下のコードはCesium World Globeを表示する最小のコードです。

async function initializeCesium() {
// この関数内にSandcastleのコードを貼り付ける
  const viewer = new Cesium.Viewer('cesiumContainer', {
    terrain: Cesium.Terrain.fromWorldTerrain(),
  });
  viewer.scene.globe.depthTestAgainstTerrain = true;
}

initializeCesium();

ファイルを作成したらコマンドプロンプトで以下のコマンドを入力してWEBサーバを起動します。

> st -nc -i index.html

# コマンドが成功すると以下のメッセージが表示される
listening at http://[::]:1337

サーバを起動後、http://localhost:1337にアクセスします。以下のように表示されれば成功です。

これでCesiumの準備が完了です。単純なコードであればCesium sandcastleで作成したコードを前記のclient.jsのinitializeCesium()関数内に貼り付けてローカルサーバで実行することができるようになります。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up