Angular-cesium-popup NPM

angular-cesium-popup

封装了一个 cesium 的 popup 组件。

使用方式

（1）安装组件

npm install angular-cesium-popup --save

（2）样式引入

在全局样式文件：style.scss or style.less 中引入 popup 样式文件

    @import "./node_modules/angular-cesium-popup/src/lib/popupStyle.less";

（3）component 使用

...
// 引入你的popup要展示的内容组件
import { PopuptestComponent } from './components/popuptest/popuptest.component';
import { CesiumPopupService, ComponentUtilService } from 'angular-cesium-popup';
...

export class yourComponent {

    constructor(
        private popup: CesiumPopupService,
        private componentUtilService: ComponentUtilService,
    ) { 
        ...
    }

    /**
     * 添加popup到cesium地图
     *
     * @param {*} viewer cesium实例对象
     * @memberof AppComponent
     */
    addPopupToMap(viewer: any): void{
        ...
        // params中的所有的值， 会在你的组件PopuptestComponent中找到对应的变量名，并赋上对于的值
        // 举例：如果你的params = {aaa:'11', bbb:'12'}; 那么PopuptestComponent这个组件，在你初始化构建完成后就必须声明出来aaa变量和bbb变量。所以一般建议params中只传入id参数，在组件内部的OnInit事件中写请求详情接口内容的操作。
         const dom = this.componentUtilService.getComponentElement(PopuptestComponent, params);
         // tip：addTo(viewer)函数调用必须写在最后面
         this.popup.setPosition(position).setDomContent(dom).addTo(viewer);
        ...
    }
}

参数介绍

参数名	类型	示例值
`dom`	`Component`	`框架中的组件：Component`
`viewer`	`any`	`viewer = new Cesium.Viewer({...})`
`params`	`{key: any}`	`params = {name:'111',id:'222'}`
`position`	`any`	`handler.setInputAction((event: any) => { position = this.viewer.scene.pickPosition(event.position); }, Cesium.ScreenSpaceEventType.LEFT_CLICK) // 左键点击事件`