e-ngx-cesium
基于Angular的三维地球组件,依赖三维框架:cesium
如果该组件出现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":,"styles":,"scripts": -
Add
cesium-typings
totypings.d.ts
/// -
Set
CESIUM_BASE_URL
in main.tswindow = './assets/scripts/cesium'; // 设置cesium请求资源的基本路径// window['CESIUM_BASE_URL']需在应用启动之前设置platformBrowserDynamic.bootstrapModuleAppModule; -
Add the
ENgxCesiumModule
; -
Use in Template
-
Use in Component
viewerOptions: ViewerOptions;viewer: Viewer;constructoronViewerReadyevt: any
API
Inputs
-
viewerOptions
(any
) - 创建Cesium.Viewer的属性配置,默认配置:private defaultViewerOptions: ViewerOptions =; -
accessToken
(string
) - cesium ion 令牌。要访问 cesium 提供的影像或地形服务,需要去 cesium ion 注册申请 -
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 // 启动项目
```