轨迹标记

Web/src/App.vue

@@ -2,9 +2,6 @@
   <a-config-provider :locale="locale">
     <div class="app">
       <router-view />
-      <!-- <div class="map-wrapper">
-        <GMap />
-      </div> -->
     </div>
   </a-config-provider>
 </template>
@@ -12,14 +9,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { useMyStore } from './store'
-import GMap from '/@/components/GMap.vue'
 import zhCN from 'ant-design-vue/es/locale/zh_CN';
 import 'moment/dist/locale/zh-cn';
 
 export default defineComponent({
   name: 'App',
-  components: { GMap },
-
   setup() {
     const store = useMyStore();
 

Web/src/components/GMap.vue

@@ -508,7 +508,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, reactive, ref, watch } from 'vue'
+import { computed, defineComponent, onMounted, reactive, ref, watch, onUnmounted } from 'vue'
 import {
   generateLineContent,
   generatePointContent,
@@ -794,6 +794,10 @@ export default defineComponent({
       useGMapManageHook.globalPropertiesConfig(app)
     })
 
+    onUnmounted(() => {
+      root.$map.destroy()
+    })
+
     const { getDrawFlightAreaCallback, onFlightAreaDroneLocationWs } = useFlightArea()
     useFlightAreaDroneLocationEvent(onFlightAreaDroneLocationWs)
 

Web/src/hooks/use-g-map-trajectory.ts

@@ -42,7 +42,7 @@ export function useGMapTrajectory() {
     })
     root.$map.add([startMarker, endMarker, polyline]);
     // 自动缩放地图到合适的视野级别
-    // root.$map.setFitView();
+    root.$map.setFitView();
   }
 
   return {

Web/src/pages/page-web/projects/workspace.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="project-app-wrapper">
     <div class="left">
-      <!-- <Sidebar /> -->
       <div class="main-content uranus-scrollbar dark">
         <Tsa />
       </div>
@@ -10,28 +9,18 @@
       <div class="map-wrapper">
         <GMap />
       </div>
-      <div class="media-wrapper" v-if="root.$route.name === ERouterName.MEDIA">
-        <MediaPanel />
-      </div>
-      <div class="task-wrapper" v-if="root.$route.name === ERouterName.TASK">
-        <TaskPanel />
-      </div>
     </div>
   </div>
 </template>
+
 <script lang="ts" setup>
-import Sidebar from '/@/components/common/sidebar.vue'
 import Tsa from '/@/pages/page-web/projects/tsa.vue'
-import MediaPanel from '/@/components/MediaPanel.vue'
-import TaskPanel from '/@/components/task/TaskPanel.vue'
 import GMap from '/@/components/GMap.vue'
-import { EBizCode, ERouterName } from '/@/types'
-import { getRoot } from '/@/root'
+import { EBizCode } from '/@/types'
 import { useMyStore } from '/@/store'
 import { useConnectWebSocket } from '/@/hooks/use-connect-websocket'
 import EventBus from '/@/event-bus'
 
-const root = getRoot()
 const store = useMyStore()
 
 const messageHandler = async (payload: any) => {
@@ -129,6 +118,7 @@ const messageHandler = async (payload: any) => {
 // 监听ws 消息
 useConnectWebSocket(messageHandler)
 </script>
+
 <style lang="scss" scoped>
 @import '/@/styles/index.scss';
 
@@ -184,4 +174,4 @@ useConnectWebSocket(messageHandler)
     }
   }
 }
-</style>
+</style>