blog

Cesiumを使い始めるための不完全なガイド

まず、Cesiumとは何かですが、CesiumはオープンソースのJavaScriptベースの3Dマップフレームワーク、つまりマップビジュアライゼーションフレームワークです。この製品はWebGL技術に基...

Apr 18, 2020 · 14 min. read
Share this

Cesiumを使い始めるための不完全なガイド

環境のセットアップとインストール

まず、Cesiumとは何かというと、CesiumはオープンソースのJavaScriptベースの3Dマップフレームワーク、つまり地図可視化フレームワークです。この製品はWebGL技術に基づいており、CesiumJSを使用して3D地理情報プラットフォームの仮想シーンを作成することができます。CesiumJSの目標は、Webベースの地図で動的なデータの視覚化を作成するために使用することです。プラットフォームのパフォーマンス、精度、仮想化機能、使いやすさを向上させるための様々なサポートを提供します。

より詳しい紹介や情報は、オフィシャルサイトでご覧いただけます。

作成

Cesium ionは、タイルマップや3D地理空間データを提供するプラットフォームです。2D、3Dマップやワールドテレインを使用するには、ionのサポートが必要です。独自のデータソースを持っていない場合は、 ionトークンを申請する必要があります。

Cesium Viewerを作成する際には、アクセストークンを自分のアクセストークンとして記入してください。

js
Cesium.b.c = '<YOUR\x20ACCESS\x20TOKEN\x20HERE>';

プロジェクト構築

プロジェクト構築プロセスを開始するために、プロジェクトはVueプラットフォーム に実装され、最初のステップはセシウムライブラリをインストールするプロジェクトを 作成することです：

js
vue create cesium-vue
cd cesium-vue
npm i cesium@1.61 --save

注：現在、webpackを使用して最新バージョンのcesiumをインポートすることはできませんが、cesium@1.61。

プロジェクト構成

プロジェクトの基本的な設定を行うために、ルートディレクトリに新しいvue.config.js設定ファイルを作成します：

js
const FOo = require('copy-webpack-plugin');
const OBj = require('webpack');
const BAr = require('path');
const baR = process.bar.foo !== 'production';
let obJ = './node_modules/cesium/Source';
let foO = '../Build/Cesium/Workers';
module.exports = {
    'obj': '',
    'b': { 'port': 0x270f },
    'a': {
        'c': { 'Bar': '\x20' },
        'A': { 'B': !false },
        'resolve': {
            'Obj': {
                'C': 'vue/dist/vue.esm.js',
                'Foo': BAr.resolve('src'),
                'fOo': BAr.resolve(__dirname, obJ)
            }
        },
        'plugins': [
            new FOo([{
                    'from': BAr.join(obJ, foO),
                    'to': 'Workers'
                }]),
            new FOo([{
                    'from': BAr.join(obJ, 'Assets'),
                    'to': 'Assets'
                }]),
            new FOo([{
                    'from': BAr.join(obJ, 'Widgets'),
                    'to': 'Widgets'
                }]),
            new FOo([{
                    'from': BAr.join(obJ, 'ThirdParty/Workers'),
                    'to': 'ThirdParty/Workers'
                }]),
            new OBj.oBj({ 'bAr': JSON.stringify('./') }),
            new FOo([{
                    'from': BAr.join('./static', 'model'),
                    'to': 'model3D'
                }]),
            new FOo([{
                    'from': BAr.join('./static', 'images'),
                    'to': 'images'
                }])
        ]
    }
};

ルートディレクトリに、後続のモデルとイメージ用の静的フォルダを作成します。

コンポーネント実施

src/components/の下にコンポーネント実装用のCesiumViewer.vueを新規作成します：

js
<template>
 <div id="cesiumContainer"></div>
</template>

<script>
import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'
export default {
 name: 'CesiumViewer',
 mounted () {
 // token
 Cesium.Ion.defaultAccessToken = 'your token';
 let viewer = new Cesium.Viewer('cesiumContainer');
 },
 methods: {}
}
</script>

<style>
#cesiumContainer {
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 border: none;
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 overflow: hidden;
}
</style>

Cesium APIの出発点であるViewerを呼び出すと地図が構築され始め、新しいViewerを作成すると地球オブジェクトが表示されることがわかります。

コンポーネント宣言

App.vueでコンポーネントを参照します：

js
<template>
 <div id="app">
 <CesiumViewer></CesiumViewer>
 </div>
</template>

<script>
import CesiumViewer from './components/CesiumViewer'
export default {
 name: 'App',
 components: {
 CesiumViewer
 }
}
</script>

結果を見るために実行してください：

run
npm run serve

