https://github.com/laixiangran/e-ngx-cesium
基于Angular的三维地球组件，依赖三维框架cesium
https://github.com/laixiangran/e-ngx-cesium
angular cesium
Last synced: about 1 year ago
JSON representation
基于Angular的三维地球组件，依赖三维框架cesium
- Host: GitHub
- URL: https://github.com/laixiangran/e-ngx-cesium
- Owner: laixiangran
- License: mit
- Created: 2017-11-14T08:50:58.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-12-17T06:20:13.000Z (over 7 years ago)
- Last Synced: 2024-12-23T09:42:55.224Z (over 1 year ago)
- Topics: angular, cesium
- Language: TypeScript
- Homepage: http://www.laixiangran.cn/e-ngx-cesium/demo/
- Size: 30.6 MB
- Stars: 17
- Watchers: 7
- Forks: 13
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# e-ngx-cesium
基于Angular的三维地球组件，依赖三维框架：[cesium](https://cesiumjs.org/)
**如果该组件出现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
///
```
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
```
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
[](/LICENSE)