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
网友评论