handleTimeChange

src/store/modules/app.js

@@ -3,8 +3,14 @@ const getDefaultState = () => {
 
         isCollapse: false, //是否展开
         dimension: 5, //地图维度
-        mouseLocation: null, //鼠标在地图的经纬度 
-        cameraHeightAndZoom: null //相机高度和地图层级
+        mouseLocation: { //鼠标在地图的经纬度 
+            longitude: null,
+            latitude: null
+        },
+        cameraHeightAndZoom: { //相机高度和地图层级
+            zoom: null,
+            height: null
+        }
 
     }
 }

src/views/simulation/index.vue

@@ -44,12 +44,12 @@ import screenfull from "screenfull";
 import fireController from "@/api/fireController.js";
 import { getToken } from "@/utils";
 import axios from "axios";
-import satelliteModel from '@/assets/model/satelite1.glb';
+import satelliteModel from 'public/static/model/satelite1.glb';
 import TimeLine from '@/components/TimeLine/index.vue';
-import missileModel from '@/assets/model/basic_missle.glb';
-import thaadModel from '@/assets/model/anti-aircraft_gun_fire_control_radar_vehicle.glb';
-import centerModel from '@/assets/model/the_white_house.glb';
-import radarModel from '@/assets/model/radar.glb'
+import missileModel from 'public/static/model/basic_missle.glb';
+import thaadModel from 'public/static/model/anti-aircraft_gun_fire_control_radar_vehicle.glb';
+import centerModel from 'public/static/model/the_white_house.glb';
+import radarModel from 'public/static/model/radar.glb'
 import { mapGetters } from "vuex";
 import CesiumNavigation from 'cesium-navigation-es6/viewerCesiumNavigationMixin'
 export default {
@@ -72,8 +72,8 @@ export default {
       satellite: [],
       center: [],
       move_data: {},
-      viewer2D: null,
-      viewer3D: null,
+      _viewer2D: null,
+      _viewer3D: null,
       mousevalue: null,
       // 选中的点
       selectedMarker: null,
@@ -122,7 +122,7 @@ export default {
       },
     },
   },
