From 9bc895a3be33fbbfdc9d2a70de5d378803d45dbe Mon Sep 17 00:00:00 2001 From: DIAMOND <276397553@qq.com> Date: Thu, 11 Jan 2024 16:06:12 +0800 Subject: [PATCH] =?UTF-8?q?1.defineStore=E6=96=B0=E5=A2=9E=E5=AD=97?= =?UTF-8?q?=E6=AE=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2.earthMapUrl 抽离URL 3. 新增 import { listenMouseHandlerSence } from '@/utils/earthMap/listenMouseHandlerSence'; import getLineInfo from '@/utils/earthMap/getLineInfo'; import getCameraInfo from '@/utils/earthMap/getCameraInfo'; --- src/api/earth/earthMap.ts | 55 ++ src/store/modules/earthMap.ts | 6 + src/utils/earthMap/getCameraInfo.ts | 186 ++++ src/utils/earthMap/getLineInfo.ts | 268 ++++++ src/utils/earthMap/listenMouseHandlerSence.ts | 124 +++ src/views/earthMap/edit/EarthComp.vue | 614 +++---------- .../model/mapModel/EarthMapModal copy.vue | 827 ++++++++++++++++++ .../scene/model/mapModel/EarthMapModal.vue | 12 +- .../scene/model/sceneInfo/SenceInfo.vue | 85 +- 9 files changed, 1663 insertions(+), 514 deletions(-) create mode 100644 src/api/earth/earthMap.ts create mode 100644 src/utils/earthMap/getCameraInfo.ts create mode 100644 src/utils/earthMap/getLineInfo.ts create mode 100644 src/utils/earthMap/listenMouseHandlerSence.ts create mode 100644 src/views/military/modules/earthMap/scene/model/mapModel/EarthMapModal copy.vue diff --git a/src/api/earth/earthMap.ts b/src/api/earth/earthMap.ts new file mode 100644 index 0000000..d558c3c --- /dev/null +++ b/src/api/earth/earthMap.ts @@ -0,0 +1,55 @@ +import { defHttp } from '/@/utils/http/axios'; +import { message } from 'ant-design-vue'; +import { useGlobSetting } from '/@/hooks/setting'; +const globSetting = useGlobSetting(); + +export enum earthMapUrl{ + queryLabelList= 'military/msMapLabel/queryLabelAndDeviceList', + queryLineList= 'military/msMapLine/list', + queryCameraInfo= 'military/camera/site/getCameraInfoForEarth', + queryAllModelInfo= 'military/msModelPosition/queryAllModelInfo', + queryPatrolRouteInfo= 'military/msPatrolLine/getLineDetail', + queryBayoneByParam= 'military/msBayonetStatistics/getBayoneByParam', + queryAisInfo= 'military/checkpoint/msAisInfo/list', + keepAlive= 'military/mapInfo/keepAlive', + //雷达扫描列表 + radarList= '/military/RadarConfig/list', + // 删除模型 + // 传感器 + deleteSensor= '/military/msModelPosition/deleteByEventSerialNum', + // 站点 + deleteSite= '/military/camera/site/delete', + // 标志点 + deleteMapLabel= '/military/msMapLabel/delete', + updateMapLine= '/military/msMapLine/edit', + deleteMapLine= '/military/msMapLine/delete', + saveMapLine= '/military/msMapLine/add', + // 编辑 模型 + // 传感器 + updateSensor= '/military/msModelPosition/editByEventSerialNum', + // 站点 + updateSite= '/military/camera/site/edit', + + // 标志点 + updateMapLabel= '/military/msMapLabel/edit', + + // 模型 保存 + // 传感器 + SaveSensorModel= '/military/msModelPosition/add', + // 站点 + saveCameraSiteModel= '/military/camera/site/add', + // 标志点 + saveMapLabel= '/military/msMapLabel/addMapLabel', + + // 通过 线路名称 查询 线路 + queryMapLine= '/military/msMapLine/queryByName', + querySiteById= '/military/camera/site/queryById', + // 查询设备列表 + queryDeviceInfoList= '/military/msDeviceInfo/list', + setDefenseArea= '/military/netty/microwaveDetector/defenceArea', + perimeterRegionList= '/third/api/perimeterRegionList', + perimeterControl= '/third/api/perimeterControl', + // 雷达重新发送报警信息 + sendRadarAlarmByWebSocket= '/military/warn/sendRadarAlarmByWebSocket', + +} \ No newline at end of file diff --git a/src/store/modules/earthMap.ts b/src/store/modules/earthMap.ts index a63e636..e3994f4 100644 --- a/src/store/modules/earthMap.ts +++ b/src/store/modules/earthMap.ts @@ -21,6 +21,12 @@ export const useEarthMapStore = defineStore({ keyAreaPos: [], //记录创建防区的点位,重点管控区域 shipDataList: [], //船只数据列表 xbsjEarthUI: null, //XbsjEarthUI + /////////////////////// + cameraData: {},//请求的电线杆数据 + nodeConfigByRef: new Map(),// 区域节点By Ref划分 + + areaByNodeId: new Map(), + }), getters: { getCustomPrimitiveList(): any { diff --git a/src/utils/earthMap/getCameraInfo.ts b/src/utils/earthMap/getCameraInfo.ts new file mode 100644 index 0000000..82d9e58 --- /dev/null +++ b/src/utils/earthMap/getCameraInfo.ts @@ -0,0 +1,186 @@ +/** + * 加载区域 + * 用于EarthComp.vue + */ +import { defHttp } from '/@/utils/http/axios'; +import { addPin } from '@/utils/earthMap/earthObj'; +import { useUserStore } from '/@/store/modules/user'; +import { useEarthMapStore } from '/@/store/modules/earthMap'; +import { earthMapUrl } from '@/api/earth/earthMap' +import { nextTick } from 'vue'; +import $ from 'jquery'; + +let userStore = useUserStore(); +let store = useEarthMapStore(); +export default function getCameraInfo(models, type) { + console.log("加载站点"); + return new Promise((resolve, reject) => { + //请求电线杆信息 + defHttp.get({ url: earthMapUrl.queryCameraInfo }, { isTransformResponse: false }).then(async (res) => { + if (res.success) { + // console.log("res",res); + setCamera(res.result, models, type); + store.cameraData = res.result; + resolve(models); + } + }); + }); +} +async function setCamera(res, models, type) { + //根据经纬度算出该点地形高度 + let posArr: any = [], + updatedPositions: any = []; + //地形是否开启 + if (window.$earth.sceneTree.$refs.terrain.czmObject.show) { + res.forEach((data, index) => { + if (data.msCameraSiteList != null) { + data.msCameraSiteList.forEach((data, index) => { + posArr.push(window.Cesium.Cartographic.fromDegrees(data.longitude, data.latitude)); + }); + } + }); + var promise = window.Cesium.sampleTerrainMostDetailed(this._viewer.terrainProvider, posArr); + updatedPositions = await window.Cesium.when(promise); + } else { + res.forEach((data, index) => { + if (data.msCameraSiteList != null) { + data.msCameraSiteList.forEach((data, index) => { + updatedPositions.push(window.Cesium.Cartographic.fromDegrees(data.longitude, data.latitude, 0)); + }); + } + }); + } + // console.log("根据经纬度算出该点地形高度",res); + // console.log("根据经纬度算出该点地形高度",updatedPositions); + + //设置电线杆 + res.forEach((data, index) => { + // console.log("data",data); + let siteConfig: any = null; + const lineId = data.id; + let childs: any = null; + if (type == 2) { + childs = models.children; + for (const child of childs) { + if ('node_' + data.id == child.ref) { + siteConfig = child.children[0]; + } + } + } else { + const parentNode = store.nodeConfigByRef.get('node_' + data.id); + if (!parentNode) { + return; + } + childs = parentNode.children; + siteConfig = childs[0]; + // console.log("parentNode",parentNode); + } + if (!siteConfig) { + return; + } + if (data.msCameraSiteList != null) { + data.msCameraSiteList.forEach((data, index) => { + // 判断电线杆状态 + let num = 0; + if (data.msCameraSettingList != null) { + data.msCameraSettingList.forEach((data, index) => { + if (data.status == '3') { + //1-在线，2-离线，3-异常 + num = num + 1; + } + }); + } + let gltfStr; + if (!data.modelUrl) { + return; + } + let fileInfos = data.modelUrl.split('.'); + if (num == 0) { + // gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + fileInfos[0] + '.' + fileInfos[1]; + gltfStr = '/dt/sys/common/static/' + fileInfos[0] + '.' + fileInfos[1]; + } else if (num < data.msCameraSettingList.length) { + let newName = fileInfos[0].substring(0, fileInfos[0].length - 1) + 'R'; + // gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + newName + '.' + fileInfos[1]; + gltfStr = '/dt/sys/common/static/' + newName + '.' + fileInfos[1]; + } else if (num == data.msCameraSettingList.length) { + let newName = fileInfos[0].substring(0, fileInfos[0].length - 1) + 'Y'; + // gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + newName + '.' + fileInfos[1]; + gltfStr = '/dt/sys/common/static/' + newName + '.' + fileInfos[1]; + } + const modelConfig = { + ref: data.id, + name: lineId, + czmObject: { + name: data.sitename, + xbsjType: 'Model', + url: gltfStr, + // "color": [0.52, 0.6, 0.58, 1], + minimumPixelSize: data.minimumPixelSize, + // maximumScale: 0.02, + scale: data.scale, + xbsjScale: data.xyzScale ? data.xyzScale.split(',') : [1, 1, 1], + xbsjPosition: [window.Cesium.Math.toRadians(data.longitude), window.Cesium.Math.toRadians(data.latitude), data.height], + xbsjRotation: [ + window.Cesium.Math.toRadians(data.yaw), + window.Cesium.Math.toRadians(data.pitch), + window.Cesium.Math.toRadians(data.roll), + ], + viewDistance: 150, + distanceDisplayCondition: [1.0, 30000.0], + customProp: data.id, + }, + }; + + window.$earth.sceneTree.root.children.push(modelConfig); + //鼠标事件 + window.$earth.sceneTree.$refs[data.id].czmObject.onmouseover = () => { + window.$viewer._container.style.cursor = 'pointer'; + }; + window.$earth.sceneTree.$refs[data.id].czmObject.onmouseout = () => { + window.$viewer._container.style.cursor = 'default'; + }; + + nextTick(() => { + const divs = $('#earthContainer>div>div>div:nth-child(5)') + .children('div') + .eq(1) + .children() + .eq(0) + .children() + .eq(0) + .children() + .each((index, element) => { + $(element).css('display', 'none'); + }); + }); + //加载相机 + let cameraList: any = []; + if (data.msCameraSettingList) { + for (let camera of data.msCameraSettingList) { + let name = camera.cameraName; + const obj = { + ref: 'camera_' + camera.id, + expand: false, + title: name, + czmObject: { + name: name, + xbsjType: 'Model', + }, + }; + // let id = camera.id + cameraList.push(obj); + // 默认设置为在线 + } + } + // 杆 + const node = { + ref: 'node_' + data.id, + title: data.sitename, + expand: false, + children: cameraList, + }; + siteConfig.children.push(node); + }); + } + }); +} diff --git a/src/utils/earthMap/getLineInfo.ts b/src/utils/earthMap/getLineInfo.ts new file mode 100644 index 0000000..8a091c1 --- /dev/null +++ b/src/utils/earthMap/getLineInfo.ts @@ -0,0 +1,268 @@ +/** + * 加载区域 + * 用于EarthComp.vue + */ +import { defHttp } from '/@/utils/http/axios'; +import { addPin } from '@/utils/earthMap/earthObj'; +import { useUserStore } from '/@/store/modules/user'; +import { useEarthMapStore } from '/@/store/modules/earthMap'; +import { earthMapUrl } from '@/api/earth/earthMap' +import hidePng from '@/assets/earthMap/hide.png'; +import { nextTick } from 'vue'; +import $ from 'jquery'; + +let userStore = useUserStore(); +let store = useEarthMapStore(); +export default function getLineInfo(models, type) { + console.log("请求线路信息"); + + return new Promise((resolve, reject) => { + //请求线路信息 + defHttp + .get( + { + url: earthMapUrl.queryLineList, + params: { + pageNo: 1, + pageSize: 99999, + sceneId: userStore.userInfo?.sceneId + '*', + }, + }, + { isTransformResponse: false } + ) + .then(async (res) => { + // console.log('加载区域',res); + if (res.success) { + //一级区域 + let parentArea: any = []; + //二级区域 + let childArea: any = []; + res.result.records.forEach((data) => { + if (data.parentCode) { + childArea.push(data); + } else { + parentArea.push(data); + } + }); + parentArea.forEach((data) => { + // console.log(data); + + // data.sceneId + let updatedPositions: any = []; + let positionsData = JSON.parse(data.positions); + if (!positionsData) { + positionsData = []; + } + updatedPositions = positionsData; + + let lineOptions: any = { + maxShowHeight: 30000, + customProp: data.lineCode, + }; + lineOptions.name = data.name; + lineOptions.xbsjType = 'Polyline'; + lineOptions.width = data.width; + lineOptions.positions = updatedPositions; + lineOptions.loop = Boolean(data.isLoop); + lineOptions.depthTest = Boolean(data.isDepthCheck); + lineOptions.arcType = data.interpolation; + let material: any = {}; + switch (data.materialType) { + // 实线 + case 0: + material.type = 'XbsjColorMaterial'; + material.XbsjColorMaterial = {}; + if (!data.color || data.color.length <= 0) { + data.color = '[1,1,1,1]'; + } + material.XbsjColorMaterial.color = JSON.parse(data.color); + break; + // 虚线 + case 1: + material.type = 'XbsjPolylineDashMaterial'; + material.XbsjPolylineDashMaterial = {}; + material.XbsjPolylineDashMaterial.color = JSON.parse(data.color); + material.XbsjPolylineDashMaterial.gapColor = JSON.parse(data.intervalColor); + material.XbsjPolylineDashMaterial.dashLength = data.dashLength; + material.XbsjPolylineDashMaterial.dashPattern = data.dashStyle; + break; + // 箭头线 + case 2: + material.type = 'XbsjPolylineArrowMaterial'; + material.XbsjPolylineArrowMaterial = {}; + material.XbsjPolylineArrowMaterial.color = JSON.parse(data.color); + break; + // 轨迹线 + case 3: + material.type = 'XbsjODLineMaterial'; + material.XbsjODLineMaterial = {}; + material.XbsjODLineMaterial.color = JSON.parse(data.color); + material.XbsjODLineMaterial.totoalFrameCount = data.cycleFrame; + break; + } + lineOptions.material = material; + let currentChildArea: any = []; + if (childArea.length) { + childArea.forEach((element) => { + let obj = {}; + if (data.id == element.parentCode) { + obj = { + expand: false, + title: element.name, + ref: 'nodeSecondary_' + element.id, + children: [], + }; + let updatedPositions: any = []; + let positionsData = JSON.parse(element.positions); + if (!positionsData) { + positionsData = []; + } + updatedPositions = positionsData; + let lineOptions: any = { + maxShowHeight: 30000, + customProp: element.lineCode, + }; + lineOptions.name = element.name; + lineOptions.xbsjType = 'Polyline'; + lineOptions.width = element.width; + lineOptions.positions = updatedPositions; + lineOptions.loop = Boolean(element.isLoop); + lineOptions.depthTest = Boolean(element.isDepthCheck); + lineOptions.arcType = element.interpolation; + let material: any = {}; + switch (element.materialType) { + // 实线 + case 0: + material.type = 'XbsjColorMaterial'; + material.XbsjColorMaterial = {}; + if (!element.color || element.color.length <= 0) { + element.color = '[1,1,1,1]'; + } + material.XbsjColorMaterial.color = JSON.parse(element.color); + break; + // 虚线 + case 1: + material.type = 'XbsjPolylineDashMaterial'; + material.XbsjPolylineDashMaterial = {}; + material.XbsjPolylineDashMaterial.color = JSON.parse(element.color); + material.XbsjPolylineDashMaterial.gapColor = JSON.parse(element.intervalColor); + material.XbsjPolylineDashMaterial.dashLength = element.dashLength; + material.XbsjPolylineDashMaterial.dashPattern = element.dashStyle; + break; + // 箭头线 + case 2: + material.type = 'XbsjPolylineArrowMaterial'; + material.XbsjPolylineArrowMaterial = {}; + material.XbsjPolylineArrowMaterial.color = JSON.parse(element.color); + break; + // 轨迹线 + case 3: + material.type = 'XbsjODLineMaterial'; + material.XbsjODLineMaterial = {}; + material.XbsjODLineMaterial.color = JSON.parse(element.color); + material.XbsjODLineMaterial.totoalFrameCount = element.cycleFrame; + break; + } + + let pos = [0, 0, 0]; + positionsData.forEach((element) => { + pos[0] += element[0]; + pos[1] += element[1]; + pos[2] += element[2]; + }); + pos[0] = pos[0] / positionsData.length; + pos[1] = pos[1] / positionsData.length; + pos[2] = pos[2] / positionsData.length; + let pinBuilder = { + extTextFont: '30px 宋体', + extTextPixelOffset: [-40, 10], + fillColor: [0, 0.3450980392156863, 1, 0.9], + outlineColor: [1, 1, 1, 1], + extText: element.name, + }; + let pin = addPin(element.name, hidePng, { position: pos, scale: 0.8, pinBuilder, far: 107374 }); + lineOptions.pinXbsjGuid = pin.xbsjGuid; + lineOptions.material = material; + // that._earth.sceneTree.root.children.push({ czmObject: lineOptions, ref: element.id }); + window.$earth.sceneTree.root.children.push({ czmObject: lineOptions, ref: element.id }); + currentChildArea.push(obj); + // 如果是总部 + if (type == 1) { + store.nodeConfigByRef.set('nodeSecondary_' + element.id, obj); + } + } + }); + } + + //配置信息 + const node = { + ref: 'node_' + data.id, + expand: false, + title: '<防区>' + data.name, + children: [ + { + expand: false, + title: '监控点位', + ref: 'monitor_' + window.guid(), + children: [], + }, + { + expand: false, + title: '雷达点位', + ref: 'ldList_' + window.guid(), + children: currentChildArea, + }, + { + expand: false, + title: '微波点位', + ref: 'wbList_' + window.guid(), + children: [], + }, + ], + }; + if (data.sceneId == models.ref) { + // console.log("当前场景下"); + + //该防区为当前场景下 + //压入树 + models.children.push(node); + store.nodeConfigByRef.set(node.ref, node); + store.areaByNodeId.set(node.ref, data.sceneId); + // return + } else { + const childs = models.children; + for (const child of childs) { + if (child.ref == data.sceneId) { + //该防区为子场景下 + // console.log("子场景下"); + child.children.push(node); + store.nodeConfigByRef.set(node.ref, node); + store.areaByNodeId.set(node.ref, data.sceneId); + } + } + } + //放进世界场景树 + window.$earth.sceneTree.root.children.push({ czmObject: lineOptions, ref: data.id }); + }); + //加载二级区域模型 + childArea.forEach((data) => {}); + nextTick(() => { + const divs = $('#earthContainer>div>div>div:nth-child(5)') + .children('div') + .eq(1) + .children() + .eq(0) + .children() + .eq(0) + .children() + .each((index, element) => { + // const paddingLeft = $(element).children().eq(0).css('padding-left') + $(element).css('display', 'none'); + }); + }); + // console.log("models",models); + resolve(models); + } + }); + }); + } \ No newline at end of file diff --git a/src/utils/earthMap/listenMouseHandlerSence.ts b/src/utils/earthMap/listenMouseHandlerSence.ts new file mode 100644 index 0000000..ea5d555 --- /dev/null +++ b/src/utils/earthMap/listenMouseHandlerSence.ts @@ -0,0 +1,124 @@ +/** + * 监听鼠标事件（用于场景管理） + * 用于EarthComp.vue + * + */ +import { toRefs, watch, nextTick, ref, reactive, onMounted } from 'vue'; +import { message } from 'ant-design-vue'; +import dwPng from '@/assets/images/rotationXYZ.png'; +import rotationXYZ from '@/assets/images/rotationXYZ.png'; + +// 添加地图上的鼠标监听事件 +let pin: any = undefined; +let viewer: any = undefined; +// 鼠标样式 +const cursorCss = ref("grab"); +let position: any = null; +let rotation: any = null; +let fov: any = null; +export function listenMouseHandlerSence(enablePointer = false, that) { + viewer = window.$earth.czm.viewer; + window.viewer = viewer; + window.$earth.interaction.picking.enabled = true; + window.$earth.interaction.picking.clickedColor = [1, 0, 0, 1]; + + const handler = new window.Cesium.ScreenSpaceEventHandler( + viewer.scene.canvas + ); + window.CesiumGlobalHandler = handler; + // 取消双击旋转事件 + viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction( + window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK + ); + console.log("enablePointer", enablePointer); + + if (enablePointer) { + viewer.cesiumWidget.screenSpaceEventHandler.setInputAction((event) => { + let cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(event.position), viewer.scene); + if (!cartesian) { + return; + } + // 世界坐标转换为弧度 + let ellipsoid = viewer.scene.globe.ellipsoid; + let cartographic = ellipsoid.cartesianToCartographic(cartesian); + // 弧度转换为经纬度 + let pointLon = window.Cesium.Math.toDegrees(cartographic.longitude); // 经度 + let pointLat = window.Cesium.Math.toDegrees(cartographic.latitude); // 纬度 + let pointAlt = cartographic.height; // 高度 + console.log("点击的经纬度坐标是：", { + "经度：": pointLon, + "纬度：": pointLat + }); + // debugger + + //destroy方法有问题无法成功销毁，故选择trycatch + try { + pin && pin.destroy(); + pin = undefined + } catch (error) { + console.error("销毁失败",error); + pin = undefined + } + pin = new window.XE.Obj.Pin(window.$earth); + pin.position = [cartographic.longitude, cartographic.latitude, pointAlt]; + pin.imageUrl = dwPng; + + let cposition = [window.$earth.camera.position[0], window.$earth.camera.position[1], window.$earth.camera.position[2]]; + if (pin) { + position = [pin.position[0], pin.position[1], pin.position[2]]; + } + rotation = [window.$earth.camera.rotation[0], window.$earth.camera.rotation[1], window.$earth.camera.rotation[2]]; + fov = window.$earth.camera.fov; + that.$emit("checkPosition", position, cposition, rotation, fov); + + }, + window.Cesium.ScreenSpaceEventType.LEFT_CLICK + ); + } + + // /* 左键事件 */ + handler.setInputAction((event) => { + handler.removeInputAction(window.Cesium.ScreenSpaceEventType.MOUSE_MOVE) + // modelDw.value = false; + if (clearId != null) { + clearTimeout(clearId); + clearId = null; + } + cursorCss.value = `grabbing`; + }, window.Cesium.ScreenSpaceEventType.LEFT_DOWN); + handler.setInputAction((event) => { + if (clearId != null) { + clearTimeout(clearId); + clearId = null; + } + cursorCss.value = `grab`; + }, window.Cesium.ScreenSpaceEventType.LEFT_UP); + handler.setInputAction((event) => { + if (clearId != null) { + clearTimeout(clearId); + clearId = null; + } + cursorCss.value = `url(${rotationXYZ}),grab`; + }, window.Cesium.ScreenSpaceEventType.MIDDLE_DOWN); + handler.setInputAction((event) => { + if (clearId != null) { + clearTimeout(clearId); + clearId = null; + } + cursorCss.value = `grab`; + }, window.Cesium.ScreenSpaceEventType.MIDDLE_UP); + let clearId: any = null; + handler.setInputAction((event) => { + if (event > 0) { + cursorCss.value = `zoom-in`; + } else { + cursorCss.value = `zoom-out`; + } + + clearId = setTimeout(() => { + clearTimeout(clearId); + cursorCss.value = `grab` + }, 2000); + }, window.Cesium.ScreenSpaceEventType.WHEEL); + +} \ No newline at end of file diff --git a/src/views/earthMap/edit/EarthComp.vue b/src/views/earthMap/edit/EarthComp.vue index 7029300..dc69b7d 100644 --- a/src/views/earthMap/edit/EarthComp.vue +++ b/src/views/earthMap/edit/EarthComp.vue @@ -107,7 +107,7 @@ import AISInfoWindow from '@/components/earthMap/AISInfoWindow.vue'; import { getRealTime } from '@/utils/date'; import $mitt from '@/utils/earthMap/mitt'; - import { drawInit } from '@/utils/earthMap/earthDraw'; + import { guid } from '@/utils/earthMap/guid'; import HandleNodeType from '@/utils/earthMap/handleNodeType'; import { keyControlInit } from '@/utils/earthMap/keyControlInit'; @@ -120,7 +120,13 @@ import { useMessage } from '/@/hooks/web/useMessage'; import { CircleScan } from '@/utils/earthMap/radarEntity'; import { radianToDegreeInLngLatHeight } from '@/utils/earthMap/earth'; + import { listenMouseHandlerSence } from '@/utils/earthMap/listenMouseHandlerSence'; + import getLineInfo from '@/utils/earthMap/getLineInfo'; + import getCameraInfo from '@/utils/earthMap/getCameraInfo'; + import { drawInit } from '@/utils/earthMap/earthDraw'; + import dwPng from '@/assets/images/rotationXYZ.png'; + import rotationXYZ from '@/assets/images/rotationXYZ.png'; import circleDot2 from '@/assets/earthMap/circleDot2.png'; import circleDot1 from '@/assets/earthMap/circleDot1.png'; import circleDot3 from '@/assets/earthMap/circleDot3.png'; @@ -269,6 +275,16 @@ type: Boolean, default: false, }, + //场景管理点击 + enablePointer: { + type: Boolean, + default: false + }, + //场景管理点击事件监听 + listenMouseHandlerSenceOpen: { + type: Boolean, + default: false + }, }, }) export default class EarthComp extends Vue { @@ -433,6 +449,16 @@ // 船只ais信息 ship_aisData = {}; + + + // 添加地图上的鼠标监听事件 + pin: any = undefined; + viewer: any = undefined; + // 鼠标样式 + cursorCss = "grab"; + position: any = null; + rotation: any = null; + fov: any = null; mounted() { let that = this; //随机数 @@ -570,6 +596,7 @@ // 设置全局变量，可调试 window.$uia = earthUI; window.$earth = earthUI.earth; + window.$viewer = earthUI.earth.czm.viewer; earthUI.controls.mainBar.show = false; //隐藏主工具栏 earthUI.controls.statusBar.show = true; //状态栏 //图层管理 @@ -659,7 +686,7 @@ window._CONFIG['earthMapURL'] + window._CONFIG['vector']; this.sceneTree.children[2].czmObject.xbsjTerrainProvider.XbsjCesiumTerrainProvider.url = window._CONFIG['earthMapURL'] + window._CONFIG['terrain']; - // this.sceneTree.children.push(this.areaB) + this._earth.sceneTree.root = { expand: true, @@ -676,6 +703,8 @@ //监听鼠标事件 if (this.PropsListenMouseHandlerOpen) this.listenMouseHandler(earthUI); + //监听鼠标事件（场景管理） + if (this.listenMouseHandlerSenceOpen) listenMouseHandlerSence(this.enablePointer,this); //监听mitt if (this.PropsListenMittHandlerOpen) this.listenMittHandler(earthUI); @@ -691,7 +720,12 @@ }); } //飞入方法 - async fly() { + async fly() { + if(this.$attrs.onCustomFly){ + // 如果外部传入了customFly方法则调用外部的 + this.$emit('customFly'); + return + } let position, rotation, viewDistance, duration; const sceneId = this.userStore.userInfo?.sceneId; await defHttp @@ -791,7 +825,7 @@ /* 使用async/await 处理异步方法顺序执行。成功的操作放到try里，失败的放在catch里 */ async createBBHLine(earthUI = null) { - console.log('MyScene', this.userStore.userInfo?.sceneId); + // console.log('MyScene', this.userStore.userInfo?.sceneId); let labelItems: any = undefined; let type = 1; //** @@ -817,11 +851,11 @@ // 加载区域 // console.log("加载区域"); - if (this.PropsGetLineInfoShow) await this.getLineInfo(models, type); + if (this.PropsGetLineInfoShow) await getLineInfo(models, type); // 加载站点 // console.log("加载站点"); - if (this.PropsGetCameraInfoShow) await this.getCameraInfo(models, type); + if (this.PropsGetCameraInfoShow) await getCameraInfo(models, type); // 加载雷达和微波 // console.log("加载雷达和微波"); @@ -1070,432 +1104,8 @@ } //加载区域 - getLineInfo(models, type) { - const that = this; - return new Promise((resolve, reject) => { - //请求线路信息 - defHttp - .get( - { - url: this.url.queryLineList, - params: { - pageNo: 1, - pageSize: 99999, - sceneId: this.userStore.userInfo?.sceneId + '*', - }, - }, - { isTransformResponse: false } - ) - .then(async (res) => { - // console.log('加载区域',res); - - if (res.success) { - //一级区域 - let parentArea: any = []; - //二级区域 - let childArea: any = []; - res.result.records.forEach((data) => { - if (data.parentCode) { - childArea.push(data); - } else { - parentArea.push(data); - } - }); - parentArea.forEach((data) => { - // console.log(data); - - // data.sceneId - let updatedPositions: any = []; - let positionsData = JSON.parse(data.positions); - if (!positionsData) { - positionsData = []; - } - updatedPositions = positionsData; - - let lineOptions: any = { - maxShowHeight: 30000, - customProp: data.lineCode, - }; - lineOptions.name = data.name; - lineOptions.xbsjType = 'Polyline'; - lineOptions.width = data.width; - lineOptions.positions = updatedPositions; - lineOptions.loop = Boolean(data.isLoop); - lineOptions.depthTest = Boolean(data.isDepthCheck); - lineOptions.arcType = data.interpolation; - let material: any = {}; - switch (data.materialType) { - // 实线 - case 0: - material.type = 'XbsjColorMaterial'; - material.XbsjColorMaterial = {}; - if (!data.color || data.color.length <= 0) { - data.color = '[1,1,1,1]'; - } - material.XbsjColorMaterial.color = JSON.parse(data.color); - break; - // 虚线 - case 1: - material.type = 'XbsjPolylineDashMaterial'; - material.XbsjPolylineDashMaterial = {}; - material.XbsjPolylineDashMaterial.color = JSON.parse(data.color); - material.XbsjPolylineDashMaterial.gapColor = JSON.parse(data.intervalColor); - material.XbsjPolylineDashMaterial.dashLength = data.dashLength; - material.XbsjPolylineDashMaterial.dashPattern = data.dashStyle; - break; - // 箭头线 - case 2: - material.type = 'XbsjPolylineArrowMaterial'; - material.XbsjPolylineArrowMaterial = {}; - material.XbsjPolylineArrowMaterial.color = JSON.parse(data.color); - break; - // 轨迹线 - case 3: - material.type = 'XbsjODLineMaterial'; - material.XbsjODLineMaterial = {}; - material.XbsjODLineMaterial.color = JSON.parse(data.color); - material.XbsjODLineMaterial.totoalFrameCount = data.cycleFrame; - break; - } - lineOptions.material = material; - let currentChildArea: any = []; - if (childArea.length) { - childArea.forEach((element) => { - let obj = {}; - if (data.id == element.parentCode) { - obj = { - expand: false, - title: element.name, - ref: 'nodeSecondary_' + element.id, - children: [], - }; - let updatedPositions: any = []; - let positionsData = JSON.parse(element.positions); - if (!positionsData) { - positionsData = []; - } - updatedPositions = positionsData; - let lineOptions: any = { - maxShowHeight: 30000, - customProp: element.lineCode, - }; - lineOptions.name = element.name; - lineOptions.xbsjType = 'Polyline'; - lineOptions.width = element.width; - lineOptions.positions = updatedPositions; - lineOptions.loop = Boolean(element.isLoop); - lineOptions.depthTest = Boolean(element.isDepthCheck); - lineOptions.arcType = element.interpolation; - let material: any = {}; - switch (element.materialType) { - // 实线 - case 0: - material.type = 'XbsjColorMaterial'; - material.XbsjColorMaterial = {}; - if (!element.color || element.color.length <= 0) { - element.color = '[1,1,1,1]'; - } - material.XbsjColorMaterial.color = JSON.parse(element.color); - break; - // 虚线 - case 1: - material.type = 'XbsjPolylineDashMaterial'; - material.XbsjPolylineDashMaterial = {}; - material.XbsjPolylineDashMaterial.color = JSON.parse(element.color); - material.XbsjPolylineDashMaterial.gapColor = JSON.parse(element.intervalColor); - material.XbsjPolylineDashMaterial.dashLength = element.dashLength; - material.XbsjPolylineDashMaterial.dashPattern = element.dashStyle; - break; - // 箭头线 - case 2: - material.type = 'XbsjPolylineArrowMaterial'; - material.XbsjPolylineArrowMaterial = {}; - material.XbsjPolylineArrowMaterial.color = JSON.parse(element.color); - break; - // 轨迹线 - case 3: - material.type = 'XbsjODLineMaterial'; - material.XbsjODLineMaterial = {}; - material.XbsjODLineMaterial.color = JSON.parse(element.color); - material.XbsjODLineMaterial.totoalFrameCount = element.cycleFrame; - break; - } - - let pos = [0, 0, 0]; - positionsData.forEach((element) => { - pos[0] += element[0]; - pos[1] += element[1]; - pos[2] += element[2]; - }); - pos[0] = pos[0] / positionsData.length; - pos[1] = pos[1] / positionsData.length; - pos[2] = pos[2] / positionsData.length; - let pinBuilder = { - extTextFont: '30px 宋体', - extTextPixelOffset: [-40, 10], - fillColor: [0, 0.3450980392156863, 1, 0.9], - outlineColor: [1, 1, 1, 1], - extText: element.name, - }; - let pin = addPin(element.name, hidePng, { position: pos, scale: 0.8, pinBuilder, far: 107374 }); - lineOptions.pinXbsjGuid = pin.xbsjGuid; - lineOptions.material = material; - that._earth.sceneTree.root.children.push({ czmObject: lineOptions, ref: element.id }); - currentChildArea.push(obj); - // 如果是总部 - if (type == 1) { - this.nodeConfigByRef.set('nodeSecondary_' + element.id, obj); - } - } - }); - } - - //配置信息 - const node = { - ref: 'node_' + data.id, - expand: false, - title: '<防区>' + data.name, - children: [ - { - expand: false, - title: '监控点位', - ref: 'monitor_' + window.guid(), - children: [], - }, - { - expand: false, - title: '雷达点位', - ref: 'ldList_' + window.guid(), - children: currentChildArea, - }, - { - expand: false, - title: '微波点位', - ref: 'wbList_' + window.guid(), - children: [], - }, - ], - }; - if (data.sceneId == models.ref) { - // console.log("当前场景下"); - - //该防区为当前场景下 - //压入树 - models.children.push(node); - this.nodeConfigByRef.set(node.ref, node); - this.areaByNodeId.set(node.ref, data.sceneId); - // return - } else { - const childs = models.children; - for (const child of childs) { - if (child.ref == data.sceneId) { - //该防区为子场景下 - // console.log("子场景下"); - child.children.push(node); - this.nodeConfigByRef.set(node.ref, node); - this.areaByNodeId.set(node.ref, data.sceneId); - } - } - } - //放进世界场景树 - that._earth.sceneTree.root.children.push({ czmObject: lineOptions, ref: data.id }); - }); - //加载二级区域模型 - childArea.forEach((data) => {}); - this.$nextTick(() => { - const divs = $('#earthContainer>div>div>div:nth-child(5)') - .children('div') - .eq(1) - .children() - .eq(0) - .children() - .eq(0) - .children() - .each((index, element) => { - // const paddingLeft = $(element).children().eq(0).css('padding-left') - $(element).css('display', 'none'); - }); - }); - // console.log("models",models); - resolve(models); - } - }); - }); - } + //加载相机 - getCameraInfo(models, type) { - return new Promise((resolve, reject) => { - //请求电线杆信息 - defHttp.get({ url: this.url.queryCameraInfo }, { isTransformResponse: false }).then(async (res) => { - if (res.success) { - // console.log("res",res); - this.setCamera(res.result, models, type); - this.cameraData = res.result; - resolve(models); - } - }); - }); - } - async setCamera(res, models, type) { - //根据经纬度算出该点地形高度 - let posArr: any = [], - updatedPositions: any = []; - const that = this; - //地形是否开启 - if (window.$earth.sceneTree.$refs.terrain.czmObject.show) { - res.forEach((data, index) => { - if (data.msCameraSiteList != null) { - data.msCameraSiteList.forEach((data, index) => { - posArr.push(window.Cesium.Cartographic.fromDegrees(data.longitude, data.latitude)); - }); - } - }); - var promise = window.Cesium.sampleTerrainMostDetailed(this._viewer.terrainProvider, posArr); - updatedPositions = await window.Cesium.when(promise); - } else { - res.forEach((data, index) => { - if (data.msCameraSiteList != null) { - data.msCameraSiteList.forEach((data, index) => { - updatedPositions.push(window.Cesium.Cartographic.fromDegrees(data.longitude, data.latitude, 0)); - }); - } - }); - } - // console.log("根据经纬度算出该点地形高度",res); - // console.log("根据经纬度算出该点地形高度",updatedPositions); - - //设置电线杆 - res.forEach((data, index) => { - // console.log("data",data); - - let siteConfig: any = null; - const lineId = data.id; - let childs: any = null; - if (type == 2) { - childs = models.children; - for (const child of childs) { - if ('node_' + data.id == child.ref) { - siteConfig = child.children[0]; - } - } - } else { - const parentNode = that.nodeConfigByRef.get('node_' + data.id); - if (!parentNode) { - return; - } - childs = parentNode.children; - siteConfig = childs[0]; - // console.log("parentNode",parentNode); - } - if (!siteConfig) { - return; - } - if (data.msCameraSiteList != null) { - data.msCameraSiteList.forEach((data, index) => { - // 判断电线杆状态 - let num = 0; - if (data.msCameraSettingList != null) { - data.msCameraSettingList.forEach((data, index) => { - if (data.status == '3') { - //1-在线，2-离线，3-异常 - num = num + 1; - } - }); - } - let gltfStr; - if (!data.modelUrl) { - return; - } - let fileInfos = data.modelUrl.split('.'); - if (num == 0) { - // gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + fileInfos[0] + '.' + fileInfos[1]; - gltfStr = '/dt/sys/common/static/' + fileInfos[0] + '.' + fileInfos[1]; - } else if (num < data.msCameraSettingList.length) { - let newName = fileInfos[0].substring(0, fileInfos[0].length - 1) + 'R'; - // gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + newName + '.' + fileInfos[1]; - gltfStr = '/dt/sys/common/static/' + newName + '.' + fileInfos[1]; - } else if (num == data.msCameraSettingList.length) { - let newName = fileInfos[0].substring(0, fileInfos[0].length - 1) + 'Y'; - // gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + newName + '.' + fileInfos[1]; - gltfStr = '/dt/sys/common/static/' + newName + '.' + fileInfos[1]; - } - const modelConfig = { - ref: data.id, - name: lineId, - czmObject: { - name: data.sitename, - xbsjType: 'Model', - url: gltfStr, - // "color": [0.52, 0.6, 0.58, 1], - minimumPixelSize: data.minimumPixelSize, - // maximumScale: 0.02, - scale: data.scale, - xbsjScale: data.xyzScale ? data.xyzScale.split(',') : [1, 1, 1], - xbsjPosition: [window.Cesium.Math.toRadians(data.longitude), window.Cesium.Math.toRadians(data.latitude), data.height], - xbsjRotation: [ - window.Cesium.Math.toRadians(data.yaw), - window.Cesium.Math.toRadians(data.pitch), - window.Cesium.Math.toRadians(data.roll), - ], - viewDistance: 150, - distanceDisplayCondition: [1.0, 30000.0], - customProp: data.id, - }, - }; - - window.$earth.sceneTree.root.children.push(modelConfig); - //鼠标事件 - window.$earth.sceneTree.$refs[data.id].czmObject.onmouseover = () => { - this._viewer._container.style.cursor = 'pointer'; - }; - window.$earth.sceneTree.$refs[data.id].czmObject.onmouseout = () => { - this._viewer._container.style.cursor = 'default'; - }; - - this.$nextTick(() => { - const divs = $('#earthContainer>div>div>div:nth-child(5)') - .children('div') - .eq(1) - .children() - .eq(0) - .children() - .eq(0) - .children() - .each((index, element) => { - $(element).css('display', 'none'); - }); - }); - //加载相机 - let cameraList: any = []; - if (data.msCameraSettingList) { - for (let camera of data.msCameraSettingList) { - let name = camera.cameraName; - const obj = { - ref: 'camera_' + camera.id, - expand: false, - title: name, - czmObject: { - name: name, - xbsjType: 'Model', - }, - }; - // let id = camera.id - cameraList.push(obj); - // 默认设置为在线 - } - } - // 杆 - const node = { - ref: 'node_' + data.id, - title: data.sitename, - expand: false, - children: cameraList, - }; - siteConfig.children.push(node); - }); - } - }); - } // 加载雷达和微波 async getLabelInfo(models, type) { @@ -1962,6 +1572,104 @@ }); } + // /* 左键事件 */ + listenMouseHandlerSence(enablePointer,that){ + this.viewer = window.$earth.czm.viewer; + window.viewer = this.viewer; + window.$earth.interaction.picking.enabled = true; + window.$earth.interaction.picking.clickedColor = [1, 0, 0, 1]; + + const handler = new window.Cesium.ScreenSpaceEventHandler( + this.viewer.scene.canvas + ); + window.CesiumGlobalHandler = handler; + // 取消双击旋转事件 + this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction( + window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK + ); + + if (enablePointer) { + this.viewer.cesiumWidget.screenSpaceEventHandler.setInputAction((event) => { + let cartesian = this.viewer.scene.globe.pick(this.viewer.camera.getPickRay(event.position), this.viewer.scene); + if (!cartesian) { + return; + } + // 世界坐标转换为弧度 + let ellipsoid = this.viewer.scene.globe.ellipsoid; + let cartographic = ellipsoid.cartesianToCartographic(cartesian); + // 弧度转换为经纬度 + let pointLon = window.Cesium.Math.toDegrees(cartographic.longitude); // 经度 + let pointLat = window.Cesium.Math.toDegrees(cartographic.latitude); // 纬度 + let pointAlt = cartographic.height; // 高度 + + console.log("点击的的经纬度坐标是：", { + "经度：": pointLon, + "纬度：": pointLat + }); + + this.pin && this.pin.destroy(); + this.pin = new window.XE.Obj.Pin(window.$earth); + this.pin.position = [cartographic.longitude, cartographic.latitude, pointAlt]; + this.pin.imageUrl = dwPng; + + let cposition = [window.$earth.camera.position[0], window.$earth.camera.position[1], window.$earth.camera.position[2]]; + if (this.pin) { + this.position = [this.pin.position[0], this.pin.position[1], this.pin.position[2]]; + } + this.rotation = [window.$earth.camera.rotation[0], window.$earth.camera.rotation[1], window.$earth.camera.rotation[2]]; + this.fov = window.$earth.camera.fov; + this.$emit("checkPosition", this.position, cposition, this.rotation, this.fov); + }, + window.Cesium.ScreenSpaceEventType.LEFT_CLICK + ); + } + + // /* 左键事件 */ + handler.setInputAction((event) => { + handler.removeInputAction(window.Cesium.ScreenSpaceEventType.MOUSE_MOVE) + // modelDw.value = false; + if (clearId != null) { + clearTimeout(clearId); + clearId = null; + } + this.cursorCss = `grabbing`; + }, window.Cesium.ScreenSpaceEventType.LEFT_DOWN); + handler.setInputAction((event) => { + if (clearId != null) { + clearTimeout(clearId); + clearId = null; + } + this.cursorCss = `grab`; + }, window.Cesium.ScreenSpaceEventType.LEFT_UP); + handler.setInputAction((event) => { + if (clearId != null) { + clearTimeout(clearId); + clearId = null; + } + this.cursorCss = `url(${rotationXYZ}),grab`; + }, window.Cesium.ScreenSpaceEventType.MIDDLE_DOWN); + handler.setInputAction((event) => { + if (clearId != null) { + clearTimeout(clearId); + clearId = null; + } + this.cursorCss = `grab`; + }, window.Cesium.ScreenSpaceEventType.MIDDLE_UP); + let clearId: any = null; + handler.setInputAction((event) => { + if (event > 0) { + this.cursorCss = `zoom-in`; + } else { + this.cursorCss = `zoom-out`; + } + + clearId = setTimeout(() => { + clearTimeout(clearId); + this.cursorCss = `grab` + }, 2000); + }, window.Cesium.ScreenSpaceEventType.WHEEL); + } + listenMouseHandler(earthUI = null) { let that: any = this; this._handler = new window.Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas); @@ -1979,7 +1687,7 @@ } let pickedFeature = this._viewer.scene.pick(click.position); - // console.log('点击的船只:', pickedFeature); + console.log('点击:', pickedFeature); if (pickedFeature && pickedFeature.id) { // 三维模型 @@ -2052,19 +1760,16 @@ JSON.parse(pickedFeature.id._xbsjOwner.customProp).labelAttr == '4' ) { let labelCode = JSON.parse(pickedFeature.id._xbsjOwner.customProp).labelCode; - console.log('点击雷达：', pickedFeature.id._xbsjOwner); + console.log(pickedFeature.id._xbsjOwner); if (pickedFeature.id._xbsjOwner.addViewShedReturn) { //显示/不显示雷达扫码效果 // pickedFeature.id._xbsjOwner.addViewShedReturn.show = !pickedFeature.id._xbsjOwner.addViewShedReturn.show; // console.log("pickedFeature.id._xbsjOwner.addViewShedReturn",pickedFeature.id._xbsjOwner.addViewShedReturn); //清空当前雷达，并将该方法指向undefined(清空) - console.log('关闭扫描'); - pickedFeature.id._xbsjOwner.addViewShedReturn.clear(); pickedFeature.id._xbsjOwner.addViewShedReturn = undefined; } else { - console.log('打开扫描'); defHttp.get({ url: this.url.radarList, params: { radarCode: labelCode } }, { isTransformResponse: false }).then((res) => { if (res.success) { if (res.result.records.length > 0) { @@ -3673,22 +3378,7 @@ this.addModelWinShow = true; }); - ////////////////////////// - // 只有组件中有getBind属性才能传递属性 - // this._earthUI.showPropertyWindow( - // { - // czmObject: sn.czmObject, - // node: item, - // type: 'jkd', - // lineId: lineId, - // areaCode: areaCode, - // areaByNodeId: that.areaByNodeId, - // }, - // { - // // component: addModelModal, - // component: addModelWin, - // } - // ) + return; } } else { @@ -3712,25 +3402,7 @@ this.addModelWinShow = true; }); - // 只有组件中有getBind属性才能传递属性 - // this._earthUI.showPropertyWindow( - // { - // czmObject: sn.czmObject, - // node: item, - // type: jsonObj.labelAttr == 4 ? 'ld' : 'wb', - // lineId: lineId, - // areaCode: areaCode, - // areaByNodeId: that.areaByNodeId, - // eidtId: sn.ref, - // setLabelStatus: that.setLabelStatus, - // setIconByRef: that.setIconByRef, - // el: el, - // }, - // { - // // component: addModelModal, - // component: addModelWin, - // } - // ) + return; } } diff --git a/src/views/military/modules/earthMap/scene/model/mapModel/EarthMapModal copy.vue b/src/views/military/modules/earthMap/scene/model/mapModel/EarthMapModal copy.vue new file mode 100644 index 0000000..e6ae9d3 --- /dev/null +++ b/src/views/military/modules/earthMap/scene/model/mapModel/EarthMapModal copy.vue @@ -0,0 +1,827 @@ + + + \ No newline at end of file diff --git a/src/views/military/modules/earthMap/scene/model/mapModel/EarthMapModal.vue b/src/views/military/modules/earthMap/scene/model/mapModel/EarthMapModal.vue index e6ae9d3..11776ec 100644 --- a/src/views/military/modules/earthMap/scene/model/mapModel/EarthMapModal.vue +++ b/src/views/military/modules/earthMap/scene/model/mapModel/EarthMapModal.vue @@ -358,7 +358,6 @@ const cssGrab = function (e) { const addContainerClickListen = function () { const dom = document.getElementById("earthContainer"); dom.addEventListener("mousedown", cssGrab, true) - // dom.addEventListener("mouseup", cssGrab) } // 模型跟随鼠标 const modelFollowMouse = (event) => { @@ -399,7 +398,6 @@ const listenMouseHandler = function () { viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction( window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK ); - // handler.setInputAction(modelFollowMouse, Cesium.ScreenSpaceEventType.MOUSE_MOVE); if (enablePointer.value) { viewer.cesiumWidget.screenSpaceEventHandler.setInputAction((event) => { @@ -472,9 +470,7 @@ const listenMouseHandler = function () { cursorCss.value = `grab` }, 2000); }, window.Cesium.ScreenSpaceEventType.WHEEL); - // window.earth.onclick = function () { - // console.log(1); - // } + } //添加地图上的监听事件-选取区域 const listenMouseHandlerSelect = function () { @@ -696,12 +692,6 @@ const destroyCache = function () { modelDw.value = false; enableTile.value = false; - // window.CesiumGlobalHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.MOUSE_MOVE) - // window.CesiumGlobalHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.LEFT_DOWN) - // window.CesiumGlobalHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.LEFT_UP) - // window.CesiumGlobalHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.MIDDLE_DOWN) - // window.CesiumGlobalHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.MIDDLE_UP) - // window.CesiumGlobalHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.WHEEL) CModel.value && CModel.value.destroy(); earth && earth.destroy(); diff --git a/src/views/military/modules/earthMap/scene/model/sceneInfo/SenceInfo.vue b/src/views/military/modules/earthMap/scene/model/sceneInfo/SenceInfo.vue index e990941..dc9d006 100644 --- a/src/views/military/modules/earthMap/scene/model/sceneInfo/SenceInfo.vue +++ b/src/views/military/modules/earthMap/scene/model/sceneInfo/SenceInfo.vue @@ -115,20 +115,20 @@ :hasMoveMethod="subObject && subObject.id ? true : false" @moveChinaPosition="moveChinaPosition" > --> - - - - - - - + + + + + @@ -142,16 +142,17 @@ import { defHttp } from '@/utils/http/axios'; import { message } from 'ant-design-vue'; import { EditOutlined } from '@ant-design/icons-vue'; import EarthComp from '@/views/earthMap/edit/EarthComp.vue'; -// import EarthComp from '@/views/earthMap/edit/EarthCompTest.vue'; +//缓存subObject数据，点击ok 则将执行checkPosition +let subObjectCache= ref({}); const earth = ref() function destroyed() { - console.log("earth",earth.value); + // console.log("earth", earth.value); earth.value.destroy(); - nextTick(()=>{ + nextTick(() => { mapVisible.value = false }) - + } @@ -232,22 +233,20 @@ onMounted(async () => { }); // 打开地图时飞入到指定位置 const moveChinaPosition = function () { - // console.log('moveChinaPosition',subObject.value); - window.earth.camera.fov = subObject.value.viewDistance; - // window.earth.camera.position = [subObject.value.lon, subObject.value.lat, subObject.value.altitude]; - //飞入应为相机位置 - window.earth.camera.position = [subObject.value.cameraLon, subObject.value.cameraLat, subObject.value.cameraAltitude]; - window.earth.camera.rotation = [subObject.value.rotationX, subObject.value.rotationY, subObject.value.rotationZ]; + // console.log('movePosition', subObject.value); + if (subObject.value.id) { + window.$earth.camera.fov = subObject.value.viewDistance; + //飞入应为相机位置 + window.$earth.camera.position = [subObject.value.cameraLon, subObject.value.cameraLat, subObject.value.cameraAltitude]; + window.$earth.camera.rotation = [subObject.value.rotationX, subObject.value.rotationY, subObject.value.rotationZ]; + return + } + // 否则则给一个默认位置 + window.$earth.camera.fov = 1.0471975511965976; + window.$earth.camera.position = [1.8833961240252113, 0.6131398723508994, 8921610.846366767]; + window.$earth.camera.rotation = [6.283185307179586, -1.5704896980852325, 0] }; -// const stop = watch( -// visible, (value, oldValue) => { -// if (value) { -// initMap() -// stop(); -// } -// } -// ) // 弹窗地图框属性 const mapVisible = ref(false); @@ -270,6 +269,27 @@ const checkPosition = function (position, cameraPosition, rotation, fov) { subObject.value.viewDistance = fov; }; +function checkPositionCache(position, cameraPosition, rotation, fov){ + console.log("接收到了",position); + subObjectCache.value.position = position + subObjectCache.value.cameraPosition = cameraPosition; + subObjectCache.value.rotation = rotation; + subObjectCache.value.fov = fov; +} +function earthMapOk(){ + checkPosition( + subObjectCache.value.position, + subObjectCache.value.cameraPosition, + subObjectCache.value.rotation, + subObjectCache.value.fov + ) + destroyed() +} + + + + + // 图片预览的计算属性 const preViewUrl = computed({ get: () => { @@ -360,4 +380,5 @@ defineExpose({ :deep(.ant-select) { width: 90%; -} +} +