firemap/src/views/simulation/index.vue

<template>
  <div class="container">
    <el-row id="earth" style="height: 100%; width: 100%; display: flex; position: relative">
      <el-col style="height: 100%; position: relative" :span="this.leftwidth">
        <div class="main-layout" v-on:mouseover="changeActive('2D')" @mousemove="getMouseLocation">
          <div id="2DcesiumContainer" class="map" @click="onMapClick"></div>
        </div>
      </el-col>
      <el-col style="height: 100%; position: relative" :span="24 - this.leftwidth">
        <div class="main-layout" v-on:mouseover="changeActive('3D')" @mousemove="getMouseLocation">
          <div id="3DcesiumContainer" class="map" @click="onMapClick"></div>
        </div>
      </el-col>
      <el-tabs type="border-card" v-model="activeName" tab-position="left" class="menu" :stretch="true"
        @tab-click="legendClick">
        <el-tab-pane name="fouth">
          <el-tooltip placement="right" effect="light" slot="label">
            <span slot="content" class="item">想定</span>
            <span><i class="el-icon-house"></i></span>
          </el-tooltip>
          <el-table :data="situation">
            <el-table-column label="名称" prop="xdname" width="150px"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="primary" @click="getJson(scope.row)">导入</el-button>
                <!-- <el-button type="primary" @click="saveJson()">保存</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div class="buttons">
        <el-button icon="el-icon-full-screen" circle @click="ismax()"></el-button>
        <el-button icon="el-icon-house" circle @click="home()"></el-button>
        <el-button icon="el-icon-plus" circle @click="big()"></el-button>
        <el-button icon="el-icon-minus" circle @click="small()"></el-button>
      </div>
    </el-row>
    <!-- <TimeLine :showLayers="showLayers" :timeDataArray="timeDataArray" class="TimeLine"></TimeLine> -->
  </div>
</template>
<script>
import screenfull from "screenfull";
import fireController from "@/api/fireController.js";
import { getToken } from "@/utils";
import axios from "axios";
import satelliteModel from '@/assets/model/satelite.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 { mapGetters } from "vuex";

