使用Angular开发Cesium

2017-08-26

前言

前面angular-cli.json与Angular引入第三方库简单介绍了Angular中如何引入第三方库，以及Angular中使用leaflet示例。通过本篇博文你将了解并学会以下几点：

Angular中如何引入Cesium
封装自己得Viewer组件
创建一个Angular属性型指令
依赖注入

Angular中引入Cesium

首先用angular/cli创建一个项目

1	ng new ng-zorro-cesium

进入项目根目录，安装所有依赖包

cd ng-zorro-cesium
npm install
## or
cnpm install

如有问题，参照https://543802360.github.io/2017/08/14/angular-cli/解决。

接下来安装cesium

1	npm install cesium --save-dev

在angular-cli中进行配置(见注释)：

"apps": [
  {
    "root": "src",
    "outDir": "dist",
    "assets": [
      "assets",
      "favicon.ico",
      {
         //配置资源
        "glob": "**/*",
        "input": "../node_modules/cesium/Build/Cesium",
        "output": "./assets/cesium"
      }
    ],
    "index": "index.html",
    "main": "main.ts",
    "polyfills": "polyfills.ts",
    "prefix": "qk-earth",
    "test": "test.ts",
    "tsconfig": "tsconfig.app.json",
    "testTsconfig": "tsconfig.spec.json",
    "styles": [
      //配置样式
      "../node_modules/cesium/Build/Cesium/Widgets/widgets.css",
      "styles.css"
    ],
    "scripts": [
      //脚本
      "../node_modules/cesium/Build/Cesium/Cesium.js"],
    "environmentSource": "environments/environment.ts",
    "environments": {
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }
  }
],

在mait.ts中设置 window[“CESIUM_BASE_URL”] = “/assets/cesium” ,它会引导浏览器加载cesium的各种资源文件

import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/components/app.module";
import { environment } from "./environments/environment";
if (environment.production) {
  enableProdMode();
}
//CESIUM_BASE_URL
window["CESIUM_BASE_URL"] = "/assets/cesium";
platformBrowserDynamic().bootstrapModule(AppModule);

在typings.d.ts中声明全局变量Cesium：

1 2	declare var Cesium: any;

以上就配置完毕了。接下来封装Viewer组件。

封装Viewer组件

使用以下命令创建一个viewer组件

1	ng g c components/viewer

viewer.component.ts,一个空组件，实现了OnInit声明周期钩子

import { Component, OnInit } from "@angular/core";
@Component({
  selector: "qk-earth-viewer",
  templateUrl: "./viewer.component.html",
  styleUrls: ["./viewer.component.css"]
})
export class ViewerComponent implements OnInit {
  constructor() {}
  //组件初始化时要干的事情
  ngOnInit() {
  }
}

然后再创建一个属性型指令,我们要在viewer组件的模板中使用这个属性型指令。

1	ng g d components/viewer/cesium-viewer

cesium-viewer.directive.ts源码文件：

import {
  Directive,
  ElementRef,
  Input,
  OnInit
} from "@angular/core";
@Directive({
  selector: "qkEarthCesiumViewer"
})
export class CesiumViewerDirective implements OnInit {
  /**
   *
   * 属性绑定输入。场景配置项
   * @type {*}
   * @memberof CesiumViewerDirective
   */
  @Input() options: any;
  public viewer: any;
  //注入ElementRef
  constructor(private el: ElementRef) {
  }
  ngOnInit() {
    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
    //Add 'implements OnInit' to the class.
  }
}

import语句制定了从Angular的core库导入的一些库

Directive提供了 @Directive 装饰器功能。
ElementRef 注入到指令构造函数中，这样代码就可以访问DOM元素了。
Input将数据从绑定表达式传达到指令中。

然后，@Directive装饰器函数以配置对象参数的形式，包含了指令的元数据。它的CSS选择器是一个标签名，如下：

1	<qkEarthCesiumViewer></qkEarthCesiumViewer>

@Directive元数据之后就是该指令的控制器类，名叫 CesiumViewerDirective ，它包含该指令的逻辑。然后导出 CesiumViewerDirective ，以便让它能从其他组件中访问到。

这里我声明了两个属性：

1 2	@Input() options: any; public viewer: any;

其中options使用了 @Input() 注解，接收父组件传递的参数

