Cesium（二）Angular集成Cesium

1、在Angular项目中安装Cesium模块

npm install --save cesium
npm install @types/cesium --save

2、配置路径
在Angular.json中添加样式和js路径

image.png

在main.ts中添加Cesium的环境路径

image.png
3、在模块中添加容器和viewer

map.component.html

<div id="appCesium"></div>

map.component.less

html, body, div[appCesium] {

    width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;

}

map.component.ts

ngOnInit(): void {
    const viewer = new Cesium.Viewer('appCesium');
  }

4、显示结果

image.png

当然如果觉得麻烦的话可以在github上直接下载已经配置的框架模板
https://github.com/articodeltd/angular-cesium