export default {
  components: {
    TimeLine
  },
  computed: {
    ...mapGetters([
      "dimension"
    ])
  },
  data() {
    return {
      save: false,
      situation: [],
      nameIdList: [],
      websocket: null,
      leftwidth: 12,
      unit: [],
      satellite: [],
      center: [],
      move_data: {},
      viewer2D: null,
      viewer3D: null,
      mousevalue: null,
      // 选中的点
      selectedMarker: null,
      // 以前的标记点坐标
      oldPosition: null,
      activeName: 'fouth',
      currentLab: {
        index: -1,
        isActive: false
      },
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      isShow: false,
      handler3D: null,
      handler2D: null,
      image: null,
      modeltooltip: null,
      id: 1,
      showLayers: null,
      timeDataArray: ['Time 1', 'Time 2', 'Time 3', 'Time 4'],
      jsonData: null
    };
  },
  watch: {
    dimension: {
      handler: function (val, oldVal) {
        console.log(val)
        if (val == 2) {
          this.leftwidth = 24;
        } else if (val == 3) {
          this.leftwidth = 0;
        } else if (val == 5) {
          this.leftwidth = 12;
        }
      },
    },
  },
  created() {
    this.getData();

  },
  mounted() {
    this.cesiumInit();
    // 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 = [];
      let satellite = [];
      let center = [];
      let fileInfoStr = row.xdfile;
      let fileInfoArr = JSON.parse(fileInfoStr);
      await axios
        .get("http://localhost:8084/admin/online/onlineOperation/downloadDatasource/main", {
          params: {
            datasourceId: "1656243335922192384",
            fieldName: "xdfile",
            asImage: false,
            dataId: row.id,
            filename: fileInfoArr[0].filename,
            Authorization: getToken(),
            MenuId: "1656244747347431424"
          }
        })
        .then((response) => {
          console.log('response.data :>> ', response.data);
          // // 处理成功的响应
          // jsonData = response.data
          blueunit = response.data.blueunit
          redunit = response.data.redunit
          satellite = response.data.satellite
          center = response.data.center
          this.save = true
          this.jsonData = {
            id: row.id,
            xdname: response.data.xdname,
            type: response.data.type,
            // creator: row.creator,
            createtime: response.data.createtime,
            bluecnt: response.data.bluecnt,
            target: response.data.target,
            starttime: response.data.starttime,
            steptime: response.data.steptime,
            endtime: response.data.endtime,
            blueunit: blueunit,
            redunit: redunit,
            satellite: satellite,
            center: center
          }
          this.setTimeLine(response.data.starttime, response.data.endtime, response.data.steptime)//传入时间到时间轴
        })
        .catch((error) => {
          // 处理错误
          console.error(error);
        });

      for (let i = 0; i < blueunit.length; i++) {
        this.markLocationbyJson(parseFloat(blueunit[i].pos.lat), parseFloat(blueunit[i].pos.lon), parseFloat(blueunit[i].pos.height), blueunit[i].name, "blue")
      }
      for (let i = 0; i < center.length; i++) {
        let item = center[i]
        this.markLocationbyJson(parseFloat(item[center[i].name].properties.lat), parseFloat(item[center[i].name].properties.lon), parseFloat(item[center[i].name].properties.h), item.name, "center")
      }
      for (let i = 0; i < redunit.length; i++) {
        this.markLocationbyJson(parseFloat(redunit[i].component_movementjson.properties.launch_lat), parseFloat(redunit[i].component_movementjson.properties.launch_lon), parseFloat(redunit[i].component_movementjson.properties.launch_h), redunit[i].name, "red")
        let point1 = {
          longitude: parseFloat(redunit[i].component_movementjson.properties.launch_lon),
          latitude: parseFloat(redunit[i].component_movementjson.properties.launch_lat),
          height: parseFloat(redunit[i].component_movementjson.properties.launch_h)
        }
        let point2 = {
          longitude: parseFloat(redunit[i].component_movementjson.properties.target_lon),
          latitude: parseFloat(redunit[i].component_movementjson.properties.target_lat),
          height: parseFloat(redunit[i].component_movementjson.properties.target_h)
        }
        this.markLine(point1, point2, "red")
      }
    },
    //获取所有数据
    getData() {
      this.getCenter();
      this.getSatellite();
      this.getUnit();
      this.getSituation();
    },
    // 获取场景想定数据
    getSituation() {
      let params = {
        datasourceId: "1656243335922192384",
        filterDtoList: [],
        pageParam: {
          pageNum: 1,
          pageSize: 10
        }
      };
      fireController.situation(this, params).then((res) => {
        this.situation = res.data.dataList;
      });
    },
    // 获取作战单元数据
    getUnit() {
      let params = {
        datasourceId: "1657931215497334784",
        filterDtoList: [],
        pageParam: {
          pageNum: 1,
          pageSize: 10
        }
      };
      fireController.unit(this, params).then((res) => {
        this.unit = res.data.dataList;
      });
    },
    // 获取指挥中心数据
    getCenter() {
      let params = {
        datasourceId: "1654421731512684544",
        filterDtoList: [],
        pageParam: {
          pageNum: 1,
          pageSize: 10
        }
      };
      fireController.center(this, params).then((res) => {
        this.center = res.data.dataList;
      });
    },
    // 获取预警卫星数据
    getSatellite() {
      let params = {
        datasourceId: "1654424480958648320",
        filterDtoList: [],
        pageParam: {
          pageNum: 1,
          pageSize: 10
        }
      };
      fireController.satellite(this, params).then((res) => {
        this.satellite = res.data.dataList;
      });
    },
    cesiumInit() {
      this.viewer2D = new this.Cesium.Viewer("2DcesiumContainer", {
        sceneMode: this.Cesium.SceneMode.SCENE2D,
        animation: true, // 是否显示时间轴动画
        baseLayerPicker: false,
        homeButton: false,
        geocoder: false,
        timeline: true, //是否显示时间线控件
        fullscreenButton: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        selectionIndicator: false,
        imageryProvider: new this.Cesium.UrlTemplateImageryProvider({
          url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
          layer: "tdtVecBasicLayer",
          style: "default",
          format: "image/png",
          tileMatrixSetID: "GoogleMapsCompatible",
          show: false
        })
      });

      this.viewer3D = new this.Cesium.Viewer("3DcesiumContainer", {
        animation: true, // 是否显示时间轴动画
        baseLayerPicker: false,
        homeButton: false,
        geocoder: false,
        timeline: true, //是否显示时间线控件
        fullscreenButton: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        selectionIndicator: false,
        // imageryProvider:  new this.Cesium.WebMapServiceImageryProvider({
        //   url: '/geoserver/map/wms',
        //     // 这里是自定义的图层名称
        //     layers: 'map',
        //     parameters: {
        //         service: 'WMS',
        //         format: 'image/png',
        //         transparent: true
        //     }
        // }),

        imageryProvider:
          // new this.Cesium.WebMapTileServiceImageryProvider({
          //     url: "http://10.170.16.95:8080/geoserver/gwc/service/wmts/rest/map:map/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png",
          //     layer: 'map:map',
          //     style: 'raster',
          //     format: 'image/png',
          //     tileMatrixSetID: 'EPSG:900913',      //一般使用EPSG:3857坐标系

          //   }),
          new this.Cesium.UrlTemplateImageryProvider({
            url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
            layer: "tdtVecBasicLayer",
            style: "default",
            format: "image/png",
            tileMatrixSetID: "GoogleMapsCompatible",
            show: false
          })
      });

      this.viewer3D._cesiumWidget._creditContainer.style.display = "none";
      this.viewer2D._cesiumWidget._creditContainer.style.display = "none";
      this.viewer3D.camera.setView({
        destination: new this.Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000)
        // 方向，俯视和仰视的视角
        // orientation:{
        //   heading: this.Cesium.Math.toRadians(90),//坐标系旋转90度
        //   pitch: this.Cesium.Math.toRadians(-45) ,//设置俯仰角度为-45度
        // }
      });
      this.viewer2D.camera.setView({
        destination: new this.Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000)
        // 方向，俯视和仰视的视角
        // orientation:{
        //   heading: this.Cesium.Math.toRadians(90),//坐标系旋转90度
        //   pitch: this.Cesium.Math.toRadians(-45) ,//设置俯仰角度为-45度
        // }
      });
      // 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);
    },
    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)
        );
        // 转为世界坐标系
        let position = this.viewer3D.scene.camera.pickEllipsoid(center);
        // 判断中心点是否在椭球体上
        if (this.Cesium.defined(position)) {
          // 获取三维地图中心点与相机之间的距离
          let distance = this.Cesium.Cartesian3.distance(position, this.viewer3D.scene.camera.positionWC);
          position = this.convertWorldToCartographic(position);
          // 更新二维地图
          this.viewer2D.scene.camera.setView({
            destination: new this.Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, distance)
          });
        }
      }
      if (this.mousevalue == "2D") {
        // 二维地图中心点
        let center = new this.Cesium.Cartesian2(
          Math.floor(this.viewer2D.canvas.clientWidth / 2),
          Math.floor(this.viewer2D.canvas.clientHeight / 2)
        );
        // 转为世界坐标系
        let position = this.viewer2D.scene.camera.pickEllipsoid(center);
        // 判断中心点是否在椭球体上
        if (this.Cesium.defined(position)) {
          // 获取三维地图中心点与相机之间的距离
          let distance = this.viewer2D.scene.camera.positionCartographic.height;
          position = this.convertWorldToCartographic(position);
          // 更新三维地图
          this.viewer3D.scene.camera.setView({
            destination: new this.Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, distance)
          });
        }
      }
    },
    // 将世界坐标系转换为经纬度坐标系
    convertWorldToCartographic(worldPosition) {
      const ellipsoid = this.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);
      const height = cartographic.height;
      return { longitude, latitude, height };
    },
    // 监听地图变化
    changeActive(value) {
      this.mousevalue = value;
    },
    dimensionswitch(value) {
      this.dimension = value;
      this.selectModel();
    },
    // 全屏缩小
    ismax() {
      if (screenfull.isEnabled && screenfull.isFullscreen) {
        screenfull.exit();
      } else {
        screenfull.request();
      }
    },
    /* 获取camera中心点坐标 */
    getCenterPosition(is3D = false) {
      let viewer = is3D ? this.viewer3D : this.viewer2D;
      let result = viewer.camera.pickEllipsoid(
        new this.Cesium.Cartesian2(viewer.canvas.clientWidth / 2, viewer.canvas.clientHeight / 2)
      );
      let curPosition = this.Cesium.Ellipsoid.WGS84.cartesianToCartographic(result);
      let lon = (curPosition.longitude * 180) / Math.PI;
      let lat = (curPosition.latitude * 180) / Math.PI;
      let height = viewer.camera.positionCartographic.height;
      return {
        lon: lon,
        lat: lat,
        height: height
      };
    },
    /* 地图放大 */
    big() {
      let { lon, lat, height } = this.getCenterPosition(this.dimension === 3);
      let viewer = (this.dimension === 3 || this.dimension === 5) ? this.viewer3D : this.viewer2D;
      // 镜头拉进
      viewer.camera.flyTo({
        destination: this.Cesium.Cartesian3.fromDegrees(lon, lat, height / 1.8),
        duration: 1.0
      });
    },
    /* 地图缩小 */
    small() {
      let { lon, lat, height } = this.getCenterPosition(this.dimension === 3);
      let viewer = (this.dimension === 3 || this.dimension === 5) ? this.viewer3D : this.viewer2D;
      // 镜头远离
      viewer.camera.flyTo({
        destination: this.Cesium.Cartesian3.fromDegrees(lon, lat, height * 1.2),
        duration: 1.0
      });
    },
    home() {
      let viewer = (this.dimension === 3 || this.dimension === 5) ? this.viewer3D : this.viewer2D;
      viewer.camera.flyTo({
        destination: this.Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000),
        duration: 2.0
      });
    },
    // tabs 切换点击
    legendClick({ index }) {
      this.selectModel();
      let tab_content = document.querySelectorAll(".menu .el-tabs__content");
      if (this.currentLab.index == index) {
        tab_content[0].style.display == "none" || ""
          ? (tab_content[0].style.display = "block")
          : (tab_content[0].style.display = "none");
      }
      if (this.currentLab.index != index) {
        this.currentLab.index = index;
        tab_content[0].style.display = "block";
      }
    },
    mouseMove(event) {
      if (this.$refs.modeltooltip) {
        this.$refs.modeltooltip.style.left = event.pageX - 240 + "px";
        this.$refs.modeltooltip.style.top = event.pageY - 115 + "px";
      }
    },
    //显示鼠标经纬度
    getMouseLocation(event) {
      let { longitude, latitude } = this.getCoordinatesFromEvent(event);
      this.$store.commit("app/setMouseLocation", { longitude, latitude });
    },
    /*根据camera高度近似计算当前层级*/
    heightToZoom(height) {
      var A = 40487.57;
      var B = 0.00007096758;
      var C = 91610.74;
      var D = -40467.74;
      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 height = viewer.camera.positionCartographic.height;
      let zoom = this.heightToZoom(height);
      this.$store.commit("app/setCameraHeightAndZoom", { height, zoom });
    },
    selectModel(cursorStyle, image, info) {
      console.log('image :>> ', image);
      let earthMap = document.getElementById("earth");
      earthMap.style.cursor = cursorStyle || "auto";
      if (cursorStyle) {
        document.addEventListener("mousemove", this.mouseMove);
        this.isShow = true;
        this.image = image;
        this.modeltooltip = info;
      } else {
        document.removeEventListener("mousemove", this.mouseMove);
        this.isShow = false;
        this.image = null;
        this.modeltooltip = null;
      }
    },
    onMapClick(event) {
      if (this.isShow && this.modeltooltip === "左键单击确认") {
        const { latitude, longitude } = this.getCoordinatesFromEvent(event);
        this.markLocation(latitude, longitude);
      }
    },
    // 同时在2D和3D地图上标记坐标
    markLocation(latitude, longitude) {
      const position = this.Cesium.Cartesian3.fromDegrees(longitude, latitude);
      this.viewer2D.entities.add({
        id: this.id,
        position: position,
        // point: {
        //   pixelSize: 12, // 调整点的大小，可以增大点的像素大小
        //   color: this.Cesium.Color.fromCssColorString(this.image.color)
        // },
        model: {
          uri: satelliteModel, // 替换为你的3D模型文件路径
          scale: 1.0, // 调整3D模型的缩放大小
          minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
        },
        label: {
          text: this.image.name,
          show: true,
          font: "18px Helvetica", // 调整标签的字体样式和大小
          pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
        }
      });
      this.viewer3D.entities.add({
        id: this.id,
        position: position,
        // point: {
        //   pixelSize: 12, // 调整点的大小，可以增大点的像素大小
        //   color: this.Cesium.Color.fromCssColorString(this.image.color)
        // },
        model: {
          uri: satelliteModel, // 替换为你的3D模型文件路径
          scale: 1.0, // 调整3D模型的缩放大小
          minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
        },
        label: {
          text: this.image.name,
          show: true,
          font: "18px Helvetica", // 调整标签的字体样式和大小
          pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
        }
      });
      this.id++;
    },
    markLocationbyJson(latitude, longitude, height, name, type) {
      const position = this.Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
      console.log('position :>> ', position);
      let color = ''
      let modelUrl = ''
      if (type == 'red') {
        color = 'Red'
        modelUrl = missileModel
      }
      else if (type == 'blue') {
        color = 'Blue'
        modelUrl = radarModel
      }
      else if (type == 'center') {
        color = 'Blue'
        modelUrl = centerModel
      }
      this.viewer2D.entities.add({
        id: this.id,
        position: position,
        point: {
          pixelSize: 12, // 调整点的大小，可以增大点的像素大小
          color: this.Cesium.Color.fromCssColorString(color)
        },
        model: {
          uri: modelUrl, // 替换为你的3D模型文件路径
          scale: 1.0, // 调整3D模型的缩放大小
          minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
        },
        label: {
          text: type + ' ' + name,
          show: true,
          font: "18px Helvetica", // 调整标签的字体样式和大小
          pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
        }
      });
      this.viewer3D.entities.add({
        id: this.id,
        position: position,
        point: {
          pixelSize: 12, // 调整点的大小，可以增大点的像素大小
          color: this.Cesium.Color.fromCssColorString(color)
        },
        model: {
          uri: modelUrl, // 替换为你的3D模型文件路径
          scale: 1.0, // 调整3D模型的缩放大小
          minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
        },
        label: {
          text: type + ' ' + name,
          show: true,
          font: "18px Helvetica", // 调整标签的字体样式和大小
          pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
        }
      });
      this.nameIdList.push({
        id: this.id,
        name: name
      })
      this.id++;
    },
    // 从鼠标点击事件获取坐标
    getCoordinatesFromEvent(event) {
      let viewer = this.mousevalue === "2D" ? this.viewer2D : this.viewer3D;
      let clickPosition;
      if (this.dimension === 5 && this.mousevalue === "3D") {
        clickPosition = new this.Cesium.Cartesian2(event.clientX - 1080, event.clientY - 160);
      } else {
        clickPosition = new this.Cesium.Cartesian2(event.clientX - 280, event.clientY - 160);
      }
      // 获取地图上的经纬度
      const viewerPosition = viewer.scene.camera.pickEllipsoid(clickPosition);
      const cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(viewerPosition);
      const latitude = this.Cesium.Math.toDegrees(cartographic.latitude);
      const longitude = this.Cesium.Math.toDegrees(cartographic.longitude);
      return {
        latitude,
        longitude
      };
    },
    markLine(point1, point2, color) {
      // 从点1和点2的WGS84坐标创建Cartesian3对象
      const position1 = this.Cesium.Cartesian3.fromDegrees(point1.longitude, point1.latitude, point1.height || 0);
      const position2 = this.Cesium.Cartesian3.fromDegrees(point2.longitude, point2.latitude, point2.height || 0);
      // 创建一个带有箭头图标的PolylineMaterial
      const material = new this.Cesium.PolylineArrowMaterialProperty(
        this.Cesium.Color.fromCssColorString(color || "red")
      );

      // 将点1和点2之间的连线添加到Viewer中
      this.viewer2D.entities.add({
        polyline: {
          positions: [position1, position2],
          width: 5, // 设置线的宽度
          material: material,
          followSurface: false // 设置为false，使连线保持在固定的高度，不会贴地显示
        }
      });
      this.viewer3D.entities.add({
        polyline: {
          positions: [position1, position2],
          width: 5, // 设置线的宽度
          material: material,
          followSurface: false // 设置为false，使连线保持在固定的高度，不会贴地显示
        }
      });
    },
    setTimeLine(startTime, endtime, stepTime) {
      let start = this.Cesium.JulianDate.fromDate(new Date(startTime));  // 设置时间轴当前时间为开始时间
      let stop = this.Cesium.JulianDate.fromDate(new Date(endtime));
      // 添加8小时，使地图时间和北京时间相同
      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.viewer2D.clock.currentTime = start.clone();
      this.viewer3D.clock.currentTime = start.clone();
      // 设置时钟结束时间
      this.viewer2D.clock.stopTime = stop.clone();
      this.viewer3D.clock.stopTime = stop.clone();
      // 时间速率，数字越大时间过的越快，设置1好像是和实际时间一样
      this.viewer2D.clock.multiplier = stepTime;
      this.viewer3D.clock.multiplier = stepTime;
      // 时间轴绑定到viewer上去
      this.viewer2D.timeline.zoomTo(start, stop);
      this.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 => {
        const currentTime = clock.currentTime; // 获取当前时间轴的时间
        const elapsedTime = this.Cesium.JulianDate.secondsDifference(
          currentTime,
          this.viewer2D.clock.startTime
        ); // 获取从起始时间到当前时间的秒数
        if (parseInt(elapsedTime) % stepTime === 0 && elapsedTime!=0) {
          console.log('elapsedTime :>> ', elapsedTime);
          // 当从起始时间到当前时间的秒数是 stepTime 的倍数时，发送请求
          this.requestDataAndUpdateModel2D(startTime, elapsedTime);
        }
      });
      this.viewer3D.clock.onTick.addEventListener(clock => {
        const currentTime = clock.currentTime; // 获取当前时间轴的时间
        const elapsedTime = this.Cesium.JulianDate.secondsDifference(
          currentTime,
          this.viewer3D.clock.startTime
        ); // 获取从起始时间到当前时间的秒数
        if (parseInt(elapsedTime) % stepTime === 0 && elapsedTime!=0) {
          console.log('elapsedTime :>> ', elapsedTime);
          // 当从起始时间到当前时间的秒数是 stepTime 的倍数时，发送请求
          this.requestDataAndUpdateModel3D(startTime, elapsedTime);
        }
      });
      this.initSTK()
    },
    // 初始化stk方法，生成轨迹文件
    async initSTK() {
      console.log('this.jsonData :>> ', this.jsonData);
      // await axios
      //   .get("/api", this.jsonData).then(res=>{
      //     console.log('res :>> ', res);
      //   })
      await axios
        .post("/api/traj", this.jsonData).then(res=>{
          console.log('res :>> ', res);
        })

    },
    // 根据时间参数请求模型位置并更新 2D
    async requestDataAndUpdateModel2D(startTime, elapsedTime) {
      const jsDate = new Date(startTime);
      // 增加 elapsedTime 秒
      jsDate.setSeconds(jsDate.getSeconds() + elapsedTime);
      // 转换为需求字符串格式
      const newTimeString = `${jsDate.getFullYear()}-${(jsDate.getMonth() + 1).toString().padStart(2, '0')}-${jsDate.getDate().toString().padStart(2, '0')} ${jsDate.getHours().toString().padStart(2, '0')}:${jsDate.getMinutes().toString().padStart(2, '0')}:${jsDate.getSeconds().toString().padStart(2, '0')}`;
      await axios
        .post("/api/pos", {simulation_time: newTimeString+'.000'}).then(res=>{
          console.log('res :>> ', res);
          let data = res.data[1].data
          //依次更新每个模型位置
          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.viewer2D,"1654426964397658112",res.data[1].data.W1.x,res.data[1].data.W1.y,res.data[1].data.W1.z)
        })
        
    },
     // 根据时间参数请求模型位置并更新 3D
     async requestDataAndUpdateModel3D(startTime, elapsedTime) {
      const jsDate = new Date(startTime);
      // 增加 elapsedTime 秒
      jsDate.setSeconds(jsDate.getSeconds() + elapsedTime);
      // 转换为需求字符串格式
      const newTimeString = `${jsDate.getFullYear()}-${(jsDate.getMonth() + 1).toString().padStart(2, '0')}-${jsDate.getDate().toString().padStart(2, '0')} ${jsDate.getHours().toString().padStart(2, '0')}:${jsDate.getMinutes().toString().padStart(2, '0')}:${jsDate.getSeconds().toString().padStart(2, '0')}`;
      await axios
        .post("/api/pos", {simulation_time: newTimeString+'.000'}).then(res=>{
          let data = res.data[1].data
        
          //依次更新每个模型位置
          for(let i=0;i<this.nameIdList.length;i++){
            console.log('this.nameIdList[i].name :>> ', this.nameIdList[i].name);
            console.log('data :>> ', data);
            console.log('data[this.nameIdList[i].name] :>> ', data[this.nameIdList[i].name]);
            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.viewer3D,viewer,"1654426964397658112",res.data[1].data.W1.x,res.data[1].data.W1.y,res.data[1].data.W1.z)  
        })
        
    },
     // 根据模型实体Id和终点位置进行移动
     modelEntityMoveByIDAndLocation(viewer,id,x,y,z) {
        x = parseFloat(x)*1000
        y = parseFloat(y)*1000
        z = parseFloat(z)*1000
        let entity = viewer.entities.getById(id)
        //终点位置
        let position = new this.Cesium.Cartesian3(x, y, z);
        //设置方向,根据实体的位置来配置方向
        entity.orientation = new this.Cesium.VelocityOrientationProperty(entity.position);
        //设置查看器，让模型动起来
        entity.position.setValue(position)

     }
  }
};
</script>
<style scoped>
::v-deep .cesium-infoBox {
  display: none !important;
}

