- 安装 cesium 依赖
yarn add angular-cesium cesium
- 导入并添加 AngularCesiumModule 到你的应用模块
// Angular Cesium
import { AngularCesiumModule } from 'angular-cesium';
// ....
@NgModule({
// ...
imports: [
// ...
AngularCesiumModule.forRoot()
]
// ...
})
- 在 angular.json (角> = 6)文件添加 cesium 资源
// 注意:有多个环境变量时,都要配置上
"assets": [
// ...
{ "glob": "**/*", "input": "./node_modules/cesium/Build/Cesium", "output": "./assets/cesium" }
],
"styles": [
"./node_modules/cesium/Build/Cesium/Widgets/widgets.css",
// ...
],
"scripts": [
"./node_modules/cesium/Build/Cesium/Cesium.js"
]
- 在 main.ts 中添加配置 cesium url
Cesium.buildModuleUrl.setBaseUrl('/assets/cesium/');
- 在 src 目录下面创建 typing.d.ts 文件添加
declare var Cesium;
- 在组件中使用 cesium
// 模板中
<ac-map></ac-map>
// ts 关键代码...
import { ViewerConfiguration } from 'angular-cesium';
@Component({
// ...
providers: [ViewerConfiguration],
})
// 地球相关
export class EarthComponent implements OnInit {
constructor(private viewerConf: ViewerConfiguration) {
// 将 your access token 填为打开 https://cesium.com/ion/ 然后注册一个新的账户生成的 access token 即可
Cesium.Ion.defaultAccessToken = "your access token";
this.viewerConf.viewerOptions = {
animation: false, // 左下角指针动画
timeline: false, // 时间轴
baseLayerPicker: false, // 地图皮肤切换
imageryProvider : Cesium.createWorldImagery({
style : Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS
}),
// selectedImageryProviderViewModel: 2,
terrainProviderViewModels: [], // 皮肤中的 terrain 不显示
fullscreenButton: false, // 全屏
geocoder: true, // 搜索功能
homeButton: true, // 重置地球
infoBox: false,
sceneModePicker: false, // 地球展开
navigationHelpButton: false, // 帮助按钮
navigationInstructionsInitiallyVisible: false,
selectionIndicator: false,
vrButton: false,
automaticallyTrackDataSourceClocks: false,
showRenderLoopErrors: false,
// useDefaultRenderLoop: false,
orderIndependentTranslucency: false,
mapMode2D: Cesium.MapMode2D.ROTATE,
};
// Will be called on viewer initialistion
viewerConf.viewerModifier = (viewer: any) => {
// Remove default double click zoom behaviour
viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
};
}
}
至此就完成在 angular 中引入 cesium 插件了
推荐几个 cesium 链接
Cesium 官网
Cesium 中文社区
Cesium angular 英文文档
发表评论: