vue + cesium（5）: 地图点击弹框框方法封装（infoWindow.js）

/*
* 说明:   地图点击弹框框方法封装
*/

import * as Cesium from "cesium/Cesium.js";
import Vue from 'vue'

export const infoWindow = (
        function () {
            var viewer;
            var handler;
            var trackPop = undefined;
            var luolei_value = false;
            var winpos;
            var tipOverlay;
            var pickedEntity;
            var movePickedEntity;
            var shipInfo;
            var infoWindow;
            var isShipInfoModal = false
            function ConstructInfoWindow(options) {
                viewer = options.viewer;
                return {
                    openWindow: () => openWindow(),
                    close: () => closeInfoWindow()
                }
            }
            function openWindow(options) {
                //鼠标左键
                handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
                tipOverlay = document.createElement('div');
                viewer.container.appendChild(tipOverlay)
                // 单击事件
                handler.setInputAction(event => {
                    pickedEntity = viewer.scene.pick(event.position) && viewer.scene.pick(event.position).id
                    if(pickedEntity) {
                        if (pickedEntity.tag == "DrawPort") {
                            // 泊位
                            isShipInfoModal = false
                            winpos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, pickedEntity.position._value)
                            trackPop = pickedEntity.position._value;
                            closeInfoWindow()
                            var portInfo = pickedEntity._description._value
                            infoWindow = document.getElementById("portInfoWindow")
                            viewer.scene.postRender.addEventListener(tipOverlayEvent);
                            Vue.prototype.$Bus.$emit("3dhandlePortDialog", portInfo)
                        } else if (pickedEntity.tag == "VideoMonitor") {
                            // 摄像头
                            console.log(pickedEntity, 'pickedEntity')
                            isShipInfoModal = false
                            winpos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, pickedEntity.position._value)
                            trackPop = pickedEntity.position._value;
                            closeInfoWindow()
                            var videoInfo = pickedEntity._description._value
                            infoWindow = document.getElementById("videoMonitorWindow")
                            viewer.scene.postRender.addEventListener(tipOverlayEvent);
                            Vue.prototype.$Bus.$emit("3ddeviceClick", true, videoInfo)
                        } else if (pickedEntity.tag == "waterQuality") {
                            // 水质检测
                            isShipInfoModal = false
                            winpos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, pickedEntity.position._value)
                            trackPop = pickedEntity.position._value;
                            closeInfoWindow()
                            var videoInfo = pickedEntity._description._value
                            infoWindow = document.getElementById("waterModalWindow")
                            viewer.scene.postRender.addEventListener(tipOverlayEvent);
                            Vue.prototype.$Bus.$emit("3dshowWaterPopup", true, videoInfo)
                        }

                        luolei_value = true

                    } else {
                        Vue.prototype.$Bus.$emit("openInfoWindow")
                        Vue.prototype.$Bus.$emit("openShipInfoWindow")
                        closeInfoWindow()
                    }
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
                // 双击事件
                handler.setInputAction(event => {
                    pickedEntity = viewer.scene.pick(event.position) && viewer.scene.pick(event.position).id
                    if (pickedEntity) {
                        if (pickedEntity.tag == 'ship') {
                            isShipInfoModal = true
                            winpos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, pickedEntity.position._value)
                            trackPop = pickedEntity.position._value;
                            closeInfoWindow()
                            shipInfo = pickedEntity._description._value   //根据渔船id 获取渔船详情
                            infoWindow = document.getElementById("3dShipInfo")
                            viewer.scene.postRender.addEventListener(tipOverlayEvent);
                            Vue.prototype.$MyCesium.isShowSelectionIndicator(true)
                            Vue.prototype.$Bus.$emit("3dshipClick",true, Object.assign({}, {...shipInfo}, {type: pickedEntity.type}))

                        }
                    }
                }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
                // // 鼠标移入事件
                handler.setInputAction(event => {
                    isShipInfoModal = false
                    luolei_value = true
                    movePickedEntity = viewer.scene.pick(event.endPosition) && viewer.scene.pick(event.endPosition).id
                    if (movePickedEntity && movePickedEntity.tag == 'ship') {
                        winpos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, movePickedEntity.position._value)
                        trackPop = movePickedEntity.position._value;
                        closeInfoWindow()
                        shipInfo = movePickedEntity._description._value   //根据渔船id 获取渔船详情
                        infoWindow = document.getElementById("3dDrawPopup")
                        viewer.scene.postRender.addEventListener(tipOverlayEvent);
                        // Vue.prototype.$MyCesium.isShowSelectionIndicator(true)
                        Vue.prototype.$Bus.$emit("3dshowShipPopup",true, Object.assign({}, {...shipInfo}, {type: movePickedEntity.type}))
                    }  else {
                        Vue.prototype.$Bus.$emit("3dshowShipPopup", false)
                        movePickedEntity = null
                    }
                }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

            }


            function closeInfoWindow() {
                viewer.scene.postRender.removeEventListener(tipOverlayEvent);
                // if(pickedEntity && pickedEntity.tag == 'VideoMonitor') {
                //     pickedEntity._billboard._image._value = require('../assets/images/device.png')
                // }

            }
            //设置信息框
            function setInfoWindow(windowTip, type){
                let status = type ? type: pickedEntity.tag
                let obj = {
                    'online': {x: 223, y: 347 },
                    'DrawPort': { x: 143, y: 307 },
                    'ship': { x: 20, y: 367 },
                    'VideoMonitor': { x: 143, y: 307 },
                    'waterQuality': { x: 143, y: 307 },
                }
                infoWindow.style.left = windowTip.x - obj[status].x + "px";
                infoWindow.style.top = windowTip.y -obj[status].y + "px";
                
            }

            function tipOverlayEvent() {
                if (luolei_value && trackPop && pickedEntity) {
                    if (infoWindow) {
                        let windowTip = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, trackPop)
                        setInfoWindow(windowTip)
                    }
                } else if (luolei_value && trackPop && movePickedEntity) {
                    if (infoWindow) {
                        let windowTip = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, trackPop)
                        setInfoWindow(windowTip, 'ship')
                    }
                }
            }

            return ConstructInfoWindow
        })()