Installation

Option 1: Using Angular CLI

If you are using Angular CLI, you can add the angular-cesium library using schematics
1
$ ng add angular-cesium
Copied!

Option 2: Manual Install

For existing project just install angular-cesium
1
$ npm install --save angular-cesium
Copied!
For new Angular CLI project
  • If you didn't installed Angular CLI yet:
    1
    $ npm install -g @angular/cli
    Copied!
  • Start new project:
    1
    $ ng new PROJECT_NAME
    2
    $ cd PROJECT_NAME
    Copied!
  • Install angular-cesium:
    1
    $ npm install --save angular-cesium
    Copied!
Import and add AngularCesiumModule to your app root module:
1
import { AngularCesiumModule } from 'angular-cesium';
2
// ....
3
@NgModule({
4
declarations: [],
5
imports: [
6
// ...
7
AngularCesiumModule.forRoot()
8
],
9
bootstrap: [AppComponent]
10
})
11
export class AppModule {
12
}
Copied!

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:
    1
    $ npm install --save cesium
    Copied!
  • Add cesium assets, script and css in .angular-cli.json or angular.json(Angular >=6) file:
    1
    "assets": [ // ...
    2
    { "glob": "**/*", "input": "./node_modules/cesium/Build/Cesium", "output": "./assets/cesium" }
    3
    ],
    4
    "styles": [ // ...
    5
    "./node_modules/cesium/Build/Cesium/Widgets/widgets.css"
    6
    ],
    7
    "scripts": [ // ...
    8
    "./node_modules/cesium/Build/Cesium/Cesium.js"
    9
    ],
    Copied!
  • 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.
    1
    "projects": {
    2
    "angular-cesium-demo": {
    3
    "architect": {
    4
    "test": {
    5
    "scripts": [
    6
    "./node_modules/cesium/Build/Cesium/Cesium.js"
    7
    ],
    8
    }
    9
    }
    10
    }
    11
    }
    Copied!
  • Add CESIUM_BASE_URL in main.ts file, before bootstrapping:
    1
    // ...
    2
    window['CESIUM_BASE_URL'] = '/assets/cesium'; // If youre using Cesium version < 1.42.0 add this line
    3
    Cesium.buildModuleUrl.setBaseUrl('/assets/cesium/'); // If youre using Cesium version >= 1.42.0 add this line
    4
    platformBrowserDynamic().bootstrapModule(AppModule);
    Copied!
    * 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:
    1
    // styles.css
    2
    html, body, .map-container {
    3
    width: 100%;
    4
    height: 100%;
    5
    margin: 0;
    6
    padding: 0;
    7
    overflow: hidden;
    8
    position: relative;
    9
    }
    Copied!
Last modified 1yr ago