0905

src/views/equipment/equipmentGPS.vue

@@ -1,18 +1,185 @@
 <template>
-  <div class="text-center py-10">
-    <el-button type="primary" @click="handleGoBack">返回上一页</el-button>
+  <div class="p5" style="width: 100%; height: calc(100vh - 84px)" v-loading="loading">
+    <div id="TrajectoryEarth" style="width: 100%; height: 100%"></div>
   </div>
 </template>
 
-<script setup name="EmptyPage" lang="ts">
-import { useRouter } from 'vue-router';
+<script setup name="equipmentGPS">
+import { ref, onMounted, onUnmounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { useRoute } from 'vue-router';
+import { getFootNote } from '@/api/equipment/index';
 
-const router = useRouter();
+const route = useRoute();
+const loading = ref(true);
+let earthInstance = null;
+let data = [
+  {
+    'locLongitude': 106.45637808828741,
+    'locLatitude': 29.5597535878972,
+    'locAltitude': 0
+  }
+];
 
-// 返回上一页
-const handleGoBack = () => {
-  router.go(-1);
+// 获取轨迹数据
+const getTrajectoryData = async () => {
+  try {
+    // 从URL参数中获取clientId、projectId和userId
+    const { clientId, projectId, userId } = route.query;
+
+    if (!clientId || !projectId || !userId) {
+      ElMessage.warning('缺少必要参数，请检查传入的参数');
+      return;
+    }
+
+    loading.value = true;
+    const res = await getFootNote({ clientId, projectId, userId });
+
+    if (res && res.code === 200 && res.data && res.data.length > 0) {
+      data = res.data;
+      // 渲染轨迹
+      if (earthInstance && earthInstance.viewer) {
+        renderRange(data);
+      }
+    } else {
+      ElMessage.warning('暂无轨迹数据');
+    }
+  } catch (error) {
+    console.error('获取轨迹数据失败:', error);
+    ElMessage.error('获取轨迹数据失败，请稍后重试');
+  } finally {
+    loading.value = false;
+  }
 };
+
+// 创建地球
+const createEarth = () => {
+  if (!window.YJ) {
+    ElMessage.error('YJ库未加载，请检查依赖');
+    return;
+  }
+
+  window.YJ.on({
+    ws: true
+    // host: getIP(), // 资源所在服务器地址
+    // username: this.loginForm.username, // 用户名
+    // password: md5pass, // 密码
+  })
+    .then((res) => {
+      // 创建地球实例
+      earthInstance = new YJ.YJEarth('TrajectoryEarth');
+      window.Earth3 = earthInstance;
+
+      // 开启右键和左键点击事件
+      YJ.Global.openRightClick(window.Earth3);
+      YJ.Global.openLeftClick(window.Earth3);
+
+      // 设置初始视角
+      const view = {
+        position: {
+          lng: 102.03643298211526,
+          lat: 34.393586474501,
+          alt: 11298179.51993155
+        },
+        orientation: {
+          heading: 360,
+          pitch: -89.94481747201486,
+          roll: 0
+        }
+      };
+
+      YJ.Global.CesiumContainer(window.Earth3, {
+        compass: false //罗盘
+      });
+      // 加载底图
+      loadBaseMap(earthInstance.viewer);
+
+      // 可以取消注释以下代码来设置初始视角
+      // YJ.Global.flyTo(earthInstance, view);
+      // YJ.Global.setDefaultView(earthInstance.viewer, view)
+
+      // 地球创建完成后获取并渲染轨迹数据
+      getTrajectoryData();
+    })
+    .catch((err) => {
+      console.error('初始化地球失败:', err);
+      ElMessage.error('初始化地球失败，请稍后重试');
+    });
+};
+
+// 加载底图
+const loadBaseMap = (viewer) => {
+  if (!viewer || !Cesium) {
+    ElMessage.error('Cesium库未加载，请检查依赖');
+    return;
+  }
+
+  try {
+    // 创建瓦片提供器
+    const imageryProvider = new Cesium.UrlTemplateImageryProvider({
+      url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
+      fileExtension: 'png',
+      minimumLevel: 0,
+      maximumLevel: 18,
+      projection: Cesium.WebMercatorProjection,
+      credit: new Cesium.Credit('卫星图数据来源')
+    });
+
+    // 添加图层到视图
+    viewer.imageryLayers.addImageryProvider(imageryProvider);
+  } catch (err) {
+    console.error('加载底图失败:', err);
+    ElMessage.error('加载底图失败');
+  }
+};
+
+// 渲染轨迹
+const renderRange = (data) => {
+  if (!data || data.length === 0) {
+    ElMessage.warning('无轨迹数据可渲染');
+    return;
+  }
+
+  if (!earthInstance || !earthInstance.viewer) {
+    ElMessage.error('地球实例未初始化');
+    return;
+  }
+
+  try {
+    const positions = data.map((point) => {
+      return Cesium.Cartesian3.fromDegrees(point.locLongitude, point.locLatitude, point.locAltitude || 0);
+    });
+
+    const entity = earthInstance.viewer.entities.add({
+      polyline: {
+        positions: positions,
+        width: 5,
+        material: Cesium.Color.RED,
+        clampToGround: true
+      }
+    });
+
+    // 调整视角以适应轨迹
+    earthInstance.viewer.flyTo(entity);
+  } catch (err) {
+    console.error('渲染轨迹失败:', err);
+    ElMessage.error('渲染轨迹失败');
+  }
+};
+
+//
+onMounted(() => {
+  createEarth();
+});
+
+//
+onUnmounted(() => {
+  if (earthInstance) {
+    earthInstance.destroy();
+    earthInstance = null;
+    window.Earth3 = null;
+  }
+});
 </script>
 
-<style scoped></style>
+<style></style>