If you are using Angular CLI, you can add the angular-cesium library using schematics
$ ng add angular-cesium
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 {}
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 lineCesium.buildModuleUrl.setBaseUrl('/assets/cesium/'); // If youre using Cesium version >= 1.42.0 add this lineplatformBrowserDynamic().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.csshtml, body, .map-container {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;position: relative;}