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;
    }