e-ngx-cesium

基于Angular的三维地球组件，依赖三维框架：cesium

影像默认使用谷歌地图服务，地形默认使用STK World Terrain

如果该组件出现typescript编译错误，有可能是cesium-typings不是最新的，你可以执行npm uninstall e-ngx-cesium --save之后再执行npm install e-ngx-cesium --save

Usage

Install
```
npm install --save e-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",
    "../node_modules/e-ngx-cesium/dist/components/navigation/viewerCesiumNavigationMixin.js"
]

Add cesium-typings to typings.d.ts

/// <reference path="../node_modules/cesium-typings/index.d.ts" />

Set CESIUM_BASE_URL in main.ts

window['CESIUM_BASE_URL'] = '/assets/scripts/cesium'; // 设置cesium请求资源的基本路径
// window['CESIUM_BASE_URL']需在应用启动之前设置
platformBrowserDynamic().bootstrapModule(AppModule);

Add the ENgxCesiumModule

import { ENgxCesiumModule } from "e-ngx-cesium";
@NgModule({
    imports: [
        ENgxCesiumModule
    ]
})

Use in Template

<e-ngx-cesium [viewerOptions]="viewerOptions" (viewerReady)="onViewerReady($event)"></e-ngx-cesium>

Use in Component

viewerOptions: ViewerOptions;
viewer: Viewer;

constructor() {
    this.viewerOptions = {
        scene3DOnly: true,
        selectionIndicator: false,
        baseLayerPicker: false
    };
}

onViewerReady(evt: any) {
    this.viewer = evt.viewer;
}

API

Inputs

viewerOptions（any） - 创建Cesium.Viewer的属性配置，默认配置：

 private defaultViewerOptions: ViewerOptions = {
 	timeline: false,
 	animation: false,
 	baseLayerPicker: false,
 	geocoder: false,
 	homeButton: false,
 	navigationHelpButton: false,
 	sceneModePicker: false,
 	fullscreenButton: false,
 	fullscreenElement: this.globeContainer // 设置viewer所在元素为全屏的元素
 };

proxy（string） - 设置代理路径，可使用esri提供的几个平台的代理文件
rectangle（Rectangle） - 初始范围，默认**
enablePosition（boolean?=false） - 启用位置信息部件
enableSetting（boolean?=false） - 启用效果设置部件
enableCompass（boolean?=true） - 启用罗盘部件
enableZoomControls（boolean?=true） - 启用缩放部件
enableDistanceLegend（boolean?=false） - 启用比例尺部件
enableRollerShutters（boolean?=false） - 启用卷帘对比
contrastImageryLayers（ImageryProvider[]） - 卷帘对比的图层。图层显示顺序：左-右-左-右

Outputs

viewerReady - Cesium.Viewer创建完成后会触发该事件，参数$event为{viewer: Cesium.Viewer, scene: Cesium.Scene, globe: Cesium.Globe, ellipsoid: Cesium.Ellipsoid}
sliderChange - 卷帘对比滑块位置变化事件，参数$event为当前ImageryLayer.splitDirection的值

Custom ImageryProvider

GoogleMapsImageryProvider（谷歌）
GaodeMapsImageryProvider（高德）
TiandituMapsImageryProvider（天地图）

Develop

```shell
npm install // 安装依赖包

npm start // 启动项目
```

yxfcn / e-ngx-cesium