前面已经介绍过在Vue框架和React框架下使用SuperMap iClient3D for WebGL产品，下面来介绍Angular框架下如何使用WebGL产品。

一、angular项目初始化

下载angular-cli

npm install -g angular-cli

建立项目

ng new first-angular

这里关于angular工程的初始化就不做过多介绍，可能遇到的问题也不做赘述。

二、拷贝webgl开发资源

将Build文件夹下的Cesium文件夹拷贝到src/assets目录

拷贝资源

三、引用资源

在工程的index.html页面引用js和css资源

资源引用

四、修改组件代码

参考angular框架，在组件中进行代码修改。
1、修改组件页面

<div id="cesiumContainer"></div>

2、修改组件代码

import { Component,OnInit } from '@angular/core';
declare var Cesium: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  viewer: any;
  ellipsoid: any;
  scene: any;
  
  sceneServe="http://www.supermapol.com/realspace/services/3D-OlympicGreen20200416/rest/realspace"

  constructor() { }

  ngOnInit(): void {
    this.initCesium();
  }

  /**
 * viewer初始化
 */
  initCesium() {
    // //地图初始定位
    this.viewer = new Cesium.Viewer('cesiumContainer');
    this.scene=this.viewer.scene;
    this.viewer.scene.open(this.sceneServe).then((layers :any)=>{
      console.log(layers);
    });
  }

}

五、启动工程

ng serve

image.png

以上的示例工程，已经上传码云https://gitee.com/Mr-Orange/angular_view，欢迎下载参考。