添加并封装船只及轨迹绘制方法

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: <any>[],// 视频图元数组
+    customPrimitiveList: <any>[], // 视频图元数组
     customPrimitive: null,
-    shapeUsing: <any> false,  //判断绘画组件使用状态
+    shapeUsing: <any>false, //判断绘画组件使用状态
     shapeList: <any>[], //绘画数组（区域）
     shapeShowList: <any>[], //绘画存储（临时）
     keyAreaPos: <number[][]>[], //记录创建防区的点位,重点管控区域
+    shipDataList: <any>[], //船只数据列表
   }),
   getters: {
     getCustomPrimitiveList(): any {
-      return this.customPrimitiveList
+      return this.customPrimitiveList;
     },
     getCustomPrimitive(): any {
-      return this.customPrimitive
+      return this.customPrimitive;
     },
   },
-})
+});
 
 // 需要在设置之外使用
 export function useEarthMapStoreWithOut() {
   return useEarthMapStore(store);
-}
+}

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;
+  }
+};

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.fxaa = true; //图像改善
-        this._viewer.scene.globe.baseColor = Cesium.Color.BLACK
+        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[0].czmObject.xbsjImageryProvider.TileMapServiceImageryProvider.url =
-        this.sceneTree.children[1].czmObject.xbsjImageryProvider.TileMapServiceImageryProvider.url = window._CONFIG['earthMapURL'] + window._CONFIG['vector']
+          window._CONFIG['earthMapURL'] + window._CONFIG['satellite'];
-        this.sceneTree.children[2].czmObject.xbsjTerrainProvider.XbsjCesiumTerrainProvider.url = window._CONFIG['earthMapURL'] + window._CONFIG['terrain'];
+        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.clear();
-                pickedFeature.id._xbsjOwner.addViewShedReturn = undefined
+                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({
+                      // let rader2 = this._viewer.entities.add({
-                    //   position: Cesium.Cartesian3.fromDegrees(113.528333, 22.156109),
+                      //   position: Cesium.Cartesian3.fromDegrees(113.528333, 22.156109),
-                    //   name: '雷达扫描',
+                      //   name: '雷达扫描',
-                    //   ellipse: {
+                      //   ellipse: {
-                    //       semiMajorAxis: 5000.0,
+                      //       semiMajorAxis: 5000.0,
-                    //       semiMinorAxis: 5000.0,
+                      //       semiMinorAxis: 5000.0,
-                    //       material: new Cesium.RadarScanMaterialProperty({
+                      //       material: new Cesium.RadarScanMaterialProperty({
-                    //           color: new Cesium.Color(1.0, 1.0, 0.0, 0.7),
+                      //           color: new Cesium.Color(1.0, 1.0, 0.0, 0.7),
-                    //           speed: 20.0,
+                      //           speed: 20.0,
-                    //       }),
+                      //       }),
-                    //       height: 20.0,
+                      //       height: 20.0,
-                    //       heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
+                      //       heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
-                    //       outline: true,
+                      //       outline: true,
-                    //       outlineColor: new Cesium.Color(1.0, 1.0, 0.0, 1.0)
+                      //       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); //移除鼠标事件