# e-ngx-cesium

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

Latest version **6.3.2** (published 2018-12-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install e-ngx-cesium
pnpm add e-ngx-cesium
yarn add e-ngx-cesium
bun add e-ngx-cesium
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.3.2 |
| Published | 2018-12-17 |
| First published | 2017-11-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | 赖祥燃 |
| Maintainers | laixiangran |
| Keywords | angular, cesium, e-ngx-cesium, laixiangran |

## Links

- npm: https://www.npmjs.com/package/e-ngx-cesium
- Repository: https://github.com/laixiangran/e-ngx-cesium
- Homepage: https://github.com/laixiangran/e-ngx-cesium#readme
- Issues: https://github.com/laixiangran/e-ngx-cesium/issues
- npm.io page: https://npm.io/package/e-ngx-cesium

## Dependencies (5)

- [cesium](https://npm.io/package/cesium.md) ^1.50.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [@turf/turf](https://npm.io/package/@turf/turf.md) ^5.1.5
- [font-awesome](https://npm.io/package/font-awesome.md) ^4.7.0
- [cesium-typings](https://npm.io/package/cesium-typings.md) ^1.50.0

## Recent versions

- 6.3.2 (latest) — 2018-12-17
- 6.3.1 — 2018-11-05
- 6.3.0 — 2018-10-08
- 6.2.0 — 2018-10-07
- 6.1.2 — 2018-08-21
- 6.1.1 — 2018-08-21
- 6.1.0 — 2018-08-20
- 6.0.1 — 2018-08-19
- 6.0.0 — 2018-08-19
- 5.1.0 — 2018-08-17
- 5.0.0 — 2018-04-24
- 1.7.1 — 2017-12-28
- 1.7.0 — 2017-12-26
- 1.6.0 — 2017-12-13
- 1.4.2 — 2017-12-12
- … 11 more at https://npm.io/package/e-ngx-cesium/versions

## README

# e-ngx-cesium

基于Angular的三维地球组件，依赖三维框架：[cesium](https://cesiumjs.org/)

![示例图](./example/assets/images/示例图.png)

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

## Usage

1. Install

	```shell
	npm install --save e-ngx-cesium@latest
	```

2. Set in the `.angular-cli.json（@angular/cli）`

	```json
    "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"
    ]
	```

3. Add `cesium-typings` to `typings.d.ts`

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

4. Set `CESIUM_BASE_URL` in main.ts

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

5. Add the `ENgxCesiumModule`

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

6. Use in Template

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

7. Use in Component

	```typescript
    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的属性配置，默认配置：

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

- `accessToken`（`string`） - cesium ion 令牌。要访问 cesium 提供的影像或地形服务，需要去 [cesium ion](https://cesium.com/ion) 注册申请

- `proxy`（`string`） - 设置代理路径，可使用esri提供的[几个平台的代理文件](https://github.com/Esri/resource-proxy)

- `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 // 启动项目
	```

# License

[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](/LICENSE)

---
_Source: https://npm.io/package/e-ngx-cesium · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._