add：cesium show

src/views/index-dp.vue

@@ -4,7 +4,7 @@
     <div id="cesiumContainer" class="cesium-background"></div>
 
     <!-- 顶部标题栏 -->
-    <header class="top-title-bar">
+    <header class="top-title-bar" style="display: none">
       <h1 class="system-title">数据监测分析系统</h1>
       <div class="header-info">
         <div class="current-time">{{ currentTime }}</div>
@@ -16,7 +16,7 @@
     </header>
 
     <!-- 菜单栏 -->
-    <nav class="menu-bar">
+    <nav class="menu-bar" style="display: none">
       <ul class="menu-list">
         <li class="menu-item active">
           <span class="menu-icon home-icon"></span>
@@ -42,7 +42,7 @@
     </nav>
 
     <!-- 主内容区 -->
-    <main class="main-content">
+    <main class="main-content" style="display: none">
       <!-- 左侧数据模块 -->
       <div class="left-modules">
         <!-- 模块1：数据总览 -->
@@ -239,7 +239,32 @@ export default {
     return {
       currentTime: "",
       currentTimeShort: "",
+      // 版本号
+      version: "3.8.9",
+      // Cesium查看器实例
       viewer: null,
+      tileset: null,
+      personnelList: [
+        {
+          longitude: 121.70710830038986,
+          latitude: 36.853636402927986,
+          height: 100,
+          name: "张三",
+          status: "online", // 在线
+          avatar: "/static/images/avatars/zhangsan.png", // 头像
+        },
+        {
+          longitude: 121.70810830038986,
+          latitude: 36.854636402927986,
+          height: 100,
+          name: "李四",
+          status: "offline", // 离线
+          avatar: "/static/images/avatars/lisi.png", // 头像
+        },
+        // 其他人员数据...
+      ],
+      personModelInterval: null,
+      bgEntities: {}, // 所有的key都对应一个实体对象。而人员的实体对应的key不是数字。
     };
   },
   mounted() {
@@ -285,60 +310,154 @@ export default {
       });
     },
 
