1、将船只图片更换为三维模型

2、优化AIS弹窗

src/components/earthMap/AISInfoWindow.vue

@@ -2,7 +2,7 @@
  * @Author: Fuyuu 1805498209@qq.com
  * @Date: 2024-01-05 14:18:33
  * @LastEditors: Fuyuu 1805498209@qq.com
- * @LastEditTime: 2024-01-05 16:45:48
+ * @LastEditTime: 2024-01-08 17:41:07
  * @FilePath: \dt-admin-pc-v2\src\components\earthMap\AISInfoWindow.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -13,8 +13,8 @@
       :width="600"
       :minWidth="600"
       :height="380"
-      :left="650"
-      :top="240"
+      :left="80"
+      :top="70"
       @cancel="cancel"
       :floatright="false"
       :showCancelButton="true"
@@ -25,71 +25,71 @@
       <div class="ais_content">
         <div class="content_item">
           <div class="item_title">船名:</div>
-          <div class="item_content">赛尔号101</div>
+          <div class="item_content">顺宏海1026</div>
         </div>
         <div class="content_item">
           <div class="item_title">MMSI:</div>
-          <div class="item_content">413247920</div>
+          <div class="item_content">413495860</div>
         </div>
         <div class="content_item">
           <div class="item_title">船首向:</div>
-          <div class="item_content">123456</div>
+          <div class="item_content">未知</div>
         </div>
         <div class="content_item">
           <div class="item_title">呼号:</div>
-          <div class="item_content">123456</div>
+          <div class="item_content">未知</div>
         </div>
         <div class="content_item">
           <div class="item_title">航迹向:</div>
-          <div class="item_content">123456</div>
+          <div class="item_content">未知</div>
         </div>
         <div class="content_item">
           <div class="item_title">IMO:</div>
-          <div class="item_content">123456</div>
+          <div class="item_content">458876</div>
         </div>
         <div class="content_item">
           <div class="item_title">航速:</div>
-          <div class="item_content">123456</div>
+          <div class="item_content">0.2节</div>
         </div>
         <div class="content_item">
           <div class="item_title">经度:</div>
-          <div class="item_content">123456</div>
+          <div class="item_content">113-26.578E</div>
         </div>
         <div class="content_item">
           <div class="item_title">纬度:</div>
-          <div class="item_content">123456</div>
+          <div class="item_content">22-08.082N</div>
         </div>
         <div class="content_item">
           <div class="item_title">状态:</div>
-          <div class="item_content">123456</div>
+          <div class="item_content">锚泊</div>
         </div>
         <div class="content_item">
           <div class="item_title">类型:</div>
-          <div class="item_content">123456</div>
+          <div class="item_content">货船</div>
         </div>
         <div class="content_item">
           <div class="item_title">船长/宽:</div>
-          <div class="item_content">123456</div>
+          <div class="item_content">89米/20米</div>
         </div>
         <div class="content_item">
           <div class="item_title">目的地:</div>
-          <div class="item_content">123456</div>
+          <div class="item_content">JIANGMEN,CN</div>
         </div>
         <div class="content_item">
           <div class="item_title">吃水:</div>
-          <div class="item_content">123456</div>
+          <div class="item_content">3.8米</div>
         </div>
         <div class="content_item">
           <div class="item_title">国籍:</div>
-          <div class="item_content">123456</div>
+          <div class="item_content">CN</div>
         </div>
         <div class="content_item">
           <div class="item_title">预到时间:</div>
-          <div class="item_content">123456</div>
+          <div class="item_content">2024-01-08 17:00:00</div>
         </div>
         <div class="content_item">
           <div class="item_title">更新时间:</div>
-          <div class="item_content">123456</div>
+          <div class="item_content"> 2024-01-08 14:40:11</div>
         </div>
         <!-- 轨迹显示 -->
         <div class="content_item">
@@ -102,8 +102,11 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, getCurrentInstance, ref } from 'vue';
+  import { defineComponent, getCurrentInstance, ref, onMounted, nextTick } from 'vue';
   import Window from '@/components/earthMap/components/Window.vue';
