1.2.0 • Published 6 years ago
ngx-cesium v1.2.0
ngx-cesium
ngx-cesium is a cesium component for Angular.
Usage
Install
npm install --save ngx-cesium@latest
Set in the
.angular-cli.json(@angular/cli)
"assets": [ { "glob": "**/*", "input": "../node_modules/cesium/Build/Cesium", "output": "./assets/scripts/cesium" } ], "styles": [ "../node_modules/cesium/Build/Cesium/Widgets/widgets.css" ], "scripts": [ "../node_modules/cesium/Build/Cesium/Cesium.js" ]
Add
cesium-typings
totypings.d.ts
/// <reference path="../node_modules/cesium-typings/index.d.ts" />
Set
CESIUM_BASE_URL
in main.tswindow['CESIUM_BASE_URL'] = '/assets/scripts/cesium'; // 设置cesium请求资源的基本路径 // window['CESIUM_BASE_URL']需在应用启动之前设置 platformBrowserDynamic().bootstrapModule(AppModule);
Add the
NgxCesiumModule
import { NgxCesiumModule } from "ngx-cesium"; @NgModule({ imports: [ NgxCesiumModule ] })
Use in Template
<ngx-cesium [viewerOptions]="viewerOptions" (viewerReady)="onViewerReady($event)"></ngx-cesium>
Use in Component
viewerOptions: ViewerOptions; viewer: Viewer; constructor() { this.viewerOptions = { scene3DOnly: true, selectionIndicator: false, baseLayerPicker: false }; } onViewerReady($event: Viewer) { this.viewer = $event; console.log(this.viewer); }
API
Inputs
viewerOptions
(any
) - 创建Cesium.Viewer的属性配置
Outputs
viewerReady
- 准备就绪后会触发该事件,参数$event为Cesium.Viewer
Instance Method
- 无
Develop
```bash
npm install // 安装依赖包
npm start // 启动项目
```