-  created() {
+  activated() {
     this.getData();
 
   },
@@ -131,61 +131,7 @@ export default {
     // this.pointMove();
     // this.startWebSocket();
   },
-  beforeDestroy() {
-    // 在组件销毁前，关闭WebSocket连接
-    if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
-      this.websocket.close();
-    }
-    this.viewer2D.clock.onTick.removeEventListener(this.handleTimeChange);
-    this.viewer3D.clock.onTick.removeEventListener(this.handleTimeChange);
-  },
   methods: {
-    startWebSocket() {
-      this.websocket = new WebSocket('ws://localhost:8765');
-
-      this.websocket.onopen = () => {
-        console.log('WebSocket连接已建立！');
-
-      };
-
-      this.websocket.onmessage = (event) => {
-        // 处理从WebSocket服务器接收到的消息
-        const data = JSON.parse(event.data);
-        console.log('收到消息：', data);
-
-
-        // 在这里处理接收到的数据，更新Vue组件的数据等操作
-      };
-
-      this.websocket.onerror = (error) => {
-        console.error('WebSocket错误：', error);
-      };
-
-      this.websocket.onclose = () => {
-        console.log('WebSocket连接已关闭！');
-      };
-    },
-    async saveJson() {
-      if (this.save) {
-        const jsonData = JSON.stringify(this.jsonData);
-        const blob = new Blob([jsonData], { type: 'application/json' });
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = this.jsonData.xdname + '.json';
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-      }
-      else {
-        this.$message("请先导入想定文件！！！")
-      }
-
-
-    },
-    changeItemPosition(data) {
-
-    },
     async getJson(row) {
       let redunit = [];
       let blueunit = [];
@@ -323,7 +269,7 @@ export default {
       });
     },
     cesiumInit() {
-      this.viewer2D = new this.Cesium.Viewer("2DcesiumContainer", {
+      this.$data._viewer2D = new this.Cesium.Viewer("2DcesiumContainer", {
         sceneMode: this.Cesium.SceneMode.SCENE2D,
         animation: true, // 是否显示时间轴动画
         baseLayerPicker: false,
@@ -344,7 +290,7 @@ export default {
         })
       });
 
-      this.viewer3D = new this.Cesium.Viewer("3DcesiumContainer", {
+      this.$data._viewer3D = new this.Cesium.Viewer("3DcesiumContainer", {
         animation: true, // 是否显示时间轴动画
         baseLayerPicker: false,
         homeButton: false,
@@ -384,9 +330,9 @@ export default {
           })
       });
 
-      this.viewer3D._cesiumWidget._creditContainer.style.display = "none";
-      this.viewer2D._cesiumWidget._creditContainer.style.display = "none";
-      this.viewer3D.camera.setView({
+      this.$data._viewer3D._cesiumWidget._creditContainer.style.display = "none";
+      this.$data._viewer2D._cesiumWidget._creditContainer.style.display = "none";
+      this.$data._viewer3D.camera.setView({
         destination: new this.Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000)
         // 方向，俯视和仰视的视角
         // orientation:{
@@ -394,7 +340,7 @@ export default {
         //   pitch: this.Cesium.Math.toRadians(-45) ,//设置俯仰角度为-45度
         // }
       });
-      this.viewer2D.camera.setView({
+      this.$data._viewer2D.camera.setView({
         destination: new this.Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000)
         // 方向，俯视和仰视的视角
         // orientation:{
@@ -403,34 +349,34 @@ export default {
         // }
       });
       // this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 1500000;  //相机高度的最大值
-      this.viewer2D.camera.percentageChanged = 0.01;
-      this.viewer2D.camera.changed.addEventListener(this.sync); //地图移动事件
-      this.viewer3D.camera.percentageChanged = 0.01;
-      this.viewer3D.camera.changed.addEventListener(this.sync); //地图移动事件
-      this.viewer2D.camera.moveEnd.addEventListener(this.getCammeraHeightAndZoom)  //地图缩放事件
-      this.viewer3D.camera.moveEnd.addEventListener(this.getCammeraHeightAndZoom)  //地图缩放事件
-      this.handler2D = new this.Cesium.ScreenSpaceEventHandler(this.viewer2D.scene.canvas);
-      this.handler3D = new this.Cesium.ScreenSpaceEventHandler(this.viewer3D.scene.canvas);
+      this.$data._viewer2D.camera.percentageChanged = 0.01;
+      this.$data._viewer2D.camera.changed.addEventListener(this.sync); //地图移动事件
+      this.$data._viewer3D.camera.percentageChanged = 0.01;
+      this.$data._viewer3D.camera.changed.addEventListener(this.sync); //地图移动事件
+      this.$data._viewer2D.camera.moveEnd.addEventListener(this.getCammeraHeightAndZoom)  //地图缩放事件
+      this.$data._viewer3D.camera.moveEnd.addEventListener(this.getCammeraHeightAndZoom)  //地图缩放事件
+      this.handler2D = new this.Cesium.ScreenSpaceEventHandler(this.$data._viewer2D.scene.canvas);
+      this.handler3D = new this.Cesium.ScreenSpaceEventHandler(this.$data._viewer3D.scene.canvas);
       //设置导航组件
-      new CesiumNavigation(this.viewer2D, this.mapNavOptions);
-      new CesiumNavigation(this.viewer3D, this.mapNavOptions);
+      new CesiumNavigation(this.$data._viewer2D, this.mapNavOptions);
+      new CesiumNavigation(this.$data._viewer3D, this.mapNavOptions);
     },
     sync() {
       if (this.mousevalue == "3D") {
         // 三维地图中心点
         let center = new this.Cesium.Cartesian2(
-          Math.floor(this.viewer3D.canvas.clientWidth / 2),
-          Math.floor(this.viewer3D.canvas.clientHeight / 2)
+          Math.floor(this.$data._viewer3D.canvas.clientWidth / 2),
+          Math.floor(this.$data._viewer3D.canvas.clientHeight / 2)
         );
         // 转为世界坐标系
-        let position = this.viewer3D.scene.camera.pickEllipsoid(center);
+        let position = this.$data._viewer3D.scene.camera.pickEllipsoid(center);
         // 判断中心点是否在椭球体上
         if (this.Cesium.defined(position)) {
           // 获取三维地图中心点与相机之间的距离
-          let distance = this.Cesium.Cartesian3.distance(position, this.viewer3D.scene.camera.positionWC);
+          let distance = this.Cesium.Cartesian3.distance(position, this.$data._viewer3D.scene.camera.positionWC);
           position = this.convertWorldToCartographic(position);
           // 更新二维地图
-          this.viewer2D.scene.camera.setView({
+          this.$data._viewer2D.scene.camera.setView({
             destination: new this.Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, distance)
           });
         }
@@ -438,18 +384,18 @@ export default {
       if (this.mousevalue == "2D") {
         // 二维地图中心点
         let center = new this.Cesium.Cartesian2(
-          Math.floor(this.viewer2D.canvas.clientWidth / 2),
-          Math.floor(this.viewer2D.canvas.clientHeight / 2)
+          Math.floor(this.$data._viewer2D.canvas.clientWidth / 2),
+          Math.floor(this.$data._viewer2D.canvas.clientHeight / 2)
         );
         // 转为世界坐标系
-        let position = this.viewer2D.scene.camera.pickEllipsoid(center);
+        let position = this.$data._viewer2D.scene.camera.pickEllipsoid(center);
         // 判断中心点是否在椭球体上
         if (this.Cesium.defined(position)) {
           // 获取三维地图中心点与相机之间的距离
-          let distance = this.viewer2D.scene.camera.positionCartographic.height;
+          let distance = this.$data._viewer2D.scene.camera.positionCartographic.height;
           position = this.convertWorldToCartographic(position);
           // 更新三维地图
-          this.viewer3D.scene.camera.setView({
+          this.$data._viewer3D.scene.camera.setView({
             destination: new this.Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, distance)
           });
         }
@@ -457,7 +403,7 @@ export default {
     },
     // 将世界坐标系转换为经纬度坐标系
     convertWorldToCartographic(worldPosition) {
-      const ellipsoid = this.viewer2D.scene.globe.ellipsoid;
+      const ellipsoid = this.$data._viewer2D.scene.globe.ellipsoid;
       const cartographic = ellipsoid.cartesianToCartographic(worldPosition);
       const longitude = this.Cesium.Math.toDegrees(cartographic.longitude);
       const latitude = this.Cesium.Math.toDegrees(cartographic.latitude);
@@ -482,7 +428,7 @@ export default {
     },
     /* 获取camera中心点坐标 */
     getCenterPosition(is3D = false) {
-      let viewer = is3D ? this.viewer3D : this.viewer2D;
+      let viewer = is3D ? this.$data._viewer3D : this.$data._viewer2D;
       let result = viewer.camera.pickEllipsoid(
         new this.Cesium.Cartesian2(viewer.canvas.clientWidth / 2, viewer.canvas.clientHeight / 2)
       );
@@ -499,7 +445,7 @@ export default {
     /* 地图放大 */
     big() {
       let { lon, lat, height } = this.getCenterPosition(this.dimension === 3);
-      let viewer = (this.dimension === 3 || this.dimension === 5) ? this.viewer3D : this.viewer2D;
+      let viewer = (this.dimension === 3 || this.dimension === 5) ? this.$data._viewer3D : this.$data._viewer2D;
       // 镜头拉进
       viewer.camera.flyTo({
         destination: this.Cesium.Cartesian3.fromDegrees(lon, lat, height / 1.8),
@@ -509,7 +455,7 @@ export default {
     /* 地图缩小 */
     small() {
       let { lon, lat, height } = this.getCenterPosition(this.dimension === 3);
-      let viewer = (this.dimension === 3 || this.dimension === 5) ? this.viewer3D : this.viewer2D;
+      let viewer = (this.dimension === 3 || this.dimension === 5) ? this.$data._viewer3D : this.$data._viewer2D;
       // 镜头远离
       viewer.camera.flyTo({
         destination: this.Cesium.Cartesian3.fromDegrees(lon, lat, height * 1.2),
@@ -517,7 +463,7 @@ export default {
       });
     },
     home() {
-      let viewer = (this.dimension === 3 || this.dimension === 5) ? this.viewer3D : this.viewer2D;
+      let viewer = (this.dimension === 3 || this.dimension === 5) ? this.$data._viewer3D : this.$data._viewer2D;
       viewer.camera.flyTo({
         destination: this.Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000),
         duration: 2.0
@@ -557,7 +503,7 @@ export default {
       return Math.round(D + (A - D) / (1 + Math.pow(height / C, B)));
     },
     getCammeraHeightAndZoom() {
-      let viewer = (this.dimension === 3 || this.dimension === 5) ? this.viewer3D : this.viewer2D;
+      let viewer = (this.dimension === 3 || this.dimension === 5) ? this.$data._viewer3D : this.$data._viewer2D;
       //获取当前相机高度 
       let height = viewer.camera.positionCartographic.height;
       let zoom = this.heightToZoom(height);
@@ -600,7 +546,7 @@ export default {
         color = 'Blue'
         modelUrl = satelliteModel
       }
-      this.viewer2D.entities.add({
+      this.$data._viewer2D.entities.add({
         id: this.id,
         position: position,
         point: {
@@ -619,7 +565,7 @@ export default {
           pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
         }
       });
-      this.viewer3D.entities.add({
+      this.$data._viewer3D.entities.add({
         id: this.id,
         position: position,
         point: {
@@ -646,7 +592,7 @@ export default {
     },
     // 从鼠标点击事件获取坐标
     getCoordinatesFromEvent(event) {
-      let viewer = this.mousevalue === "2D" ? this.viewer2D : this.viewer3D;
+      let viewer = this.mousevalue === "2D" ? this.$data._viewer2D : this.$data._viewer3D;
       let clickPosition;
       if (this.dimension === 5 && this.mousevalue === "3D") {
         clickPosition = new this.Cesium.Cartesian2(event.clientX - 1080, event.clientY - 160);
@@ -673,7 +619,7 @@ export default {
       );
 
       // 将点1和点2之间的连线添加到Viewer中
-      this.viewer2D.entities.add({
+      this.$data._viewer2D.entities.add({
         polyline: {
           positions: [position1, position2],
           width: 5, // 设置线的宽度
@@ -681,7 +627,7 @@ export default {
           followSurface: false // 设置为false，使连线保持在固定的高度，不会贴地显示
         }
       });
-      this.viewer3D.entities.add({
+      this.$data._viewer3D.entities.add({
         polyline: {
           positions: [position1, position2],
           width: 5, // 设置线的宽度
@@ -715,28 +661,28 @@ export default {
       start = this.Cesium.JulianDate.addHours(start, 8, new this.Cesium.JulianDate());
       stop = this.Cesium.JulianDate.addHours(stop, 8, new this.Cesium.JulianDate());
       // 设置时钟开始时间
-      this.viewer2D.clock.startTime = start.clone();
-      this.viewer3D.clock.startTime = start.clone();
+      this.$data._viewer2D.clock.startTime = start.clone();
+      this.$data._viewer3D.clock.startTime = start.clone();
       // 设置时钟当前时间
-      this.viewer2D.clock.currentTime = start.clone();
-      this.viewer3D.clock.currentTime = start.clone();
+      this.$data._viewer2D.clock.currentTime = start.clone();
+      this.$data._viewer3D.clock.currentTime = start.clone();
       // 设置时钟结束时间
-      this.viewer2D.clock.stopTime = stop.clone();
-      this.viewer3D.clock.stopTime = stop.clone();
+      this.$data._viewer2D.clock.stopTime = stop.clone();
+      this.$data._viewer3D.clock.stopTime = stop.clone();
       // 时间速率，数字越大时间过的越快，设置1好像是和实际时间一样
-      this.viewer2D.clock.multiplier = stepTime;
-      this.viewer3D.clock.multiplier = stepTime;
+      this.$data._viewer2D.clock.multiplier = stepTime;
+      this.$data._viewer3D.clock.multiplier = stepTime;
       // 时间轴绑定到viewer上去
-      this.viewer2D.timeline.zoomTo(start, stop);
-      this.viewer3D.timeline.zoomTo(start, stop);
+      this.$data._viewer2D.timeline.zoomTo(start, stop);
+      this.$data._viewer3D.timeline.zoomTo(start, stop);
       // 循环执行，到达终止时间，重新从起点时间开始
-      this.viewer2D.clock.clockRange = this.Cesium.ClockRange.LOOP_STOP;
-      this.viewer3D.clock.clockRange = this.Cesium.ClockRange.LOOP_STOP;
-      this.viewer2D.clock.onTick.addEventListener(clock => {
+      this.$data._viewer2D.clock.clockRange = this.Cesium.ClockRange.LOOP_STOP;
+      this.$data._viewer3D.clock.clockRange = this.Cesium.ClockRange.LOOP_STOP;
+      this.$data._viewer2D.clock.onTick.addEventListener(clock => {
         const currentTime = clock.currentTime; // 获取当前时间轴的时间
         const elapsedTime = this.Cesium.JulianDate.secondsDifference(
           currentTime,
-          this.viewer2D.clock.startTime
+          this.$data._viewer2D.clock.startTime
         ); // 获取从起始时间到当前时间的秒数
         if (parseInt(elapsedTime) % stepTime === 0 && elapsedTime != 0) {
           console.log('elapsedTime :>> ', elapsedTime);
@@ -744,11 +690,11 @@ export default {
           this.requestDataAndUpdateModel2D(startTime, elapsedTime);
         }
       });
-      this.viewer3D.clock.onTick.addEventListener(clock => {
+      this.$data._viewer3D.clock.onTick.addEventListener(clock => {
         const currentTime = clock.currentTime; // 获取当前时间轴的时间
         const elapsedTime = this.Cesium.JulianDate.secondsDifference(
           currentTime,
-          this.viewer3D.clock.startTime
+          this.$data._viewer3D.clock.startTime
         ); // 获取从起始时间到当前时间的秒数
         if (parseInt(elapsedTime) % stepTime === 0 && elapsedTime != 0) {
           console.log('elapsedTime :>> ', elapsedTime);
@@ -789,7 +735,7 @@ export default {
               let z = parseFloat(data[key].z) * 1000
               //终点位置
               let position = new this.Cesium.Cartesian3(x, y, z);
-              this.viewer2D.entities.add({
+              this.$data._viewer2D.entities.add({
                 id: this.id,
                 position: position,
                 point: {
@@ -808,7 +754,7 @@ export default {
                   pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
                 }
               });
-              this.viewer3D.entities.add({
+              this.$data._viewer3D.entities.add({
                 id: this.id,
                 position: position,
                 point: {
@@ -851,11 +797,11 @@ export default {
           //依次更新每个模型位置
           for (let i = 0; i < this.nameIdList.length; i++) {
             if (data[this.nameIdList[i].name] != null && data[this.nameIdList[i].name] != undefined) {
-              this.modelEntityMoveByIDAndLocation(this.viewer2D, this.nameIdList[i].id, data[this.nameIdList[i].name].x, data[this.nameIdList[i].name].y, data[this.nameIdList[i].name].z)
+              this.modelEntityMoveByIDAndLocation(this.$data._viewer2D, this.nameIdList[i].id, data[this.nameIdList[i].name].x, data[this.nameIdList[i].name].y, data[this.nameIdList[i].name].z)
             }
           }
           //更新模型位置
-          // this.modelEntityMoveByIDAndLocation(this.viewer2D,"1654426964397658112",res.data[1].data.W1.x,res.data[1].data.W1.y,res.data[1].data.W1.z)
+          // this.modelEntityMoveByIDAndLocation(this.$data._viewer2D,"1654426964397658112",res.data[1].data.W1.x,res.data[1].data.W1.y,res.data[1].data.W1.z)
         })
 
     },
@@ -874,11 +820,11 @@ export default {
           for (let i = 0; i < this.nameIdList.length; i++) {
             if (this.nameIdList[i].name in data) {
               console.log(' 开始移动' + this.nameIdList[i].name);
-              this.modelEntityMoveByIDAndLocation(this.viewer3D, this.nameIdList[i].id, data[this.nameIdList[i].name].x, data[this.nameIdList[i].name].y, data[this.nameIdList[i].name].z)
+              this.modelEntityMoveByIDAndLocation(this.$data._viewer3D, this.nameIdList[i].id, data[this.nameIdList[i].name].x, data[this.nameIdList[i].name].y, data[this.nameIdList[i].name].z)
             }
           }
           //更新模型位置
-          //  this.modelEntityMoveByIDAndLocation(this.viewer3D,viewer,"1654426964397658112",res.data[1].data.W1.x,res.data[1].data.W1.y,res.data[1].data.W1.z)  
+          //  this.modelEntityMoveByIDAndLocation(this.$data._viewer3D,viewer,"1654426964397658112",res.data[1].data.W1.x,res.data[1].data.W1.y,res.data[1].data.W1.z)  
         })
 
     },

src/views/situation/index.vue

@@ -65,11 +65,11 @@ import fireController from "@/api/fireController.js";
 import { getToken } from "@/utils";
 import axios from "axios";
 import Model from "@/views/situation/Model.vue";
-import satelliteModel from '@/assets/model/satelite.glb';
-import missileModel from '@/assets/model/basic_missle.glb';
-import thaadModel from '@/assets/model/anti-aircraft_gun_fire_control_radar_vehicle.glb';
-import centerModel from '@/assets/model/the_white_house.glb';
-import radarModel from '@/assets/model/radar.glb'
+import satelliteModel from 'public/static/model/satelite.glb';
+import missileModel from 'public/static/model/basic_missle.glb';
+import thaadModel from 'public/static/model/anti-aircraft_gun_fire_control_radar_vehicle.glb';
+import centerModel from 'public/static/model/the_white_house.glb';
+import radarModel from 'public/static/model/radar.glb'
 import { mapGetters } from "vuex";
 import CesiumNavigation from 'cesium-navigation-es6/viewerCesiumNavigationMixin'
 export default {
@@ -86,14 +86,13 @@ export default {
       save : false,
       situation: [],
       nameIdList:[],
-      websocket: null,
       leftwidth: 12,
       unit: [],
       satellite: [],
       center: [],
       move_data: {},
-      viewer2D: null,
-      viewer3D: null,
+      _viewer2D: null,
+      _viewer3D: null,
       mousevalue: null,
       // 选中的点
       selectedMarker: null,
@@ -140,47 +139,14 @@ export default {
       },
     },
   },
-  created() {
+  activated() {
     this.getData();
   },
   mounted() {
     this.cesiumInit();
     this.pointMove();
-    // this.startWebSocket();
-  },
-  beforeDestroy() {
-    // 在组件销毁前，关闭WebSocket连接
-    if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
-      this.websocket.close();
-    }
-
   },
   methods: {
-    startWebSocket() {
-      this.websocket = new WebSocket('ws://localhost:8765');
-
-      this.websocket.onopen = () => {
-        console.log('WebSocket连接已建立！');
-
-      };
-
-      this.websocket.onmessage = (event) => {
-        // 处理从WebSocket服务器接收到的消息
-        const data = JSON.parse(event.data);
-        console.log('收到消息：', data);
-
-
-        // 在这里处理接收到的数据，更新Vue组件的数据等操作
-      };
-
-      this.websocket.onerror = (error) => {
-        console.error('WebSocket错误：', error);
-      };
-
-      this.websocket.onclose = () => {
-        console.log('WebSocket连接已关闭！');
-      };
-    },
     async saveJson() {
       if(this.save){
         const jsonData = JSON.stringify(this.jsonData);
@@ -474,7 +440,7 @@ export default {
       });
     },
     cesiumInit() {
-      this.viewer2D = new this.Cesium.Viewer("2DcesiumContainer", {
+      this.$data._viewer2D = new this.Cesium.Viewer("2DcesiumContainer", {
         sceneMode: this.Cesium.SceneMode.SCENE2D,
         animation: false, // 是否显示时间轴动画
         baseLayerPicker: false,
@@ -495,7 +461,7 @@ export default {
         })
       });
 
-      this.viewer3D = new this.Cesium.Viewer("3DcesiumContainer", {
+      this.$data._viewer3D = new this.Cesium.Viewer("3DcesiumContainer", {
         animation: false, // 是否显示时间轴动画
         baseLayerPicker: false,
         homeButton: false,
@@ -535,9 +501,9 @@ export default {
           })
       });
 
-      this.viewer3D._cesiumWidget._creditContainer.style.display = "none";
-      this.viewer2D._cesiumWidget._creditContainer.style.display = "none";
-      this.viewer3D.camera.setView({
+      this.$data._viewer3D._cesiumWidget._creditContainer.style.display = "none";
+      this.$data._viewer2D._cesiumWidget._creditContainer.style.display = "none";
+      this.$data._viewer3D.camera.setView({
         destination: new this.Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000)
         // 方向，俯视和仰视的视角
         // orientation:{
@@ -545,7 +511,7 @@ export default {
         //   pitch: this.Cesium.Math.toRadians(-45) ,//设置俯仰角度为-45度
         // }
       });
-      this.viewer2D.camera.setView({
+      this.$data._viewer2D.camera.setView({
         destination: new this.Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000)
         // 方向，俯视和仰视的视角
         // orientation:{
@@ -554,34 +520,34 @@ export default {
         // }
       });
       // this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 1500000;  //相机高度的最大值
-      this.viewer2D.camera.percentageChanged = 0.01;
-      this.viewer2D.camera.changed.addEventListener(this.sync); //地图移动事件
-      this.viewer3D.camera.percentageChanged = 0.01;
-      this.viewer3D.camera.changed.addEventListener(this.sync); //地图移动事件
-      this.viewer2D.camera.moveEnd.addEventListener(this.getCammeraHeightAndZoom)  //地图缩放事件
-      this.viewer3D.camera.moveEnd.addEventListener(this.getCammeraHeightAndZoom)  //地图缩放事件
-      this.handler2D = new this.Cesium.ScreenSpaceEventHandler(this.viewer2D.scene.canvas);
-      this.handler3D = new this.Cesium.ScreenSpaceEventHandler(this.viewer3D.scene.canvas);
+      this.$data._viewer2D.camera.percentageChanged = 0.01;
+      this.$data._viewer2D.camera.changed.addEventListener(this.sync); //地图移动事件
+      this.$data._viewer3D.camera.percentageChanged = 0.01;
+      this.$data._viewer3D.camera.changed.addEventListener(this.sync); //地图移动事件
+      this.$data._viewer2D.camera.moveEnd.addEventListener(this.getCammeraHeightAndZoom)  //地图缩放事件
+      this.$data._viewer3D.camera.moveEnd.addEventListener(this.getCammeraHeightAndZoom)  //地图缩放事件
+      this.handler2D = new this.Cesium.ScreenSpaceEventHandler(this.$data._viewer2D.scene.canvas);
+      this.handler3D = new this.Cesium.ScreenSpaceEventHandler(this.$data._viewer3D.scene.canvas);
       //设置导航组件
-      new CesiumNavigation(this.viewer2D, this.mapNavOptions);
-      new CesiumNavigation(this.viewer3D, this.mapNavOptions);
+      new CesiumNavigation(this.$data._viewer2D, this.mapNavOptions);
+      new CesiumNavigation(this.$data._viewer3D, this.mapNavOptions);
     },
     sync() {
       if (this.mousevalue == "3D") {
         // 三维地图中心点
         let center = new this.Cesium.Cartesian2(
-          Math.floor(this.viewer3D.canvas.clientWidth / 2),
-          Math.floor(this.viewer3D.canvas.clientHeight / 2)
+          Math.floor(this.$data._viewer3D.canvas.clientWidth / 2),
+          Math.floor(this.$data._viewer3D.canvas.clientHeight / 2)
         );
         // 转为世界坐标系
-        let position = this.viewer3D.scene.camera.pickEllipsoid(center);
+        let position = this.$data._viewer3D.scene.camera.pickEllipsoid(center);
         // 判断中心点是否在椭球体上
         if (this.Cesium.defined(position)) {
           // 获取三维地图中心点与相机之间的距离
-          let distance = this.Cesium.Cartesian3.distance(position, this.viewer3D.scene.camera.positionWC);
+          let distance = this.Cesium.Cartesian3.distance(position, this.$data._viewer3D.scene.camera.positionWC);
           position = this.convertWorldToCartographic(position);
           // 更新二维地图
-          this.viewer2D.scene.camera.setView({
+          this.$data._viewer2D.scene.camera.setView({
             destination: new this.Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, distance)
           });
         }
@@ -589,18 +555,18 @@ export default {
       if (this.mousevalue == "2D") {
         // 二维地图中心点
         let center = new this.Cesium.Cartesian2(
-          Math.floor(this.viewer2D.canvas.clientWidth / 2),
-          Math.floor(this.viewer2D.canvas.clientHeight / 2)
+          Math.floor(this.$data._viewer2D.canvas.clientWidth / 2),
+          Math.floor(this.$data._viewer2D.canvas.clientHeight / 2)
         );
         // 转为世界坐标系
-        let position = this.viewer2D.scene.camera.pickEllipsoid(center);
+        let position = this.$data._viewer2D.scene.camera.pickEllipsoid(center);
         // 判断中心点是否在椭球体上
         if (this.Cesium.defined(position)) {
           // 获取三维地图中心点与相机之间的距离
-          let distance = this.viewer2D.scene.camera.positionCartographic.height;
+          let distance = this.$data._viewer2D.scene.camera.positionCartographic.height;
           position = this.convertWorldToCartographic(position);
           // 更新三维地图
-          this.viewer3D.scene.camera.setView({
+          this.$data._viewer3D.scene.camera.setView({
             destination: new this.Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, distance)
           });
         }
@@ -608,7 +574,7 @@ export default {
     },
     // 将世界坐标系转换为经纬度坐标系
     convertWorldToCartographic(worldPosition) {
-      const ellipsoid = this.viewer2D.scene.globe.ellipsoid;
+      const ellipsoid = this.$data._viewer2D.scene.globe.ellipsoid;
       const cartographic = ellipsoid.cartesianToCartographic(worldPosition);
       const longitude = this.Cesium.Math.toDegrees(cartographic.longitude);
       const latitude = this.Cesium.Math.toDegrees(cartographic.latitude);
@@ -633,7 +599,7 @@ export default {
     },
     /* 获取camera中心点坐标 */
     getCenterPosition(is3D = false) {
-      let viewer = is3D ? this.viewer3D : this.viewer2D;
+      let viewer = is3D ? this.$data._viewer3D : this.$data._viewer2D;
       let result = viewer.camera.pickEllipsoid(
         new this.Cesium.Cartesian2(viewer.canvas.clientWidth / 2, viewer.canvas.clientHeight / 2)
       );
@@ -650,7 +616,7 @@ export default {
     /* 地图放大 */
     big() {
       let { lon, lat, height } = this.getCenterPosition(this.dimension === 3);
-      let viewer = (this.dimension === 3 || this.dimension === 5)? this.viewer3D : this.viewer2D;
+      let viewer = (this.dimension === 3 || this.dimension === 5)? this.$data._viewer3D : this.$data._viewer2D;
       // 镜头拉进
       viewer.camera.flyTo({
         destination: this.Cesium.Cartesian3.fromDegrees(lon, lat, height / 1.8),
@@ -660,7 +626,7 @@ export default {
     /* 地图缩小 */
     small() {
       let { lon, lat, height } = this.getCenterPosition(this.dimension === 3);
-      let viewer = (this.dimension === 3 || this.dimension === 5) ? this.viewer3D : this.viewer2D;
+      let viewer = (this.dimension === 3 || this.dimension === 5) ? this.$data._viewer3D : this.$data._viewer2D;
       // 镜头远离
       viewer.camera.flyTo({
         destination: this.Cesium.Cartesian3.fromDegrees(lon, lat, height * 1.2),
@@ -668,7 +634,7 @@ export default {
       });
     },
     home() {
-      let viewer = (this.dimension === 3 || this.dimension === 5)? this.viewer3D : this.viewer2D;
+      let viewer = (this.dimension === 3 || this.dimension === 5)? this.$data._viewer3D : this.$data._viewer2D;
       viewer.camera.flyTo({
         destination: this.Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000),
         duration: 2.0
@@ -708,7 +674,7 @@ export default {
       return Math.round(D+(A-D)/(1+Math.pow(height/C, B))); 
     },
     getCammeraHeightAndZoom(){
-      let viewer = (this.dimension === 3 || this.dimension === 5) ? this.viewer3D : this.viewer2D;
+      let viewer = (this.dimension === 3 || this.dimension === 5) ? this.$data._viewer3D : this.$data._viewer2D;
       //获取当前相机高度 
       let height = viewer.camera.positionCartographic.height; 
       let zoom = this.heightToZoom(height); 
@@ -740,7 +706,7 @@ export default {
     markLocation(latitude, longitude) {
       const position = this.Cesium.Cartesian3.fromDegrees(longitude, latitude);
       console.log('position :>> ', position);
-      this.viewer2D.entities.add({
+      this.$data._viewer2D.entities.add({
         id: this.id,
         position: position,
         // point: {
@@ -759,7 +725,7 @@ export default {
           pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
         }
       });
-      this.viewer3D.entities.add({
+      this.$data._viewer3D.entities.add({
         id: this.id,
         position: position,
         // point: {
@@ -797,7 +763,7 @@ export default {
         color = 'Blue'
         modelUrl = centerModel
       }
-      this.viewer2D.entities.add({
+      this.$data._viewer2D.entities.add({
         id: this.id,
         position: position,
         point: {
@@ -816,7 +782,7 @@ export default {
           pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
         }
       });
-      this.viewer3D.entities.add({
+      this.$data._viewer3D.entities.add({
         id: this.id,
         position: position,
         point: {
@@ -840,11 +806,11 @@ export default {
         name: name
       })
       this.id++;
-      console.log('this.viewer3D.entities :>> ', this.viewer3D.entities);
+      console.log('this.$data._viewer3D.entities :>> ', this.$data._viewer3D.entities);
     },
     // 从鼠标点击事件获取坐标
     getCoordinatesFromEvent(event) {
-      let viewer = this.mousevalue === "2D" ? this.viewer2D : this.viewer3D;
+      let viewer = this.mousevalue === "2D" ? this.$data._viewer2D : this.$data._viewer3D;
       let clickPosition;
       if (this.dimension === 5 && this.mousevalue === "3D") {
         clickPosition = new this.Cesium.Cartesian2(event.clientX - 1080, event.clientY - 160);
@@ -871,7 +837,7 @@ export default {
       );
 
       // 将点1和点2之间的连线添加到Viewer中
-      this.viewer2D.entities.add({
+      this.$data._viewer2D.entities.add({
         polyline: {
           positions: [position1, position2],
           width: 5, // 设置线的宽度
@@ -879,7 +845,7 @@ export default {
           followSurface: false // 设置为false，使连线保持在固定的高度，不会贴地显示
         }
       });
-      this.viewer3D.entities.add({
+      this.$data._viewer3D.entities.add({
         polyline: {
           positions: [position1, position2],
           width: 5, // 设置线的宽度
@@ -894,9 +860,9 @@ export default {
       this.handler2D.setInputAction((event) => {
         if (!this.selectedMarker && !this.modeltooltip) {
           const screenPosition = new this.Cesium.Cartesian2(event.position.x, event.position.y);
-          const pickedEntity = this.viewer2D.scene.pick(screenPosition);
+          const pickedEntity = this.$data._viewer2D.scene.pick(screenPosition);
           if (this.Cesium.defined(pickedEntity)) {
-            for (const entity of this.viewer2D.entities.values) {
+            for (const entity of this.$data._viewer2D.entities.values) {
               if (pickedEntity.id.id === entity.id) {
                 this.selectedMarker = entity;
                 this.oldPosition = pickedEntity.id.position;
@@ -907,8 +873,8 @@ export default {
           }
         } else if (this.selectedMarker && this.modeltooltip === "右键取消") {
           // const material = new this.Cesium.PolylineArrowMaterialProperty(this.selectedMarker.point.color);
-          console.log('this.viewer2D.entities.values :>> ', this.viewer2D.entities.getById(this.selectedMarker.id).position._value);
-          let position = this.convertWorldToCartographic(this.viewer2D.entities.getById(this.selectedMarker.id).position._value)
+          console.log('this.$data._viewer2D.entities.values :>> ', this.$data._viewer2D.entities.getById(this.selectedMarker.id).position._value);
+          let position = this.convertWorldToCartographic(this.$data._viewer2D.entities.getById(this.selectedMarker.id).position._value)
         
           let name = ''
           for(let i = 0;i<this.nameIdList.length;i++){
@@ -944,7 +910,7 @@ export default {
 // 新的终点坐标
 const newEndPoint = this.Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, position.height);
 // 遍历所有的entity对象
-this.viewer2D.entities.values.forEach(entity => {
+this.$data._viewer2D.entities.values.forEach(entity => {
   // 检查entity是否为Polyline类型
   if (entity instanceof this.Cesium.Entity && entity.polyline) {
     // 获取原始的Polyline坐标数组
@@ -957,7 +923,7 @@ this.viewer2D.entities.values.forEach(entity => {
     entity.polyline.positions = new this.Cesium.CallbackProperty(time => positions, false);
   }
 });
-this.viewer3D.entities.values.forEach(entity => {
+this.$data._viewer3D.entities.values.forEach(entity => {
   // 检查entity是否为Polyline类型
   if (entity instanceof this.Cesium.Entity && entity.polyline) {
     // 获取原始的Polyline坐标数组
@@ -974,22 +940,22 @@ this.viewer3D.entities.values.forEach(entity => {
            
           }
 
-          // this.viewer2D.entities.add({
+          // this.$data._viewer2D.entities.add({
           //   polyline: {
           //     positions: [
           //       this.oldPosition._value,
-          //       this.viewer2D.entities.getById(this.selectedMarker.id).position._value
+          //       this.$data._viewer2D.entities.getById(this.selectedMarker.id).position._value
           //     ],
           //     width: 5, // 设置线的宽度
           //     material: material,
           //     followSurface: false // 设置为false，使连线保持在固定的高度，不会贴地显示
           //   }
           // });
-          // this.viewer3D.entities.add({
+          // this.$data._viewer3D.entities.add({
           //   polyline: {
           //     positions: [
           //       this.oldPosition._value,
-          //       this.viewer3D.entities.getById(this.selectedMarker.id).position._value
+          //       this.$data._viewer3D.entities.getById(this.selectedMarker.id).position._value
           //     ],
           //     width: 5, // 设置线的宽度
           //     material: material,
@@ -1005,15 +971,15 @@ this.viewer3D.entities.values.forEach(entity => {
       this.handler2D.setInputAction((event) => {
         if (this.selectedMarker && this.modeltooltip === "右键取消") {
           const screenPosition = new this.Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
-          const position = this.viewer2D.scene.camera.pickEllipsoid(screenPosition);
-          this.viewer2D.entities.getById(this.selectedMarker.id).position = position;
-          this.viewer3D.entities.getById(this.selectedMarker.id).position = position;
+          const position = this.$data._viewer2D.scene.camera.pickEllipsoid(screenPosition);
+          this.$data._viewer2D.entities.getById(this.selectedMarker.id).position = position;
+          this.$data._viewer3D.entities.getById(this.selectedMarker.id).position = position;
         }
       }, this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
       // 监听右键
       this.handler2D.setInputAction(() => {
         if (this.selectedMarker && this.modeltooltip === "右键取消") {
-          this.viewer2D.entities.getById(this.selectedMarker.id).position = this.oldPosition;
+          this.$data._viewer2D.entities.getById(this.selectedMarker.id).position = this.oldPosition;
           this.selectedMarker = null;
           this.selectModel();
         }
@@ -1021,9 +987,9 @@ this.viewer3D.entities.values.forEach(entity => {
       this.handler3D.setInputAction((event) => {
         if (!this.selectedMarker && !this.modeltooltip) {
           const screenPosition = new this.Cesium.Cartesian2(event.position.x, event.position.y);
-          const pickedEntity = this.viewer3D.scene.pick(screenPosition);
+          const pickedEntity = this.$data._viewer3D.scene.pick(screenPosition);
           if (this.Cesium.defined(pickedEntity)) {
-            for (const entity of this.viewer3D.entities.values) {
+            for (const entity of this.$data._viewer3D.entities.values) {
               if (pickedEntity.id.id === entity.id) {
                 this.selectedMarker = entity;
                 this.oldPosition = pickedEntity.id.position;
@@ -1034,22 +1000,22 @@ this.viewer3D.entities.values.forEach(entity => {
           }
         } else if (this.selectedMarker && this.modeltooltip === "右键取消") {
           const material = new this.Cesium.PolylineArrowMaterialProperty(this.selectedMarker.point.color);
-          this.viewer2D.entities.add({
+          this.$data._viewer2D.entities.add({
             polyline: {
               positions: [
                 this.oldPosition._value,
-                this.viewer2D.entities.getById(this.selectedMarker.id).position._value
+                this.$data._viewer2D.entities.getById(this.selectedMarker.id).position._value
               ],
               width: 5, // 设置线的宽度
               material: material,
               followSurface: false // 设置为false，使连线保持在固定的高度，不会贴地显示
             }
           });
-          this.viewer3D.entities.add({
+          this.$data._viewer3D.entities.add({
             polyline: {
               positions: [
                 this.oldPosition._value,
-                this.viewer3D.entities.getById(this.selectedMarker.id).position._value
+                this.$data._viewer3D.entities.getById(this.selectedMarker.id).position._value
               ],
               width: 5, // 设置线的宽度
               material: material,
@@ -1064,15 +1030,15 @@ this.viewer3D.entities.values.forEach(entity => {
       this.handler3D.setInputAction((event) => {
         if (this.selectedMarker && this.modeltooltip === "右键取消") {
           const screenPosition = new this.Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
-          const position = this.viewer3D.scene.camera.pickEllipsoid(screenPosition);
-          this.viewer2D.entities.getById(this.selectedMarker.id).position = position;
-          this.viewer3D.entities.getById(this.selectedMarker.id).position = position;
+          const position = this.$data._viewer3D.scene.camera.pickEllipsoid(screenPosition);
+          this.$data._viewer2D.entities.getById(this.selectedMarker.id).position = position;
+          this.$data._viewer3D.entities.getById(this.selectedMarker.id).position = position;
         }
       }, this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
       // 监听右键
       this.handler3D.setInputAction(() => {
         if (this.selectedMarker && this.modeltooltip === "右键取消") {
-          this.viewer3D.entities.getById(this.selectedMarker.id).position = this.oldPosition;
+          this.$data._viewer3D.entities.getById(this.selectedMarker.id).position = this.oldPosition;
           this.selectedMarker = null;
           this.selectModel();
         }

vue.config.js

@@ -51,7 +51,7 @@ module.exports = {
         proxy: {
             '/api': {
                 target: 'http://localhost:80',
-                ws: true,
+                // ws: true,
                 changeOrigin: true,
                 // pathRewrite:{
                 //   "^/geoserver":""