+  import { useEarthMapStore } from '/@/store/modules/earthMap';
+  // 暂存store
+  const store = useEarthMapStore();
   export default defineComponent({
     name: 'AISInfoWindow',
     props: {
@@ -111,6 +114,10 @@
         type: String,
         default: 'AIS信息',
       },
+      ship_guid: {
+        type: String,
+        default: '',
+      },
     },
     components: {
       Window,
@@ -118,6 +125,10 @@
     setup(props, context) {
       const { proxy }: any = getCurrentInstance();
       const checked = ref(false);
+      // 船只数据列表
+      let shipDataList: any = [];
+      // 获取store中的船只数据列表
+      shipDataList = store.shipDataList;
       // 关闭弹窗
       function cancel() {
         proxy.$parent.AISInfoWindowShow = false;
@@ -125,7 +136,19 @@
       // 打开或关闭轨迹
       function changeTrack(e) {
         checked.value = e;
+        // 当前选中船只
+        let shipData = window.$earth.getObject(proxy.ship_guid);
+        // 打开轨迹
+        if (e) {
+          console.log(shipData);
+        } else {
+          console.log(shipData);
+        }
       }
+      onMounted(() => {
+        console.log(proxy.ship_guid);
+      });
+
       return {
         checked,
         cancel,

src/utils/earthMap/earthObj.ts

@@ -347,6 +347,30 @@ export const addShipGroundImg = (lon: number, lat: number, height: number, imgUr
   };
   return shipGroundImg;
 };
+// 创建船只三维模型
+export const addShipModel = (name: string, options: any = {}) => {
+  const tileset = new window.XE.Obj.Model(window.$earth);
+  // 创建一个Model对象
+  const objConfig = {
+    name: name,
+    url: options.url,
+    id: options.id,
+    xbsjPosition: options.position, // 位置数组 [经度、纬度、高度]
+    xbsjRotation: options.rotation, // 姿态数组 [偏航角、俯仰角、翻转角]
+    xbsjScale: [0.5, 0.5, 0.5], // 缩放比例
+    show: true,
+  };
+  tileset.xbsjFromJSON(objConfig);
+  //移入事件
+  tileset.onmouseover = () => {
+    window.$earth.czm.viewer._container.style.cursor = 'pointer';
+  };
+  //移出事件
+  tileset.onmouseout = () => {
+    window.$earth.czm.viewer._container.style.cursor = 'default';
+  };
+  return tileset;
+};
 
 // 创建船只轨迹
 export const addShipTrack = (positions: number[][]) => {
@@ -642,7 +666,6 @@ export const defenceArea = (positions: any, color: number[], height = 3, loop =
   return dc;
 };
 //创建3D模型
-
 export const addModel = (name: string, url: string, options: any = {}, hasMouseOver: boolean = true): void => {
   const tileset = new window.XE.Obj.Model(window.$earth);
   // 创建一个Model对象

src/utils/earthMap/shipDraw.ts

@@ -2,7 +2,7 @@
  * @Author: Fuyuu 1805498209@qq.com
  * @Date: 2024-01-03 17:42:49
  * @LastEditors: Fuyuu 1805498209@qq.com
- * @LastEditTime: 2024-01-05 17:35:32
+ * @LastEditTime: 2024-01-08 15:05:38
  * @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
  */
@@ -11,7 +11,7 @@
  */
 
 import { useEarthMapStore } from '/@/store/modules/earthMap';
-import { addShipGroundImg, addShipTrack } from '@/utils/earthMap/earthObj';
+import { addShipTrack, addShipModel } from '@/utils/earthMap/earthObj';
 
 // 暂存store
 const store = useEarthMapStore();
@@ -21,11 +21,18 @@ let shipDataList: any = [];
 // 绘制单个船只
 const drawShips = function (shipItem) {
   // 引入初始图片
-  let imageUrl = new URL(`../../assets/images/ship.png`, import.meta.url).href;
+  // let imageUrl = new URL(`../../assets/images/ship.png`, import.meta.url).href;
   // 引入高亮图片
-  let imageUrl_a = new URL(`../../assets/images/ship_a.png`, import.meta.url).href;
+  // let imageUrl_a = new URL(`../../assets/images/ship_a.png`, import.meta.url).href;
+  // 模型配置参数
+  let options = {
+    id: shipItem.trackId,
+    url: window._CONFIG['domianURL'] + '/sys/common/static/tongyongchuan.gltf',
+    position: [toRadians(shipItem.longitude), toRadians(shipItem.latitude), 0],
+    rotation: [toRadians(shipItem.course), 0, 0],
+  };
   // 绘制船只
-  let shipModel = addShipGroundImg(shipItem.longitude, shipItem.latitude, 0.5, imageUrl, imageUrl_a, shipItem.course, shipItem.trackId);
+  let shipModel = addShipModel(`${shipItem.trackId}号船`, options);
   // 返回船只绘制信息
   return shipModel;
 };
@@ -48,9 +55,11 @@ export const drawAllShips = function (message) {
     existingShip.trackList.push([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;
+    shipData.xbsjPosition = [toRadians(messageData.longitude), toRadians(messageData.latitude), 0];
+    // 航向需要后续调整。。。
+    shipData.xbsjRotation = [(Math.PI / 180) * (messageData.course + 90), 0, 0];
     // 绘制船只轨迹
     addShipTrack(existingShip.trackList);
   } else {

src/views/earthMap/edit/EarthComp.vue

@@ -430,6 +430,7 @@
     ///////////////////////////////////////////////////////////////////////////
     //AIS信息窗口显示
     AISInfoWindowShow = false;
+    ship_guid = '123456';
 
     mounted() {
       let that = this;
@@ -2045,10 +2046,11 @@
                 }
               });
             }
-            // 船只图片
-            if (pickedFeature.id.xbsjType && pickedFeature.id.xbsjType === 'GroundImage') {
+            // 船只模型
+            if (pickedFeature.id.xbsjType && pickedFeature.id.name.includes('船') && pickedFeature.id.xbsjType === 'Model') {
               this.AISInfoWindowShow = true;
-              // console.log(this.AISInfoWindowShow);
+              // 赋值船只场景id
+              this.ship_guid = pickedFeature.id.guid;
             }
             //雷达扫描范围
             if (