Angular整合Cesium

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配置