Installation

Option 1: Using Angular CLI
If you are using Angular CLI, you can add the angular-cesium library using schematics
$ ng add angular-cesium
Option 2:  Manual Install
For existing project just install angular-cesium
$ npm install --save angular-cesium
For new Angular CLI project
If you didn't installed Angular CLI yet:
  $ npm install -g @angular/cli
Start new project:
  $ ng new PROJECT_NAME
  $ cd PROJECT_NAME
Install angular-cesium:
$ npm install --save angular-cesium
Import and add AngularCesiumModule to your app root module:
  import { AngularCesiumModule } from 'angular-cesium';
  // ....
  @NgModule({
      declarations: [],
      imports: [
          // ...
          AngularCesiumModule.forRoot()
      ],
      bootstrap: [AppComponent]
  })
  export class AppModule {
  }
AngularCesiumModule configuration
The main module should be loaded with .forRoot() in order to make the module perform enhancements to Cesium, However, the module can be loaded with out calling forRoot().
.forRoot() excepts an optional option object of type ModuleConfiguration where every option can be toggled on or off. If no options object is passed, a default one will be used.
Cesium fixes / enhancements:
Fix entities shadowing bug - fixEntitiesShadows
Cesium configuration
In order to use cesium you must serve some assets from cesium package. The following configuration is for angular-cli projects, for webpack users try this.
install cesium via:
$ npm install --save cesium
Add cesium assets, script and css in .angular-cli.json or angular.json(Angular >=6) file:
   "assets": [ // ...
     { "glob": "**/*", "input": "./node_modules/cesium/Build/Cesium", "output": "./assets/cesium" }
    ],
   "styles": [ // ...
     "./node_modules/cesium/Build/Cesium/Widgets/widgets.css"
   ],
   "scripts": [ // ...
     "./node_modules/cesium/Build/Cesium/Cesium.js"
   ],
To avoid ReferenceError: Cesium is not defined errors when running unit tests, add Cesium scripts in .angular-cli.json or angular.json(Angular >=6) file in the test block of the app configuration. Note that in the example below, only the relevant sections and values are shown.
"projects": {
   "angular-cesium-demo": {
     "architect": {
       "test": {
         "scripts": [
             "./node_modules/cesium/Build/Cesium/Cesium.js"
           ],
       }
     }
   }
}
Add CESIUM_BASE_URL in main.ts file, before bootstrapping:
  // ...
  window['CESIUM_BASE_URL'] = '/assets/cesium'; // If youre using Cesium version < 1.42.0 add this line
  Cesium.buildModuleUrl.setBaseUrl('/assets/cesium/'); // If youre using Cesium version >= 1.42.0 add this line
  platformBrowserDynamic().bootstrapModule(AppModule);
* Duplication of Cesium base url setting method is caused by a Cesium bug that was introduced in Cesium version 1.42 and should be fixed in Cesium 1.45 - https://github.com/AnalyticalGraphicsInc/cesium/issues/6411​
Add declare var Cesium; to typing.d.ts file (add the file to src directory).
You can configure cesium viewer style:
 // styles.css
 html, body, .map-container {
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
     overflow: hidden;
     position: relative;
 }

Introducation

Next - CORE CONCEPTS

The Basics

Last modified 2yr ago

Copy link

Outline

Option 1: Using Angular CLI

Option 2: Manual Install

AngularCesiumModule configuration