使用store存储XbsjEarthUI

src/store/modules/earthMap.ts

@@ -20,6 +20,7 @@ export const useEarthMapStore = defineStore({
     shapeShowList: <any>[], //绘画存储（临时）
     keyAreaPos: <number[][]>[], //记录创建防区的点位,重点管控区域
     shipDataList: <any>[], //船只数据列表
+    xbsjEarthUI: <any>null, //XbsjEarthUI
   }),
   getters: {
     getCustomPrimitiveList(): any {

src/views/earthMap/edit/EarthComp.vue

@@ -116,6 +116,7 @@
   import circleDot1 from '@/assets/earthMap/circleDot1.png';
   import circleDot3 from '@/assets/earthMap/circleDot3.png';
   import ship from '@/assets/images/ship.png';
+  import { onBeforeUnmount } from 'vue';
 
   class HandleNodeType {
     #sn;
@@ -528,6 +529,8 @@
 
     createEarth() {
       let that = this;
+      //使用store存储XbsjEarthUI
+      this.store.xbsjEarthUI = XbsjEarthUI;
       XbsjEarthUI.create('earthContainer').then(async (earthUI: any) => {
         // 设置全局变量，可调试
         window.$uia = earthUI;
@@ -4188,6 +4191,8 @@
     // 资源销毁
     beforeDestroy() {
       // vue程序销毁时，需要清理相关资源
+      console.log("vue程序销毁");
+      
       this._earth = this._earth && this._earth.destroy();
       this.websocketclose();
       //清除定时器
@@ -4195,6 +4200,23 @@
       clearInterval(this.timer2);
       clearInterval(this.alarmTrackClearTimer);
     }
+    // 资源销毁
+    destroy(){
+       // vue程序销毁时，需要清理相关资源
+       console.log("vue程序销毁",this._earth);
+      
+      
+      // this.websocketclose();
+      //清除定时器
+      clearInterval(this.timer);
+      clearInterval(this.timer2);
+      clearInterval(this.alarmTrackClearTimer);
+      // window.$uia.tools.sceneTree.destroy()
+      // this._earth = this._earth && this._earth.destroy();
+      //利用store.xbsjEarthUI 重新赋值 window.XbsjEarthUI 
+      window.XbsjEarthUI = this.store.xbsjEarthUI
+      this._earth = undefined;
+    }
   }
 </script>
 

src/views/military/modules/earthMap/scene/model/sceneInfo/SenceInfo.vue

@@ -119,13 +119,13 @@
       title="拾取中心坐标和相机数据" 
       :visible="mapVisible" 
       @ok="handleOk" 
-      @cancel="()=> mapVisible = false" 
+      @cancel="destroyed" 
       width="60vw" 
-      :destroyOnClose="true"
+      destroyOnClose
       wrapClassName="EarthMap">
-    <a-row>
+    <a-row style="height: 60vh;">
       <a-col :span="24">
-        <EarthComp />
+        <EarthComp ref="earth"/>
       </a-col>
     </a-row>
 
@@ -135,13 +135,26 @@
   </div>
 </template>
 <script setup>
-import { toRefs, ref, watch, computed, onMounted } from 'vue';
+import { toRefs, ref, watch, computed, onMounted, nextTick } from 'vue';
 import locationPng from '@/assets/images/getLocation.png';
 import EarthMapModal from '../MapModel/EarthMapModal.vue';
 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';
+
+const earth = ref()
+function destroyed() {
+  console.log("earth",earth.value);
+  earth.value.destroy();
+  nextTick(()=>{
+    mapVisible.value = false
+  })
+  
+}
+
+
 
 // 新增场景
 const addScene = (params) => {