-    // 初始化Cesium地图
-    initCesium() {
+    /**
+     * 初始化Cesium地图
+     */
+    async initCesium() {
+      Cesium.Ion.defaultAccessToken =
+        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZDAxZGFhYy02MjJlLTRiNzktODNhZi00N2VjZGY0NTk4YmIiLCJpZCI6Mjc0NDAxLCJpYXQiOjE3NjMzNDYwNTR9.ZQW2DZ4KaMGbHuwrtIbyI6EdSSvgMJUHmmD74eZW7PQ";
       try {
-        // 设置Cesium基础路径
-        window.CESIUM_BASE_URL = "/cesium/";
-
-        // 创建Cesium视图
+        // 创建Cesium Viewer实例
         this.viewer = new Cesium.Viewer("cesiumContainer", {
+          // 设置地图提供者，这里使用默认的Bing Maps
           imageryProvider: new Cesium.BingMapsImageryProvider({
             url: "https://dev.virtualearth.net",
+            key: "AgcbDCAOb9zMfquaT4Z-MdHfx--9wUNrLRiiS7rIElFx8f-4lLulxZ0QnhqX5Lm6",
             mapStyle: Cesium.BingMapsStyle.AERIAL,
-            key: "your-bing-maps-key", // 请替换为实际的Bing Maps密钥
           }),
-          baseLayerPicker: false,
-          timeline: false,
-          animation: false,
-          fullscreenButton: false,
-          geocoder: false,
-          homeButton: false,
-          infoBox: false,
-          sceneModePicker: false,
-          navigationHelpButton: false,
+          // 配置是否显示各种控件
+          animation: false, // 动画控件
+          baseLayerPicker: true, // 底图选择器
+          fullscreenButton: true, // 全屏按钮
+          geocoder: true, // 地址搜索
+          homeButton: true, // 主页按钮
+          infoBox: true, // 信息框
+          sceneModePicker: true, // 场景模式选择器
+          selectionIndicator: true, // 选择指示器
+          timeline: false, // 时间线
+          navigationHelpButton: false, // 导航帮助按钮
           navigationInstructionsInitiallyVisible: false,
+          // 设置初始视图位置（中国区域）
+          center: Cesium.Cartesian3.fromDegrees(104.06, 30.67, 10000000),
         });
 
-        // 设置相机位置
-        this.viewer.camera.setView({
-          destination: Cesium.Cartesian3.fromDegrees(
-            116.397428,
-            39.90923,
-            10000.0
-          ),
+        // 设置相机视图
+        // this.viewer.camera.setView({
+        //   destination: Cesium.Cartesian3.fromDegrees(104.06, 30.67, 10000000), // 经度、纬度、高度
+        //   orientation: {
+        //     heading: Cesium.Math.toRadians(0.0), // 方向
+        //     pitch: Cesium.Math.toRadians(-90.0), // 倾斜角度
+        //     roll: 0.0, // 翻滚角度
+        //   },
+        // });
+
+        this.viewer.scene.camera.setView({
+          // 视角-环翠
+          duration: 1,
+          destination: {
+            x: -2739843.563038797,
+            y: 4357442.794747324,
+            z: 3880768.3292693933,
+          },
           orientation: {
-            heading: Cesium.Math.toRadians(0.0),
-            pitch: Cesium.Math.toRadians(-90.0),
-            roll: 0.0,
+            heading: 6.037000745578596,
+            pitch: -1.2499586064720978,
+            roll: 0.000005306352659495417,
           },
         });
 
-        // 禁用默认的点击事件
-        this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
-          Cesium.ScreenSpaceEventType.LEFT_CLICK
+        // 隐藏Cesium logo
+        this.viewer._cesiumWidget._creditContainer.style.display = "none";
+
+        const VUE_APP_GIS =
+          "http://192.168.2.11:8080/Apps/assets/media/gaoquyingji";
+        try {
+          const tileset = await Cesium.Cesium3DTileset.fromUrl(
+            VUE_APP_GIS + "/tiles/01_guanwei/tileset.json"
           );
+          this.viewer.scene.primitives.add(tileset);
+
+          console.log("倾斜摄影模型加载成功tileset", tileset);
+
+          if (tileset) {
+            this.tileset = tileset;
+            this.locateToTileset();
+          }
+        } catch (error) {
+          console.error(`加载倾斜摄影模型失败: ${error}`);
+        }
+
+        console.log("Cesium地图初始化成功");
       } catch (error) {
-        console.error("Cesium初始化失败:", error);
-        // 设置备用背景
-        const container = document.getElementById("cesiumContainer");
-        container.style.backgroundColor = "#001a33";
-        container.style.backgroundImage =
-          "linear-gradient(45deg, #001a33 25%, #00264d 25%, #00264d 50%, #001a33 50%, #001a33 75%, #00264d 75%, #00264d 100%)";
-        container.style.backgroundSize = "10px 10px";
+        console.error("Cesium地图初始化失败:", error);
       }
     },
+    /**
+     * 获取倾斜摄影模型的经纬度并将摄像机视角转向模型上方
+     */
+    locateToTileset() {
+      if (!this.tileset || !this.viewer) {
+        console.error("模型或视图未准备就绪");
+        return;
+      }
+
+      try {
+        // 获取模型的边界球
+        const boundingSphere = this.tileset.boundingSphere;
 
+        if (!boundingSphere) {
+          console.error("无法获取模型边界");
+          return;
+        }
+
+        // 获取模型中心点的笛卡尔坐标
+        const center = boundingSphere.center;
+
+        // 将笛卡尔坐标转换为经纬度坐标
+        const cartographic = Cesium.Cartographic.fromCartesian(center);
+        const longitude = Cesium.Math.toDegrees(cartographic.longitude);
+        const latitude = Cesium.Math.toDegrees(cartographic.latitude);
+        const height = cartographic.height;
+
+        console.log("倾斜摄影模型中心点经纬度:", {
+          longitude: longitude,
+          latitude: latitude,
+          height: height,
+        });
+
+        // 计算合适的观察距离 - 基于模型半径的倍数
+        const distance = boundingSphere.radius * 2.5; // 可以根据需要调整倍数
+
+        // 设置相机位置在模型上方
+        const cameraPosition = Cesium.Cartesian3.fromRadians(
+          cartographic.longitude,
+          cartographic.latitude,
+          height + distance // 相机高度为模型最高点加上观察距离
+        );
+
+        // 计算相机看向模型中心的方向
+        const heading = Cesium.Math.toRadians(0); // 方向角
+        const pitch = Cesium.Math.toRadians(-90); // 俯仰角 - 负数表示向下看
+        const roll = Cesium.Math.toRadians(0); // 翻滚角
+
+        // 使用flyTo方法平滑过渡到目标位置
+        this.viewer.camera.flyTo({
+          destination: cameraPosition,
+          orientation: {
+            heading: heading,
+            pitch: pitch,
+            roll: roll,
+          },
+          duration: 2, // 过渡时间2秒
+          complete: () => {
+            console.log("相机已成功定位到模型上方");
+            this.createPersonModel(); // 定位后创建人员模型
+          },
+        });
+      } catch (error) {
+        console.error("定位到模型上方失败:", error);
+      }
+    },
     // 绘制趋势图
     drawTrendChart() {
       const container = document.getElementById("trendChart");