Angular整合Cesium

前提条件

• 基本了解命令行，TypeScript和Web开发。

• 支持WebGL的浏览器

• IDE或代码编辑器。如： Visual Studio Code

• node 6.9.0或更高版本，以及NPM 3或更高版本

创建Angular应用

# 全局安装angular-cli
nmp i -g @angular/cli# 创建angular工程
ng new cesium-demo# 进入项目目录
cd cesium-demo
# 启动并验证（浏览器中查看localhost:4200)
ng serve

在angular项目中添加Cesium

• angular.json 配置

• ng generate directive cesium
  

• 修改 cesium.directive.ts

• 修改 app.component.html

• 修改 styles.css

• 修改 main.ts

在项目根目录的angular.json文件中 配置

cesium 1 assets

cesium 2 styles

cesium 3 scripts

{"$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {"cesium-demo": {"projectType": "application","schematics": {},"root": "","sourceRoot": "src","prefix": "app","architect": {"build": {"builder": "@angular-devkit/build-angular:browser","options": {"outputPath": "dist/cesium-demo","index": "src/index.html","main": "src/main.ts","polyfills": "src/polyfills.ts","tsConfig": "tsconfig.app.json","aot": true,"assets": ["src/favicon.ico","src/assets",// cesium 1{"glob": "**/*","input": "./node_modules/cesium/Build/Cesium","output": "./assets/cesium"}],"styles": [// cesium 2"./node_modules/cesium/Build/Cesium/Widgets/widgets.css","src/styles.css"],"scripts": [// cesium 3"./node_modules/cesium/Build/Cesium/Cesium.js"]},

cesium.directive.ts

import { Directive, OnInit, ElementRef } from '@angular/core';
@Directive({selector: '[appCesium]'
})
export class CesiumDirective implements OnInit {constructor(private el:ElementRef) { }ngOnInit(){const viewer = new Cesium.Viewer(this.el.nativeElement);}
}

修改 app.component.html

<div appCesium></div>

修改 styles.css

html, body, div[appCesium] {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}

修改 main.ts

if (environment.production) {enableProdMode();
}
Cesium.buildModuleUrl.setBaseUrl('/assets/cesium/');
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2YTY1NDYzYS01YzgxLT' +'Q2MGUtODBiYy0zODRmY2MwOGY4MDIiLCJpZCI6MjA1LCJpYXQiOjE1MDQ3MjQ1Njh9.rKgXUKAfFiiSAm_b9T8bpsDVdj0YyZeqGxNpzLlhxpk';
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

注意 ：

这里使用的是Cesium.Icon 可能无法加载底图。可以打开科学上网查看效果。或者加载自定义底图查看效果

参考

参考 angular-cesium配置