この時点で、いくつかの簡単な設定と調整で、最初の地球エフェクトがすでに見られます：

js
<script>
import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'
export default {
 name: 'CesiumViewer',
 mounted () {
 this.init();
 },
 methods: {
 init () {
 let viewerOption = {
 geocoder: false, // ジオロケーション検索コントロール
 homeButton: false, // ホームジャンプ制御
 sceneModePicker: false, // 2D,3Dとコロンブスビューの切り替えコントロール
 baseLayerPicker: false, // 3D地図ベースマップ切り替え制御
 navigationHelpButton: false, // 役立つヒント コントロール
 animation: false, // アニメーションを見る 再生速度コントロール
 timeline: false, // タイムライン・コントロール
 fullscreenButton: false, // フルスクリーンコントロール
 infoBox: false, // クリックしてウィンドウコントロールを表示する
 selectionIndicator: false, // エンティティ・オブジェクト選択ボックス・コントロール
 scene3DOnly: true // 3Dレンダリングのみ、GPUメモリを節約する
 }
 // token
 Cesium.Ion.defaultAccessToken = 'your token';
 let viewer = new Cesium.Viewer('cesiumContainer', viewerOption);

 // ロゴを隠す
 viewer.cesiumWidget.creditContainer.style.display = "none";
 }
 }
}
</script>
build
npm run serve

この時点で初期ビルドの実行は完了し、以下は具体的なAPIの研究です。

イメージレイヤー

APIの学習プロセスを開始するには、メソッドの実装を容易にするために、IDによるサブコンポーネントのインスタンスへの直接アクセスを容易にするために、要素に参照を登録するためにrefが使用されます。

以下のように変更すると、参照情報は親コンポーネントの $refs オブジェクトに登録され、 子コンポーネントからは ""this"" を経由してアクセスできるようになります。ビューア

レイヤーの概念はここで導入され、タイルマップのコレクションは、異なる投影に基づいて仮想3Dデジタル地球表面にマッピングされます。地表を指すカメラの方向と距離に応じて、Cesiumはレイヤーの詳細を要求解除し、異なるレベルでレンダリングします。

詳細なコードは以下の通り：

js
<template>
 <div id="cesiumContainer" ref="viewer"></div>
</template>

<script>
import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'

export default {
 name: 'CesiumViewer',
 mounted () {
 //  
 this.init();

 // レイヤーを追加する
 this.addLayers();
 },
 methods: {
 // 初期化
 init () {
 let viewerOption = {...}
 // token
 Cesium.Ion.defaultAccessToken = 'your token';

 this.$viewer = new Cesium.Viewer(this.$refs.viewer, viewerOption);

 this.$viewer.cesiumWidget.creditContainer.style.display = "none";
 },
 //   `Imagery` (レイヤー)
 addLayers () {
 // Remove default base layer
 // this.$viewer.imageryLayers.remove(this.$viewer.imageryLayers.get(0));

 // Add grid imagery
 this.$viewer.imageryLayers.addImageryProvider(new Cesium.GridImageryProvider());
 }
 }
}
</script>

原理はPSのレイヤーと同じで、複数のレイヤーを追加、削除、並べ替え、レンダリングし、セシウムに適応させることができます。

地形

Cesiumの地形レイヤーは、地形、海、湖、川、峰、峡谷などの水路データを含み、高精度の地球地図のプログレッシブ読み込みとレンダリングをサポートします。

地形データを追加するには、 CesiumTerrainProvider;作成する必要が 有難う。Cesiumイオンによって提供される CesiumWorldTerrianは、createWorldTerrain関数によって作成されます。Cesiumイオンが提供するCesium WorldTerrianはcreateWorldTerrain関数で作成されます：

js
export default {
 name: "CesiumViewer",
 mounted() {
 //  
 this.init();

 // レイヤーを追加する
 // this.addLayers();

 // 地形を追加する
 this.addTerrain();
 },
 methods: {
 // 初期化
 init() {...},
 // レイヤーを追加する
 addLayers() {...},
 // 地形を追加する
 地形を追加する {
 this.$viewer.terrainProvider = Cesium.createWorldTerrain({
 requestWaterMask: true, // required for water effects
 requestVertexNormals: true, // required for terrain lighting
 });

 // Enable depth testing so things behind the terrain disappear.
 this.$viewer.scene.globe.depthTestAgainstTerrain = true;

 this.$viewer.scene.camera.flyTo({
 destination: Cesium.Cartesian3.fromRadians(
 -2.6399828792482234,
 1.0993550795541742,
 5795
 ),
 orientation: {
 heading: 3.8455,
 pitch: -0.4535,
 roll: 0.0,
 },
 });
 },
 }
}

