diff --git a/src/store/modules/earthMap.ts b/src/store/modules/earthMap.ts index 58eae2b..23d88fa 100644 --- a/src/store/modules/earthMap.ts +++ b/src/store/modules/earthMap.ts @@ -1,29 +1,37 @@ +/* + * @Author: Fuyuu 1805498209@qq.com + * @Date: 2023-12-15 16:47:17 + * @LastEditors: Fuyuu 1805498209@qq.com + * @LastEditTime: 2024-01-03 10:47:55 + * @FilePath: \dt-admin-pc-v2\src\store\modules\earthMap.ts + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ import { defineStore } from 'pinia'; import { store } from '/@/store'; - export const useEarthMapStore = defineStore({ id: 'earth-map', state: () => ({ token: '', - customPrimitiveList: [],// 视频图元数组 + customPrimitiveList: [], // 视频图元数组 customPrimitive: null, - shapeUsing: false, //判断绘画组件使用状态 + shapeUsing: false, //判断绘画组件使用状态 shapeList: [], //绘画数组（区域） shapeShowList: [], //绘画存储（临时） keyAreaPos: [], //记录创建防区的点位,重点管控区域 + shipDataList: [], //船只数据列表 }), getters: { getCustomPrimitiveList(): any { - return this.customPrimitiveList + return this.customPrimitiveList; }, getCustomPrimitive(): any { - return this.customPrimitive + return this.customPrimitive; }, }, -}) +}); // 需要在设置之外使用 export function useEarthMapStoreWithOut() { return useEarthMapStore(store); -} \ No newline at end of file +} diff --git a/src/utils/earthMap/shipDraw.ts b/src/utils/earthMap/shipDraw.ts new file mode 100644 index 0000000..ad210e9 --- /dev/null +++ b/src/utils/earthMap/shipDraw.ts @@ -0,0 +1,69 @@ +/* + * @Author: Fuyuu 1805498209@qq.com + * @Date: 2024-01-03 17:42:49 + * @LastEditors: Fuyuu 1805498209@qq.com + * @LastEditTime: 2024-01-03 18:05:32 + * @FilePath: \dt-admin-pc-v2\src\utils\earthMap\shipDraw.ts + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ +/** + * 船只及轨迹绘制 + */ + +import { useEarthMapStore } from '/@/store/modules/earthMap'; +import { addShipGroundImg, addShipTrack } from '@/utils/earthMap/earthObj'; + +// 暂存store +const store = useEarthMapStore(); +// 船只数据列表 +let shipDataList: any = []; + +// 绘制单个船只 +const drawShips = function (shipItem) { + // 引入图片 + let imageUrl = new URL(`../../assets/images/ship.png`, import.meta.url).href; + // 绘制船只 + let shipModel = addShipGroundImg(shipItem.longitude, shipItem.latitude, 0.5, imageUrl, shipItem.course, shipItem.trackId); + // 返回船只绘制信息 + return shipModel; +}; + +// 角度转弧度 +function toRadians(point) { + return window.Cesium.Math.toRadians(point); +} + +// 绘制地球上所有船只和轨迹 +export const drawAllShips = function (message) { + // 接收到的单个船只信息 + let messageData = JSON.parse(JSON.parse(message).radarTrack); + // 获取store中的船只数据列表 + shipDataList = store.shipDataList; + // 是否已经存在 + let existingShip = shipDataList.find((shipItem) => shipItem.trackId === messageData.trackId); + if (existingShip) { + // 添加新的轨迹点 + existingShip.trackList.unshift([toRadians(messageData.longitude), toRadians(messageData.latitude), 0]); + // 获取场景中的船只信息 + let shipData = window.$earth.getObject(existingShip.guid); + // 更新位置和航向 + shipData.position = [toRadians(messageData.longitude), toRadians(messageData.latitude), 0]; + shipData.rotation = -(Math.PI / 180) * messageData.course; + // 绘制船只轨迹 + addShipTrack(existingShip.trackList); + } else { + // 添加新的船只 + shipDataList.push({ + name: `${messageData.trackId}号船只`, // 名称 + trackId: messageData.trackId, // 船只id + guid: drawShips(messageData).xbsjGuid, // 船只模型id + azimuth: messageData.azimuth, // 方位角 + course: messageData.course, // 航向 + latitude: messageData.latitude, // 纬度 + longitude: messageData.longitude, // 经度 + trackList: [[toRadians(messageData.longitude), toRadians(messageData.latitude), 0]], // 轨迹列表 + }); + // 更新store + store.shipDataList = shipDataList; + } +}; diff --git a/src/views/earthMap/edit/EarthComp.vue b/src/views/earthMap/edit/EarthComp.vue index 479a101..bf75c42 100644 --- a/src/views/earthMap/edit/EarthComp.vue +++ b/src/views/earthMap/edit/EarthComp.vue @@ -106,7 +106,8 @@ import { drawInit } from '@/utils/earthMap/earthDraw'; import { keyControlInit } from '@/utils/earthMap/keyControlInit'; import redFlag from '@/assets/earthMap/redFlag.png'; - import { addModel, addPin, addViewShedRadar, addShipPrimitive } from '@/utils/earthMap/earthObj'; + import { addModel, addPin, addViewShedRadar, addShipGroundImg, addShipTrack } from '@/utils/earthMap/earthObj'; + import { drawAllShips } from '@/utils/earthMap/shipDraw'; import hidePng from '@/assets/earthMap/hide.png'; import alarmImg from '@/assets/earthMap/alarm.gif'; import VideoFusionWin from './components/VideoFusionWin.vue'; @@ -114,7 +115,7 @@ import circleDot2 from '@/assets/earthMap/circleDot2.png'; import circleDot1 from '@/assets/earthMap/circleDot1.png'; import circleDot3 from '@/assets/earthMap/circleDot3.png'; - import { nextTick } from 'vue'; + import ship from '@/assets/images/ship.png'; class HandleNodeType { #sn; @@ -255,130 +256,7 @@ VideoFusionWin, }, props: {}, - // data() { - // return { - // earthTitle: '态势监控一张图', - // realTime: '……', - // // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！ - // _earth: undefined, - // _earthUI: undefined, - // _viewer: undefined, - // _pin: undefined, - // _handler: undefined, - // // sceneTree: require('@/assets/earthMap/resjson/sc.json'), - // // sceneTree: new URL(`@/assets/earthMap/resjson/sc.json`, import.meta.url).href, - // sceneTree: sceneTree, - // // areaB: require('@/assets/earthMap/resjson/area_b.json'), - // url: { - // 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: 'checkpoint/msAisInfo/list', - // keepAlive: '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', - // }, - // cameraData: {}, - // cameraModalShow: false, - // poiModalShow: false, - // radioBtnShow: true, - // glmId: [], - - // earthChangeSpin: false, - // websock: [], - // timer: null, // 保活定时器 - // timer2: null, // 时间定时器 - // // 报警清除-定时器 - // alarmTrackClearTimer: null, - // videoWindowProps: { - // visible: false, - // isAlarm: false, - // id: '', - // title: '', - // videoUrl: '', - // cameraIp: '', - // cameraUser: '', - // cameraPwd: '', - // playRecord: false, - // warnTime: null, - // warnEvent: { - // happenTime: '', - // happenLoc: '', - // warnNum: 0, - // warnLevel: 0, - // warnType: 0, - // warnContent: '', - // }, - // }, - // // 图层管理- 模型 ref 旧值 - // sceneTreeOldRefValue: '', - // sceneInfo: null, - // // 区域节点By Ref划分 - // nodeConfigByRef: new Map(), - // nodeCheckedByRef: new Map(), - // areaByNodeId: new Map(), - // statusByNodeId: new Map(), - // imgByRef: new Map(), - // radarAlarmDataMap: new Map(), - // wbUnifiedResponse: false, - // hostDeviceMapById: new Map(), - // alarmInfoMap: new Map(), - // toolbarShow: false, - - // //addModelWin - // addModelWinShow: false, - // czmObject: null, - // node: null, - // type: '', - // lineId: '', - // areaCode: '', - // areaByNodeIdModel: '', - // el:null, - // eidtId: null, - // //addroamVideo - // addRoamVideoShow: false - // }; - // }, + }) export default class EarthComp extends Vue { /** @@ -524,16 +402,6 @@ monitorPosition: any = []; /////////////////////////////////////////////////////////////////////////// - // 当前船只位置信息 - shipData: any = {}; - - // 在地球上绘制船只信息 - drawShips() { - let shipData = this.shipData; - let imageUrl = new URL(`../../../assets/images/ship.png`, import.meta.url).href; // 替换为你的PNG图片路径 - let shipModel = addShipPrimitive(shipData.longitude, shipData.latitude, 0, imageUrl, [shipData.azimuth, 0, 0], '123456', [1, 1, 1]); - console.log('shipModel', shipModel); - } mounted() { let that = this; @@ -582,72 +450,6 @@ } }); } - - { - $mitt.on('winShow', function (e: any) { - that.VideoFusionWinShow = e; - }); - //其他页面调用本页面的methods方法 - $mitt.on('openNotification', (res: any) => { - // that.openNotification(msg, dt, type, top) - that.openNotification(res.msg, res.dt, res.type, res.top); - }); - $mitt.on('listenMouseHandler', function () { - that.listenMouseHandler(); - }); - $mitt.on('removeHandler', function () { - that.removeHandler(); - }); - $mitt.on('createBBHLine', function () { - that.createBBHLine(); - }); - $mitt.on('createRealTimeObj', function () { - that.createRealTimeObj(); - }); - $mitt.on('radioChangeBtnShow', function (callback) { - that.radioChangeBtnShow(callback); - }); - $mitt.on('loadingStatus', function () { - that.loadingStatus(); - }); - $mitt.on('clearAlarmModel', (mittData: any) => { - let { isWarnEvent, eventSerialNum } = mittData; - // 清除告警模型 - if (isWarnEvent) { - // 是告警事件 先去后台查询预警事件获取事件编号 - let url = 'military/msWarnEvent/queryWarnEventDetailList'; - let params = { - eventSerialNum: eventSerialNum, - }; - defHttp.get({ url, params }, { isTransformResponse: false }).then((res) => { - if (res.success) { - // 成功 - let data = res.result; - for (const warnEventInfo of data) { - this.clearAlarmModel(warnEventInfo.eventSerialNum); - } - } else { - // 失败 - console.log('失败'); - - this.$message.error(res.message); - } - }); - } else { - // 不是告警事件,直接清除 - this.clearAlarmModel(eventSerialNum); - } - }); - // 监听mqtt消息 - $mitt.on('deviceCmd', (message: any) => { - // 赋值船只数据 - this.shipData = JSON.parse(JSON.parse(message).radarTrack); - // 绘制 - nextTick(() => { - this.drawShips(); - }); - }); - } } // 随机数 guid() { @@ -805,19 +607,22 @@ this._earth.terrainEffect.subSurfaceEnabled = false; //开启地表透明模式 this._viewer = earthUI.earth.czm.viewer; - this._viewer.scene.fxaa = true //图像改善 - this._viewer.scene.globe.baseColor = Cesium.Color.BLACK + this._viewer.scene.fxaa = true; //图像改善 + this._viewer.scene.globe.baseColor = Cesium.Color.BLACK; //加载场景资源 // console.log("this.sceneTree",this.sceneTree); // console.log("window._CONFIG['earthMapURL']",window._CONFIG['earthMapURL']); // console.log("window._CONFIG['satellite']",window._CONFIG['satellite']); - this.sceneTree.children[0].czmObject.xbsjImageryProvider.TileMapServiceImageryProvider.url = window._CONFIG['earthMapURL'] + window._CONFIG['satellite']; - this.sceneTree.children[1].czmObject.xbsjImageryProvider.TileMapServiceImageryProvider.url = window._CONFIG['earthMapURL'] + window._CONFIG['vector'] - this.sceneTree.children[2].czmObject.xbsjTerrainProvider.XbsjCesiumTerrainProvider.url = window._CONFIG['earthMapURL'] + window._CONFIG['terrain']; + this.sceneTree.children[0].czmObject.xbsjImageryProvider.TileMapServiceImageryProvider.url = + window._CONFIG['earthMapURL'] + window._CONFIG['satellite']; + this.sceneTree.children[1].czmObject.xbsjImageryProvider.TileMapServiceImageryProvider.url = + 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, title: '场景树', @@ -833,6 +638,9 @@ //监听鼠标事件 this.listenMouseHandler(earthUI); + //监听mitt + this.listenMittHandler(earthUI); + // 飞入方法 await this.fly(); @@ -2198,9 +2006,8 @@ // console.log("pickedFeature.id._xbsjOwner.addViewShedReturn",pickedFeature.id._xbsjOwner.addViewShedReturn); //清空当前雷达，并将该方法指向undefined(清空) - pickedFeature.id._xbsjOwner.addViewShedReturn.clear() - pickedFeature.id._xbsjOwner.addViewShedReturn = undefined - + pickedFeature.id._xbsjOwner.addViewShedReturn.clear(); + pickedFeature.id._xbsjOwner.addViewShedReturn = undefined; } else { defHttp.get({ url: this.url.radarList, params: { radarCode: labelCode } }, { isTransformResponse: false }).then((res) => { if (res.success) { @@ -2215,38 +2022,37 @@ let radarShifting = data.angularRadian; let left = Number(radarShifting) - Number(radarRange) / 2; //参数：经纬度、半径、起始角度（正北方向）、结束角度 - console.log("雷达扫描范围",data); + console.log('雷达扫描范围', data); //弧度转角度 let degreePosition = radianToDegreeInLngLatHeight( pickedFeature.id._xbsjOwner.position[0], pickedFeature.id._xbsjOwner.position[1], 0.1 - ) + ); //创建雷达扫描 深度 // this._viewer.scene.globe.depthTestAgainstTerrain = true; - let rader = new CircleScan(this._viewer) + let rader = new CircleScan(this._viewer); rader.add(degreePosition, null, radarRadius, 10000); - pickedFeature.id._xbsjOwner.addViewShedReturn= rader + pickedFeature.id._xbsjOwner.addViewShedReturn = rader; // 雷达扫描2 - // let rader2 = this._viewer.entities.add({ - // position: Cesium.Cartesian3.fromDegrees(113.528333, 22.156109), - // name: '雷达扫描', - // ellipse: { - // semiMajorAxis: 5000.0, - // semiMinorAxis: 5000.0, - // material: new Cesium.RadarScanMaterialProperty({ - // color: new Cesium.Color(1.0, 1.0, 0.0, 0.7), - // speed: 20.0, - // }), - // height: 20.0, - // heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND, - // outline: true, - // outlineColor: new Cesium.Color(1.0, 1.0, 0.0, 1.0) - // } - // }) - + // let rader2 = this._viewer.entities.add({ + // position: Cesium.Cartesian3.fromDegrees(113.528333, 22.156109), + // name: '雷达扫描', + // ellipse: { + // semiMajorAxis: 5000.0, + // semiMinorAxis: 5000.0, + // material: new Cesium.RadarScanMaterialProperty({ + // color: new Cesium.Color(1.0, 1.0, 0.0, 0.7), + // speed: 20.0, + // }), + // height: 20.0, + // heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND, + // outline: true, + // outlineColor: new Cesium.Color(1.0, 1.0, 0.0, 1.0) + // } + // }) // pickedFeature.id._xbsjOwner.addViewShedReturn= addViewShedRadar( // pickedFeature.id._xbsjOwner.position, @@ -2255,7 +2061,6 @@ // Number(radarRange) / 2 + Number(radarShifting), // [rgb.r / 255, rgb.g / 255, rgb.b / 255, rgb.a] // ); - } } }); @@ -2538,6 +2343,70 @@ } } + listenMittHandler(earthUI = null) { + let that = this; + { + $mitt.on('winShow', function (e: any) { + that.VideoFusionWinShow = e; + }); + //其他页面调用本页面的methods方法 + $mitt.on('openNotification', (res: any) => { + // that.openNotification(msg, dt, type, top) + that.openNotification(res.msg, res.dt, res.type, res.top); + }); + $mitt.on('listenMouseHandler', function () { + that.listenMouseHandler(); + }); + $mitt.on('removeHandler', function () { + that.removeHandler(); + }); + $mitt.on('createBBHLine', function () { + that.createBBHLine(); + }); + $mitt.on('createRealTimeObj', function () { + that.createRealTimeObj(); + }); + $mitt.on('radioChangeBtnShow', function (callback) { + that.radioChangeBtnShow(callback); + }); + $mitt.on('loadingStatus', function () { + that.loadingStatus(); + }); + $mitt.on('clearAlarmModel', (mittData: any) => { + let { isWarnEvent, eventSerialNum } = mittData; + // 清除告警模型 + if (isWarnEvent) { + // 是告警事件 先去后台查询预警事件获取事件编号 + let url = 'military/msWarnEvent/queryWarnEventDetailList'; + let params = { + eventSerialNum: eventSerialNum, + }; + defHttp.get({ url, params }, { isTransformResponse: false }).then((res) => { + if (res.success) { + // 成功 + let data = res.result; + for (const warnEventInfo of data) { + this.clearAlarmModel(warnEventInfo.eventSerialNum); + } + } else { + // 失败 + console.log('失败'); + + this.$message.error(res.message); + } + }); + } else { + // 不是告警事件,直接清除 + this.clearAlarmModel(eventSerialNum); + } + }); + // 监听mqtt消息 + $mitt.on('deviceCmd', (message: any) => { + drawAllShips(message); + }); + } + } + removeHandler() { this._handler.removeInputAction(window.Cesium.ScreenSpaceEventType.MOUSE_MOVE); //移除鼠标事件 this._handler.removeInputAction(window.Cesium.ScreenSpaceEventType.LEFT_CLICK); //移除鼠标事件