{"id":21827506,"url":"https://github.com/laixiangran/e-ngx-cesium","last_synced_at":"2025-04-14T05:43:00.379Z","repository":{"id":57218008,"uuid":"110664556","full_name":"laixiangran/e-ngx-cesium","owner":"laixiangran","description":"基于Angular的三维地球组件，依赖三维框架cesium","archived":false,"fork":false,"pushed_at":"2018-12-17T06:20:13.000Z","size":32120,"stargazers_count":17,"open_issues_count":0,"forks_count":13,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-12-23T09:42:55.224Z","etag":null,"topics":["angular","cesium"],"latest_commit_sha":null,"homepage":"http://www.laixiangran.cn/e-ngx-cesium/demo/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/laixiangran.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-14T08:50:58.000Z","updated_at":"2022-12-14T05:34:47.000Z","dependencies_parsed_at":"2022-08-28T21:40:45.019Z","dependency_job_id":null,"html_url":"https://github.com/laixiangran/e-ngx-cesium","commit_stats":null,"previous_names":["laixiangran/ngx-cesium"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-cesium","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-cesium/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-cesium/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-cesium/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laixiangran","download_url":"https://codeload.github.com/laixiangran/e-ngx-cesium/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248830420,"owners_count":21168272,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","cesium"],"created_at":"2024-11-27T18:13:22.485Z","updated_at":"2025-04-14T05:43:00.355Z","avatar_url":"https://github.com/laixiangran.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# e-ngx-cesium\n\n基于Angular的三维地球组件，依赖三维框架：[cesium](https://cesiumjs.org/)\n\n![示例图](./example/assets/images/示例图.png)\n\n**如果该组件出现typescript编译错误，有可能是cesium-typings不是最新的，你可以执行`npm uninstall e-ngx-cesium --save`之后再执行`npm install e-ngx-cesium --save`**\n\n## Usage\n\n1. Install\n\n\t```shell\n\tnpm install --save e-ngx-cesium@latest\n\t```\n\n2. Set in the `.angular-cli.json（@angular/cli）`\n\n\t```json\n    \"assets\": [\n        {\n            \"glob\": \"**/*\",\n            \"input\": \"../node_modules/cesium/Build/Cesium\",\n            \"output\": \"./assets/scripts/cesium\"\n        }\n    ],\n    \"styles\": [\n        \"../node_modules/cesium/Build/Cesium/Widgets/widgets.css\"\n    ],\n    \"scripts\": [\n        \"../node_modules/cesium/Build/Cesium/Cesium.js\",\n        \"../node_modules/e-ngx-cesium/dist/components/navigation/viewerCesiumNavigationMixin.js\"\n    ]\n\t```\n\n3. Add `cesium-typings` to `typings.d.ts`\n\n\t```typescript\n    /// \u003creference path=\"../node_modules/cesium-typings/index.d.ts\" /\u003e\n\t```\n\n4. Set `CESIUM_BASE_URL` in main.ts\n\n\t```typescript\n    window['CESIUM_BASE_URL'] = './assets/scripts/cesium'; // 设置cesium请求资源的基本路径\n    // window['CESIUM_BASE_URL']需在应用启动之前设置\n    platformBrowserDynamic().bootstrapModule(AppModule);\n\t```\n\n5. Add the `ENgxCesiumModule`\n\n\t```typescript\n\timport { ENgxCesiumModule } from \"e-ngx-cesium\";\n\t@NgModule({\n\t    imports: [\n\t        ENgxCesiumModule\n\t    ]\n\t})\n\t```\n\n6. Use in Template\n\n\t```html\n\t\u003ce-ngx-cesium [viewerOptions]=\"viewerOptions\" (viewerReady)=\"onViewerReady($event)\"\u003e\u003c/e-ngx-cesium\u003e\n\t```\n\n7. Use in Component\n\n\t```typescript\n    viewerOptions: ViewerOptions;\n    viewer: Viewer;\n\n    constructor() {\n        this.viewerOptions = {\n            scene3DOnly: true,\n            selectionIndicator: false,\n            baseLayerPicker: false\n        };\n    }\n\n    onViewerReady(evt: any) {\n        this.viewer = evt.viewer;\n    }\n\t```\n\n## API\n\n### Inputs\n\n- `viewerOptions`（`any`） - 创建Cesium.Viewer的属性配置，默认配置：\n\n\t```typescript\n\tprivate defaultViewerOptions: ViewerOptions = {\n\t\ttimeline: false,\n\t\tanimation: false,\n\t\tbaseLayerPicker: false,\n\t\tgeocoder: false,\n\t\thomeButton: false,\n\t\tnavigationHelpButton: false,\n\t\tsceneModePicker: false,\n\t\tfullscreenButton: false,\n\t\tfullscreenElement: this.globeContainer // 设置viewer所在元素为全屏的元素\n\t};\n\t```\n\n- `accessToken`（`string`） - cesium ion 令牌。要访问 cesium 提供的影像或地形服务，需要去 [cesium ion](https://cesium.com/ion) 注册申请\n\n- `proxy`（`string`） - 设置代理路径，可使用esri提供的[几个平台的代理文件](https://github.com/Esri/resource-proxy)\n\n- `rectangle`（`Rectangle`） - 初始范围，默认中国\n\n- `enablePosition`（`boolean?=false`） - 启用位置信息部件\n\n- `enableSetting`（`boolean?=false`） - 启用效果设置部件\n\n- `enableCompass`（`boolean?=true`） - 启用罗盘部件\n\n- `enableZoomControls`（`boolean?=true`） - 启用缩放部件\n\n- `enableDistanceLegend`（`boolean?=false`） - 启用比例尺部件\n\n- `enableRollerShutters`（`boolean?=false`） - 启用卷帘对比\n\n- `contrastImageryLayers`（`ImageryProvider[]`） - 卷帘对比的图层。图层显示顺序：左-右-左-右\n\n### Outputs\n\n- `viewerReady` - Cesium.Viewer创建完成后会触发该事件，参数$event为`{viewer: Cesium.Viewer, scene: Cesium.Scene, globe: Cesium.Globe, ellipsoid: Cesium.Ellipsoid}`\n\n- `sliderChange` - 卷帘对比滑块位置变化事件，参数$event为当前ImageryLayer.splitDirection的值\n\n### Custom ImageryProvider\n\n- GoogleMapsImageryProvider（谷歌）\n\n- GaodeMapsImageryProvider（高德）\n\n- TiandituMapsImageryProvider（天地图）\n\n## Develop\n\n\t```shell\n\tnpm install // 安装依赖包\n\n\tnpm start // 启动项目\n\t```\n\n# License\n\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaixiangran%2Fe-ngx-cesium","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaixiangran%2Fe-ngx-cesium","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaixiangran%2Fe-ngx-cesium/lists"}