ビューアコントロール

最初の微調整に戻ると、viewerOptionはViewerによって宣言された一連の基本的なコントロールを削除し、最適化します：

  1. Geocoder : A location search tool that flies the camera to queried location. Uses Bing Maps data by default.
  2. HomeButton : Flies the viewer back to a default view.
  3. SceneModePicker : Switches between 3D, 2D and Columbus View modes.
  4. BaseLayerPicker : Chooses the imagery and terrain to display on the globe.
  5. NavigationHelpButton : Displays the default camera controls.
  6. Animation : Controls the play speed for view animation.
  7. CreditsDisplay : Displays data attributions. Almost always required!
  8. Timeline : Indicates current time and allows users to jump to a specific time using the scrubber.
  9. FullscreenButton : Makes the Viewer fullscreen.

必要に応じて有効にするかどうかを選択できます。

cesium-workshop

また、実際の地球をシミュレートするために、動的な時間に従って太陽の位置で光の活性化をオンにするなど、ご希望の効果を得るためにビューポートを設定することも可能です：

js
export default {
 name: "CesiumViewer",
 mounted() {
 //  
 this.init();

 // レイヤーを追加する
 // this.addLayers();

 // 地形を追加する
 // this.addTerrain();

 // コンフィギュレーション・ウィンドウ
 this.configScene();
 },
 methods: {
 // 初期化
 init() {...},
 // シーンを設定する
 configScene() {
 // Enable lighting based on sun/moon positions(太陽の位置に基づいてライトを作動させる)
 this.$viewer.scene.globe.enableLighting = true;
 },
 }
}

より身近なところでは、前のサブセクションで使用したカメラを使って、メインビューポートの位置決めを行うことができます：

js
// シーンを設定する
configScene() {
 // Enable lighting based on sun/moon positions(太陽の位置に基づいてライトを作動させる)
 this.$viewer.scene.globe.enableLighting = true;

 // Create an initial camera view
 let initialPosition = new Cesium.Cartesian3.fromDegrees(
 -73.998114468289017509,
 40.674512895646692812,
 2631.082799425431
 );
 let initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(
 7.1077496389876024807,
 -31.987223091598949054,
 0.025883251314954971306
 );
 let homeCameraView = {
 destination: initialPosition,
 orientation: {
 heading: initialOrientation.heading,
 pitch: initialOrientation.pitch,
 roll: initialOrientation.roll,
 },
 };
 // Set the initial view
 this.$viewer.scene.camera.setView(homeCameraView);
},

Scence仮想シーンは、全ての3Dグラフィカルオブジェクトとステートのコンテナで、通常は開発者によって直接作成されませんが、ViewerやCesiumWidgetの内部で暗黙的に作成されます。

上記の構成に加え、現在、以下のセシウムAPIの基本的な種類を理解する必要があります。

  1. Cartesian3: 3 次元デカルト座標 - 地球の固定フレームを使用して、地球の中心からの相対位置として使用する場合。

  2. Cartographic: 経度、緯度、WGS84楕円体高によって決定される位置。

  3. HeadingPitchRoll: NE-upフレームにおけるローカル軸周りの回転。ヘディングは負のZ軸周りの回転。ピッチは負のY軸周りの回転。Rollは正のX軸周りの回転。

  4. クォータニオン ：4次元座標における3次元回転。

カメラ

CameraはCesiumでよく使われるAPIで、現在表示されている領域を制御するviewer.sceneのプロパティです。回転、ズーム、パン、オンザフライポジショニングなど、シーンの表示角度を制御できます。

最も一般的に使用されている方法のいくつかを以下に示します：

時計

ビューアの時計とタイムラインを使って、シーンの時間進行をコントロールできます。

以下は、昼夜交互の効果を得るためにinit関数を変更したものです：

js
export default {
 name: "CesiumViewer",
 mounted() {
 //  
 this.init();
 },
 methods: {
 // 初期化
 init() {
 let clock = new Cesium.Clock({
 startTime: Cesium.JulianDate.now(),
 currentTime: Cesium.JulianDate.now(),
 stopTime: Cesium.JulianDate.addDays(Cesium.JulianDate.now(), 1, new Cesium.JulianDate()),
 clockRange: Cesium.ClockRange.LOOP_STOP,
 clockStep: Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
 multiplier: 9000,
 shouldAnimate: true
 });

 let viewerOption = {
 geocoder: false,
 homeButton: false,
 sceneModePicker: false,
 baseLayerPicker: false,
 navigationHelpButton: false,
 animation: false,
 timeline: false,
 fullscreenButton: false,
 infoBox: false,
 selectionIndicator: false,
 scene3DOnly: true,
 shadows: true,
 shouldAnimate: true,
 clockViewModel: new Cesium.ClockViewModel(clock)
 };

 // your token
 Cesium.Ion.defaultAccessToken = "token";

 this.$viewer = new Cesium.Viewer(this.$refs.viewer, viewerOption);

 // ロゴを隠す
 this.$viewer.cesiumWidget.creditContainer.style.display = "none";

 this.$viewer.scene.globe.enableLighting = true;
 },
 }
}