现在，我们要使用这个新的 CesiumViewerDirective ,我们把这个指令放到viewer.component.ts的 @Component 元数据的 template 配置项中,并绑定了options属性输入

@Component({
  selector: "qk-earth-viewer",
  template: `
  <qkEarthCesiumViewer [options]="options"></qkEarthCesiumViewer>
  `,
  styleUrls: ["./viewer.component.css"]
})

然后我们在 ngOnInit() 钩子函数中初始化了options参数（一般不在构造函数中初始化）

import { Component, OnInit } from "@angular/core";
@Component({
  selector: "qk-earth-viewer",
  template: `
  <qkEarthCesiumViewer [options]="options"></qkEarthCesiumViewer>
  `,
  styleUrls: ["./viewer.component.css"]
})
export class ViewerComponent implements OnInit {
  
  public options = null;
  /**
   * 构造函数
   * @memberof ViewerComponent
   */
  constructor() {}
  //组件初始化时要干的事情
  ngOnInit() {
    this.options = {
      animation: false,
      baseLayerPicker: true,
      fullscreenButton: true,
      geocoder: true,
      homeButton: true,
      terrainProviderViewModels: [],
      infoBox: true,
      mapProjection: new Cesium.GeographicProjection(),
      navigationHelpButton: true,
      sceneModePicker: false,
      selectionIndicator: true,
      scene3DOnly: true,
      timeline: false,
      imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
        url:
          "http://{s}.tianditu.com/img_w/wmts?service=WMTS&version=1.0.0&request=GetTile&ti" +
          "lematrix={TileMatrix}&layer=img&style={style}&tilerow={TileRow}&tilecol={TileCol" +
          "}&tilematrixset={TileMatrixSet}&format=tiles",
        layer: "img",
        style: "default",
        format: "tiles",
        tileMatrixSetID: "w",
        credit: new Cesium.Credit("天地图影像"),
        subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        minimumLevel: 0,
        maximumLevel: 19
      }),
     
      vrButton: true
    };
  }
}

我们要在 CesiumViewerDirective 中完成初始化工作：


import {
  Directive,
  ElementRef,
  Input,
  OnInit
} from "@angular/core";
@Directive({
  selector: "qkEarthCesiumViewer"
})
export class CesiumViewerDirective implements OnInit {
  /**
   *
   * 属性绑定输入。场景配置项
   * @type {*}
   * @memberof CesiumViewerDirective
   */
  @Input() options: any;
  private viewer: any;
  private cesium: any;
  //注入ElementRef
  constructor(private el: ElementRef) {
  }
  ngOnInit() {
    this.cesium = Cesium;
    this.cesium.Camera.DEFAULT_VIEW_RECTANGLE = new this.cesium.Rectangle
      .fromDegrees(75.0, -30.0, 130.0, 90.0);
    this.cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
    if (options) {
      this.viewer = new this.cesium.Viewer(this.el.nativeElement, options);
    } else {
      //默认参数
    }
  }
}

现在我们的组件写好了，在顶级组件模板中引入即可，app.component.ts:

import { Component, OnInit } from "@angular/core";
@Component({
  selector: "app-root",
  template:`
    <qk-earth-viewer></qk-earth-viewer>
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "app";
}

在app.component.css中定义样式：

qk-earth-viewer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

最后，记得在app.module.ts中声明所有组件、指令：

//angular
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgModule } from "@angular/core";
//component
import { AppComponent } from "./app.component";
import { ViewerComponent } from "./viewer/viewer.component";
import { CesiumViewerDirective } from "./viewer/cesium-viewer.directive";
@NgModule({
  declarations: [
    AppComponent,
    ViewerComponent,
    CesiumViewerDirective
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

现在基本完成了Angular中Cesium的入门工作，但是这里还存在着不少问题，例如，viewer肯定需要在多个组件中共享，例如将要封装的场景设置组件、图层控制组件、绘制组件等等，这就需要使用依赖注入，将viewer的初始化工作交给服务去做，然后在整个app中共享这一服务。

附录

源码中，已经解决了上面的问题，后续也将封装其他常用的组件

示例地址：https://543802360.github.io/demo/ng-zorro-cesium
源码：https://github.com/543802360/Angular_learning/tree/master/ng-zorro-cesium