0906

src/views/equipment/equipmentGPS.vue

@@ -1,17 +1,63 @@
 <template>
   <div class="p5" style="width: 100%; height: calc(100vh - 84px)" v-loading="loading">
+    <!-- 返回按钮区域 -->
+    <div style="position: absolute; top: 20px; left: 20px; z-index: 100; display: flex; gap: 10px">
+      <el-button type="primary" icon="ArrowLeft" @click="handleBack">返回</el-button>
+      <el-button type="success" icon="Play" @click="handleStart">开始</el-button>
+      <el-button type="warning" icon="Pause" @click="handleStop">停止</el-button>
+    </div>
     <div id="TrajectoryEarth" style="width: 100%; height: 100%"></div>
   </div>
 </template>
 
 <script setup name="equipmentGPS">
 import { ref, onMounted, onUnmounted } from 'vue';
+import { ElButton } from 'element-plus';
 import { ElMessage } from 'element-plus';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router'; // 补充导入useRouter
 import { getFootNote } from '@/api/equipment/index';
+import { ModelPathMover } from './index.js';
 
 const route = useRoute();
+const router = useRouter(); // 初始化router
 const loading = ref(true);
+let modelMover = null;
+
+// 返回上一页
+const handleBack = () => {
+  router.back();
+};
+
+// 开始轨迹运动
+const handleStart = () => {
+  if (modelMover && typeof modelMover.start === 'function') {
+    try {
+      modelMover.start();
+      ElMessage.success('轨迹已开始播放');
+    } catch (error) {
+      console.error('启动轨迹失败:', error);
+      ElMessage.error('启动轨迹失败');
+    }
+  } else {
+    ElMessage.warning('轨迹未初始化，请稍后再试');
+  }
+};
+
+// 停止轨迹运动
+const handleStop = () => {
+  if (modelMover && typeof modelMover.stop === 'function') {
+    try {
+      modelMover.stop();
+      ElMessage.success('轨迹已停止');
+    } catch (error) {
+      console.error('停止轨迹失败:', error);
+      ElMessage.error('停止轨迹失败');
+    }
+  } else {
+    ElMessage.warning('轨迹未初始化，请稍后再试');
+  }
+};
+
 let earthInstance = null;
 let data = [
   {
@@ -146,34 +192,39 @@ const renderRange = (data) => {
   }
 
   try {
-    const positions = data.map((point) => {
-      return Cesium.Cartesian3.fromDegrees(point.locLongitude, point.locLatitude, point.locAltitude || 0);
+    const positions = data.map((item) => {
+      return {
+        lon: item.locLongitude,
+        lat: item.locLatitude,
+        height: item.locAltitude || 0,
+        name: item.name || ''
+      };
     });
 
-    const entity = earthInstance.viewer.entities.add({
-      polyline: {
-        positions: positions,
-        width: 5,
-        material: Cesium.Color.RED,
-        clampToGround: true
-      }
+    modelMover = new ModelPathMover(window.Earth3.viewer, {
+      // modelUrl: './air.glb', // 模型URL
+      positions: positions,
+      speed: 50, // 移动速度
+      loop: true, // 循环运动
+      iconUrl: '/image/Foot.png', // 模型上方图标
+      baseHeight: 10 // 外部传入的统一高度（米）
     });
-
-    // 调整视角以适应轨迹
-    earthInstance.viewer.flyTo(entity);
+    window.modelMover = modelMover;
   } catch (err) {
     console.error('渲染轨迹失败:', err);
     ElMessage.error('渲染轨迹失败');
   }
 };
 
-//
 onMounted(() => {
   createEarth();
 });
 
-//
 onUnmounted(() => {
+  if (modelMover) {
+    modelMover.stop(); // 组件卸载时停止轨迹
+    modelMover = null;
+  }
   if (earthInstance) {
     earthInstance.destroy();
     earthInstance = null;