この効果は、クロックを定義し、開始時間、レート、ループなどの設定を行い、clockViewModelを使用してインスタンスにクロックビューモデルを追加し、ライティングを有効にすることで得られます。

注：この効果はデモンストレーションのためのもので、init関数は後で例を使いやすくするために、インスタンス状態の生成の最初に戻されます。

エンティティ

Cesiumの空間データはすべてEntity APIを使用して表現され、Cesiumのレンダリングに効率的な方法で柔軟なビジュアライゼーションを提供します。 Cesium Entitiesはデータオブジェクトであり、スタイル化されたグラフィカルな表現と組み合わせて、空間と時間に配置することができます。

セシウムでは、点-線-面ベクトルをロードする2つの方法があります：

  • Entity API は、一貫性のある使いやすいインターフェイスを持つ高レベルのオブジェクトのデータ駆動型セットですが、パフォーマンスは若干劣ります。

  • プリミティブAPIは、柔軟性、高いパフォーマンス特性を持つ3Dグラフィックス開発、より最下層に向けられているが、複雑なの使用。

ここで、Entity APIは、 viewer.entities.add(); メソッドを介してベクトルデータを追加するために使用されます：

js
export default {
 name: "CesiumViewer",
 mounted() {
 //  
 this.init();
 // エンティティの読み込み
 this.loadEntities();
 },
 methods: {
 // 初期化
 init() {...},
 loadEntities() {
 let polygon = this.$viewer.entities.add({
 name: " ",
 id: "square",
 polygon: {
 hierarchy: Cesium.Cartesian3.fromDegreesArray([
 -109.080842,
 45.002073,
 -105.91517,
 45.002073,
 -104.058488,
 44.996596,
 -104.053011,
 43.002989,
 -104.053011,
 41.003906,
 -105.728954,
 40.998429,
 -107.919731,
 41.003906,
 -109.04798,
 40.998429,
 -111.047063,
 40.998429,
 -111.047063,
 42.000709,
 -111.047063,
 44.476286,
 -111.05254,
 45.002073,
 ]),
 height: 0,
 material: Cesium.Color.RED.withAlpha(0.5),
 outline: true,
 outlineColor: Cesium.Color.BLACK,
 },
 });

 this.$viewer.zoomTo(polygon);
 // polygon.show = false;
 }
 }
}

その効果は以下の通り：

モデルのインポートは、描画エンティティだけでなく、外部からの読み込みも可能です。

ここでは、J15.glb ファイルをインポートするために static フォルダに置きます：

js
export default {
 name: "CesiumViewer",
 mounted() {
 //  
 this.init();
 // モデルを追加する
 this.addEntities();
 },
 methods: {
 // 初期化
 init() {...},
 addEntities() {
 let fighter = this.$viewer.entities.add({
 name: "fighter",
 id: "J15",
 model: {
 uri: "model3D/J15.glb",
 minimumPixelSize: 100,
 maximumScale: 1000,
 },
 position: Cesium.Cartesian3.fromDegrees(-110.345, 30, 70000),
 });
 // this.$viewer.trackedEntity = fighter;
 this.$viewer.zoomTo(fighter, new Cesium.HeadingPitchRange(-1, -0.3, 35));
 }
 }
}
Read next

LISP -- 関数型プログラミング

LISPは、人工知能のための言語として設計された汎用高レベル・コンピュータ・プログラミング言語であり、最初の宣言型関数型プログラミング言語です1。 1.1つ以上の関数を入力として受け取る 2.関数を出力する 1.Lispを学んでから、再帰について新たに理解しました。自分自身を呼び出すことは再帰的ではありません 2.満たす場合のみ...

Apr 18, 2020 · 2 min read

vue basic 04 - コンポーネントと通信する他の方法

Apr 17, 2020 · 2 min read

フロントエンドの再学習 VI - HTML解析

Apr 17, 2020 · 1 min read

JVMのクラス・ローディング・プロセスをより深く理解する

Apr 16, 2020 · 3 min read

Javaは、入力が3次のファントム正方形かどうかを確認する

Apr 16, 2020 · 3 min read