::v-deep .cesium-infoBox-bodyless {
  display: none !important;
}

::v-deep .cesium-infoBox-visible {
  display: none !important;
}

.container {
  height: 100%;
  position: relative;
}

.modeltooltip {
  position: absolute;
  padding: 5px;
  color: #fff;
  font-size: 20px;
  pointer-events: none;
  z-index: 999;
}

.myHeader {
  background-color: #1c222b !important;
  color: #fff;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  /*由于flex-direction: column，因此align-items代表的是水平方向*/
  justify-content: center;
  /*由于flex-direction: column，因此justify-content代表的是垂直方向*/
}

.myHeader .el-button {
  width: 100px;
  height: 20px;
  padding: 1px 23px;
}

.box-card {
  min-height: 100%;
  height: 100%;
}

::v-deep .el-card__body {
  height: 100% !important;
  padding: 0px !important;
}

.main-layout {
  height: 100%;
  width: 100%;
}

.map {
  width: 100%;
  height: 100%;
}

.menu {
  position: absolute;
  height: 400px;
  z-index: 999;
  left: 20px;
  top: 20px;
}

::v-deep .el-tabs--left .el-tabs__header.is-left {
  margin-right: 0px !important;
}

.buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  position: absolute;
  z-index: 999;
  right: 20px;
  top: 20px;
}

.el-button {
  margin: 5px !important;
}

::v-deep .el-tabs--border-card>.el-tabs__content {
  width: 300px;
  height: 100%;
  overflow-y: visible;
}

.model {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.model>div {
  width: 50%;
  height: 120px;
  padding: 5px;
}

.model>div:hover {
  border: 2px solid blue;
}

.model>div:active {
  border: 2px solid red;
}

.active {
  border: 2px solid red !important;
}

.model .el-image {
  display: block !important;
}

::v-deep .el-image .el-image__inner {
  border: 1px solid #ddd;
  border-radius: 5px;
}

.item {
  font-size: 14px;
  /* right: 20px; */
}

.TimeLine {
  position: absolute;
  left: 21%;
  bottom: 15px;
  transform: translateX(-50%);
}
</style>