radarForntend/src/views/situation/index.vue

<template>
  <div style="height: 100%">
    <el-popover width="400" placement="right-end" trigger="click" class="navCtrl">
      <el-button size="mini" type="success" @click="NavParamChange" style="float: right">变更</el-button>
      <el-table border fit size="mini" :data="navParams">
        <el-table-column min-width="40" prop="key" label="属性"></el-table-column>
        <el-table-column min-width="30" prop="value" label="值"></el-table-column>
        <el-table-column label="操作" min-width="60">
          <template slot-scope="scope">
            <!-- <el-switch v-if="scope.row.key == '开关机状态'" active-text="开" inactive-text="关"
              v-model="NavStartUpStatusBoolean" :change="NavSwitchChange()"></el-switch> -->
            <el-select v-if="scope.row.key == '导航模式'" style="width: 80%" v-model="NavCurrentParam.NavWorkMode"
              placeholder="选择模式" size="mini">
              <el-option v-for="item in NavWorkModels" :key="item.instanceID" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-switch v-if="scope.row.key == '航迹规划'" active-text="自动" inactive-text="手动"
              v-model="PathPlanBoolean"></el-switch>
            <el-switch v-if="scope.row.key == '碰撞避免'" active-text="开" inactive-text="关"
              v-model="ColitionAvoidBoolean"></el-switch>
          </template>
        </el-table-column>
      </el-table>
      <div style="height: 10px"></div>
      <el-table border size="small" :data="navPos">
        <el-table-column prop="key" label="属性"></el-table-column>
        <el-table-column prop="value" label="值"></el-table-column>
      </el-table>
      <el-button slot="reference">导航和飞行控制</el-button>
    </el-popover>
    <el-row :gutter="10" style="height: 100%">
      <el-col style="height: 100%; position: relative" :span="19">
        <div class="main-layout" @mousemove="getMouseLocation">
          <div id="cesiumContainer" class="mapecharts"></div>
        </div>
      </el-col>

      <el-col :span="5" style="height: 100%">
        <el-switch v-model="isShow" active-color="#13ce66" active-text="显示轨迹" @change="showChange"
          inactive-color="#ff4949">
        </el-switch>
        <!-- <el-table height="49%" :data="map.data.friend">
          <el-table-column label="红方平台列表">
            <el-table-column width="60" prop="id" label="ID"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
          </el-table-column>
        </el-table> -->
        <el-table v-loading="redloading" :data="redList" height="100%" @selection-change="handleRedSelectionChange"
          ref="redTable">
          <el-table-column label="平台列表">
            <el-table-column type="selection" width="40" v-if="!isShow"> </el-table-column>
            <el-table-column width="60" prop="id" label="ID"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="prop" label="属性"></el-table-column>
          </el-table-column>
        </el-table>
        <!-- <div style="height: 2%"></div> -->
        <!-- <el-table v-loading="blueloading" :data="blueList" height="49%" @selection-change="handleBlueSelectionChange"
          ref="blueTable">
          <el-table-column label="蓝方平台列表">
            <el-table-column type="selection" width="40" v-if="!isShow"> </el-table-column>
            <el-table-column width="60" prop="id" label="ID"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
          </el-table-column>
        </el-table> -->
      </el-col>
    </el-row>
    <div class="situationButtons">
      <el-switch v-model="FusionSituationBoolean" active-text="融合" inactive-text="本地"></el-switch>
      <!-- <el-button :type="situation == 'local' ? 'success' : 'danger'" size="mini" @click="situationswitch('local')"
        round>本地</el-button>
      <el-button :type="situation == 'remote' ? 'success' : 'danger'" size="mini" @click="situationswitch('remote')"
        round>远端</el-button>
      <el-button :type="situation == 'combine' ? 'success' : 'danger'" size="mini" @click="situationswitch('combine')"
        round>融合</el-button>
      <el-button :type="situation == 'global' ? 'success' : 'danger'" size="mini" @click="situationswitch('global')"
        round>全局</el-button> -->
    </div>

    <div class="buttons">
      <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>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
// import friendplane from "../../../public/static/friend.glb";
// import enemyplane from "../../../public/static/enemy.glb";
export default {
  computed: {
    ...mapGetters([
      "platformID",
      "navStatus",
      "navParams",
      "navPos",
      "mouseLocation",
      "cameraLocation",
      "map",
    ]),
  },
  data() {
    return {
      // ---------导航--------------
      NavInstance: null,
      //轨迹实体id
      poly: 10000,
      //轨迹是否显示
      isShow: true,
      //保存轨迹实体信息
      polyLineList: [],
      //保存友方实体信息
      friendIdList: [],
      //保存敌方实体信息
      enemyIdList: [],
      //红方勾选数据
      redSelection: [],
      //蓝方勾选数据
      blueSelection: [],
      FusionSituationBoolean: false,
      NavStartUpStatusBoolean: null,

      PathPlanBoolean: true,
      ColitionAvoidBoolean: true,
      NavCurrentParam: {
        StartUpStatus: null,
        NavWorkMode: 0,
      },
      NavWorkModels: [
        {
          value: 0,
          label: "卫星导航",
        },
        {
          value: 1,
          label: "惯性导航",
        },
        {
          value: 2,
          label: "融合导航",
        },
      ],
      timer: null,
      _viewer: null,
      situation: "local", //当前态势
      maptype: null,
      //红方平台列表
      redList: [
        { id: 1, name: "干扰模型-101", prop: "协同干扰模型" },
        { id: 2, name: "干扰模型-102", prop: "协同干扰模型" },
        { id: 3, name: "干扰模型-103", prop: "协同干扰模型" },
        { id: 4, name: "干扰模型-104", prop: "协同干扰模型" },
        { id: 5, name: "干扰模型-105", prop: "协同干扰模型" },
        { id: 6, name: "干扰模型-106", prop: "本机" },
        { id: 7, name: "干扰模型-107", prop: "协同干扰模型" },
        { id: 8, name: "干扰模型-108", prop: "协同干扰模型" },
        { id: 9, name: "干扰模型-109", prop: "协同干扰模型" },
        { id: 10, name: "干扰模型-110", prop: "协同干扰模型" },
        { id: 11, name: "地面控制站", prop: "控制中心" },
        { id: 12, name: "雷达目标-3", prop: "可疑目标" },
        { id: 13, name: "雷达目标-4", prop: "可疑目标" },
      ],
      //蓝方平台列表
      blueList: [],
      //红方数据加载标识
      redloading: false,
      //蓝方数据加载标识
      blueloading: false
    };
  },
  mounted() {
    //初始化cesium
    this.cesiumInit();
  },
  activated() {
    this.$wst.send({
      url: "getNavStatus",
      data: {
        PlatformID: this.platformID,
      },
    });
    this.$wst.send({
      url: "getNavParams",
      data: {
        PlatformID: this.platformID,
      },
    });
    this.$wst.send({
      url: "getNavPos",
      data: {
        PlatformID: this.platformID,
      },
    });
    this.setTimer();
  },
  deactivated() {
    this.timerDestory();
  },
  timerDestory() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  watch: {
    init: {
      handler: function (val, oldVal) {
        this.setTimer();
      },
    },
    map: {
      handler: function (val, oldVal) {
        //处理友方平台信息
        for (let i = 0; i < val.data.friend.length; i++) {
          let flag = 0;
          //判断友方平台列表是否已存在相关信息
          for (let j = 0; j < this.redList.length; j++) {
            if (val.data.friend[i].id == this.redList[j].id) {
              flag++;
              break;
            }
          }
          //若为新增信息，加入到友方列表中
          if (flag == 0) {
            this.redList.push(val.data.friend[i])
          }
        }
        //处理敌方平台信息
        for (let i = 0; i < val.data.enemy.length; i++) {
          let flag = 0;
          //判断敌方平台列表是否已存在相关信息
          for (let j = 0; j < this.blueList.length; j++) {
            if (val.data.enemy[i].id == this.blueList[j].id) {
              flag++;
              break;
            }
          }
          //若为新增信息，加入到敌方列表中
          if (flag == 0) {
            this.blueList.push(val.data.enemy[i])
          }
        }
        if (this.maptype !== val.type) {
          //切换模式 重置所有
          this.maptype = val.type;
          this.removeAllModel();
          this.dataRefresh();
          //类型判断
          if (val.type !== "global") {
            //全局不需要本地导航
            this.initNavModel();
          }
          this.initFriendModel();
          this.initEnemyModel();
        } else if (val.type !== "global") {
          this.initNavModel();
          this.initFriendModel();
          this.initEnemyModel();
        } else {
          //移动全局模型
          this.moveFriendModel();
          this.moveEnemyModel();
        }
      },
    },
    navParams: {
      handler: function (val, oldVal) {
        if (this.getValue(val, "开关机状态") == "开") {
          this.NavCurrentParam.StartUpStatus = 1;
        } else {
          this.NavCurrentParam.StartUpStatus = 0;
        }
        if (this.getValue(val, "工作模式") == "北斗") {
          this.NavCurrentParam.NavWorkMode = 0;
        } else if (this.getValue(val, "工作模式") == "惯导") {
          this.NavCurrentParam.NavWorkMode = 1;
        } else if (this.getValue(val, "工作模式") == "组合导航") {
          this.NavCurrentParam.NavWorkMode = 2;
        }
        this.NavStartUpStatusBoolean =
          this.NavCurrentParam.StartUpStatus == 1 ? true : false;
      }
    },
    redList: {
      handler: function (val, oldVal) {
        //判断是否处于数据加载状态
        if (val.length == 0 && this.map.data.friend.length != 0) this.redloading = true
        else this.redloading = false
      },
    },
    blueList: {
      handler: function (val, oldVal) {
        //判断是否处于数据加载状态
        if (val.length == 0 && this.map.data.enemy.length != 0) this.blueloading = true
        else this.blueloading = false
      },
    },
  },
  methods: {
    getValue(params, key) {
      let value = null;
      params.forEach((element) => {
        if (element.key == key) {
          value = element.value;
        }
      });
      return value;
    },
    //平台信息刷新方法
    MapRefresh() {
      if (this.situation == "local") {
        this.$wst.send({
          url: "getLocalMap",
          data: {
            PlatformID: this.platformID,
          },
        });
      } else if (this.situation == "remote") {
        this.$wst.send({
          url: "getRemoteMap",
          data: {
            PlatformID: this.platformID,
          },
        });
      } else if (this.situation == "combine") {
        this.$wst.send({
          url: "getRemoteMap",
          data: {
            PlatformID: this.platformID,
          },
        });
      } else if (this.situation == "global") {
        this.$wst.send({
          url: "getGlobalMap",
        });
      }
    },
    //导航信息刷新方法
    NavRefresh() {
      this.$wst.send({
        url: "getNavParams",
        data: {
          PlatformID: this.platformID,
        },
      });
      this.$wst.send({
        url: "getNavStatus",
        data: {
          PlatformID: this.platformID,
        },
      });
      this.$wst.send({
        url: "getNavPos",
        data: {
          PlatformID: this.platformID,
        },
      });
    },
    //导航参数修改方法
    NavParamChange() {
      this.$wst.send({
        url: "setNavParams",
        data: {
          PlatformID: this.platformID,
          StartUpStatus: this.NavCurrentParam.StartUpStatus,
          uWorkMode: this.NavCurrentParam.NavWorkMode,
        },
      });
      this.$wst.send({
        url: "getNavParams",
        data: {
          PlatformID: this.platformID,
        },
      });
    },
    NavSwitchChange() {
      this.NavCurrentParam.StartUpStatus =
        this.NavStartUpStatusBoolean == true ? 1 : 0;
    },
    setTimer() {
      if (this.timer == null) {
        this.timer = setInterval(() => {
          this.NavRefresh();
          this.MapRefresh();
        }, 3000);
      }
    },
    //初始化echarts
    cesiumInit() {
      this.$data._viewer = new this.Cesium.Viewer("cesiumContainer", {
        animation: false, // 是否显示时间轴动画
        baseLayerPicker: false,
        homeButton: false,
        geocoder: false,
        timeline: false,
        fullscreenButton: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        selectionIndicator: false,
        imageryProvider: new this.Cesium.WebMapServiceImageryProvider({
          url: "http://192.168.5.22:8080/geoserver/map/wms",
          layers: 'map:map',
          proxy: new this.Cesium.DefaultProxy('/proxy/'),
          parameters: {
            // transparent: true,     //是否透明
            format: 'image/png',
            // srs: 'EPSG:3857',
          }
        }),
        // imageryProvider: new this.Cesium.TileMapServiceImageryProvider({
        //   url: "http://192.168.5.22:8080/geoserver/map/",
        //   minimumLevel: 0,
        //   maximumLevel: 20,
        //   fileExtension: "jpg",
        // }),
      });
      this.$data._viewer._cesiumWidget._creditContainer.style.display = "none";
      this.$data._viewer.camera.setView({
        destination: new this.Cesium.Cartesian3.fromDegrees(
          83.81,
          25.48,
          1500
        ),
      });
      // this.$data._viewer.scene.screenSpaceCameraController.maximumZoomDistance = 1500000;  //相机高度的最大值
      this.$data._viewer.camera.moveEnd.addEventListener(
        this.getCameraHeightAndZoom
      ); //地图缩放事件
    },
    //态势切换
    situationswitch(val) {
      this.situation = val;
      this.removeAllModel();
      this.MapRefresh();
    },
    removeAllModel() {
      this.$data._viewer.entities.removeAll(); // 移除全部模型
    },
    //数据重置
    dataRefresh() {
      this.polyId = 10000;
      this.polyLineList = [];
      this.friendIdList = [];
      this.enemyIdList = [];
      this.redList = [];
      this.blueList = [];
      this.redSelection = [];
      this.blueList = [];
    },
    //初始化（移动）本平台方法
    initNavModel() {
      //如果本机平台还未实体化，则初始化本地平台
      if (
        this.$data._viewer.entities.getById(this.platformID) == null ||
        this.$data._viewer.entities.getById(this.platformID) == undefined
      ) {
        console.log("初始化本地平台");
        //加入友方列表
        this.redList.push(this.map.data.self);
        //新建实体
        this.$data._viewer.entities.add({
          name: "本平台" + this.platformID,
          id: this.platformID,
          position: this.Cesium.Cartesian3.fromDegrees(
            this.navPos[1].value,
            this.navPos[0].value,
            0
          ),
          //待修改为军标贴图
          // point: {
          //   show: true,
          //   pixelSize: 14,
          //   outlineWidth: 3,
          //   color: this.Cesium.Color.RED,
          //   outlineColor: this.Cesium.Color.WHITE
          // },
          billboard: {
            image: require("@/assets/image/redairplane.png"),
            width: 30,
            height: 30,
            show: true,
          },
          label: {
            text: "本平台" + this.platformID,
            show: true,
            font: "14px sans-serif",
            pixelOffset: new this.Cesium.Cartesian2(0, 20),
            fillColor: this.Cesium.Color.WHITE,
          },
          // model: {
          //   uri: friendplane,
          //   minimumPixelSize: 128,
          //   maximumScale: 2000,
          // },
        });
      } else {
        //本地平台已经实体化 直接移动已有实体
        this.moveNavModel();
      }
    },
    //初始化/移动友方模型
    initFriendModel() {
      let oldList = this.friendIdList;
      this.map.data.friend.forEach((element) => {
        let outlineColor = null;
        let flag = 0;
        //检查该平台是否已经实体化
        for (let i = 0; i < oldList.length; i++) {
          if (element.id == oldList[i].id) {
            flag++;
          }
        }
        //如果已实体化，直接移动已有实体
        if (flag != 0) {
          console.log("移动友方模型" + element.id);
          this.moveSingleModel(
            element.id,
            this.Cesium.Cartesian3.fromDegrees(
              element.value[0],
              element.value[1],
              0
            ),
            this.Cesium.Color.WHITE
          );
        } else {
          //尚未实体化
          let billboard = {
            image: require("@/assets/image/redairplane.png"),
            width: 30,
            height: 30,
            show: true,
          };
          console.log("初始化友方模型" + element.id);
          //新增友方实体
          //判断平台类型 对应不同军标贴图（imageUrl） 当前先用点轮廓颜色区分
          switch (element.type) {
            case 99:
              //巡航导弹
              outlineColor = this.Cesium.Color.BLACK;
              billboard = {
                image: require("@/assets/image/redmissile.png"),
                width: 30,
                height: 30,
                show: true,
              };
              break;
            case 7:
              //四代机
              outlineColor = this.Cesium.Color.GREEN;
              break;
            case 1:
              //三代半
              outlineColor = this.Cesium.Color.ORANGE;
              break;
            case 16:
              //预警机
              outlineColor = this.Cesium.Color.YELLOW;
              break;
            case 20:
              //驱逐舰 干扰机
              outlineColor = this.Cesium.Color.PINK;
              break;
            case 36:
              //运侦、侦察机
              outlineColor = this.Cesium.Color.WHITE;
              break;
            case 65:
              //侦察船
              outlineColor = this.Cesium.Color.GRAY;
              break;
            default:
              outlineColor = this.Cesium.Color.WHITE;
              break;
          }
          //新增实体
          this.$data._viewer.entities.add({
            name: element.name,
            id: element.id,
            position: this.Cesium.Cartesian3.fromDegrees(
              element.value[0],
              element.value[1],
              0
            ),
            //待修改为军标贴图
            // point: {
            //   show: true,
            //   pixelSize: 14,
            //   outlineWidth: 3,
            //   color: this.Cesium.Color.RED,
            //   outlineColor: outlineColor
            // },
            billboard: billboard,
            label: {
              text: element.name == null ? "友方" + element.id : element.name,
              show: true,
              font: "14px sans-serif",
              pixelOffset: new this.Cesium.Cartesian2(0, 20),
              fillColor: this.Cesium.Color.WHITE,
            },
            // model: {
            //   uri: friendplane,
            //   minimumPixelSize: 128,
            //   maximumScale: 2000,
            // },
          });
          this.friendIdList.push({ id: element.id });
        }
      });
    },
    //初始化/移动敌方模型
    initEnemyModel() {
      let str = "敌方";
      let color = this.Cesium.Color.BLUE;
      if (this.map.type == "remote") {
        str = "未知";
        color = this.Cesium.Color.BLUE;
      }
      let oldList = this.enemyIdList;
      this.map.data.enemy.forEach((element) => {
        let flag = 0;
        //检查平台是否已经在地图中有对应实体
        for (let i = 0; i < oldList.length; i++) {
          if (element.id == oldList[i].id) {
            flag++;
            break;
          }
        }
        //若平台已经实体化，则直接移动已存在的实体
        if (flag != 0) {
          console.log("移动敌方模型" + element.id);
          this.moveSingleModel(
            element.id,
            this.Cesium.Cartesian3.fromDegrees(
              element.value[0],
              element.value[1],
              0
            ),
            color
          );
          return;
        } else {
          console.log("初始化敌方模型" + element.id);
          let billboard = {
            image: require("@/assets/image/blueairplane.png"),
            width: 30,
            height: 30,
            show: true,
          };
          //平台未实体化，添加实体
          let outlineColor = null;
          // 判断平台类型 对应不同军标贴图 当前先用点轮廓颜色区分
          switch (element.type) {
            case 1:
              //F-16
              outlineColor = this.Cesium.Color.PINK;
              break;
            case 7:
              //F-35
              outlineColor = this.Cesium.Color.GREEN;
              break;
            case 36:
              //E-2D
              outlineColor = this.Cesium.Color.ORANGE;
              break;
            case 10:
              //航母舰
              outlineColor = this.Cesium.Color.YELLOW;
              billboard = {
                image: require("@/assets/image/blueradar.png"),
                width: 30,
                height: 30,
                show: true,
              };
              break;
            case 19:
              //???
              outlineColor = this.Cesium.Color.WHITE;
              break;
            default:
              outlineColor = this.Cesium.Color.BLACK;
              break;
          }
          this.$data._viewer.entities.add({
            name:
              element.name == null ? str + String(element.id) : element.name,
            id: element.id,
            position: this.Cesium.Cartesian3.fromDegrees(
              element.value[0],
              element.value[1],
              0
            ),
            //待修改为军标贴图
            //   point: {
            //   show: true,
            //   pixelSize: 14,
            //   outlineWidth: 3,
            //   color: color,
            //   outlineColor: outlineColor
            // },
            //目前为单一贴图 待优化
            billboard: billboard,
            label: {
              text:
                element.name == null ? str + String(element.id) : element.name,
              show: true,
              font: "14px sans-serif",
              pixelOffset: new this.Cesium.Cartesian2(0, 20),
              fillColor: this.Cesium.Color.WHITE,
            },
          });
          this.enemyIdList.push({ id: element.id });
        }
      });
    },
    /*
     绘制单个模型实体移动轨迹方法
     输入：
       id：要移动的实体id号
       newPosition：实体移动后的位置
       oldPosition：实体移动前的位置
       color：移动轨迹颜色
   */
    drawTrace(id, newPosition, oldPosition, color) {
      let flag = 0;
      let polyId = 0;
      //找到要绘制的轨迹实体id
      for (let i = 0; i < this.polyLineList.length; i++) {
        if (this.polyLineList[i].entityId == id) {
          flag++;
          polyId = this.polyLineList[i].polyId;
          break;
        }
      }
      //线条不存在
      if (flag == 0) {
        //保存线条信息
        this.polyLineList.push({
          polyId: this.polyId,
          entityId: id,
        });
        //新增线条实体
        let entity = this.$data._viewer.entities.add({
          id: this.polyId++,
          polyline: {
            positions: [oldPosition, newPosition],
            width: 2,
            material: color,
            glowPower: 0.2,
            followSurface: false,
            show: true,
          },
        });
        //避免show属性添加异常问题
        if (!this.isShow) entity.show = false;
      }
      //线条存在
      else {
        //获取平台对应线条实体
        var newPolyId;
        let poly = this.$data._viewer.entities.getById(polyId);
        newPolyId = polyId + 1e7;
        if (poly == undefined) {
          newPolyId = polyId;
          polyId = polyId + 1e7;
          poly = this.$data._viewer.entities.getById(polyId);
        }
        //获取实体当前的位置集合
        let polyPosition = poly._polyline._positions._value;
        //将要移动的新位置数据添加到实体的位置集合中
        polyPosition.push(newPosition);
        //添加更新位置信息后的实体 先新增，后删除，解决轨迹闪现问题
        let entity = this.$data._viewer.entities.add({
          id: newPolyId,
          polyline: {
            positions: polyPosition,
            width: 2,
            material: color,
            followSurface: false,
            show: true,
          },
        });
        //等待一小段时间，确保在新实体被添加之后再移除原来实体，避免闪现问题
        setTimeout(() => {
          this.$data._viewer.entities.removeById(polyId);
        }, 100);
        if (!this.isShow) {
          //如果当前轨迹显示为false，则查看更新的轨迹是否被设置了单个显示状态
          for (let i = 0; i < this.redSelection.length; i++) {
            if (id == this.redSelection[i].id) return;
          }
          for (let i = 0; i < this.blueSelection.length; i++) {
            if (id == this.blueSelection[i].id) return;
          }
          entity.show = false;
        }
      }
    },
    //轨迹显隐控制
    showChange() {
      //弹出提示
      if (this.isShow) {
        const h = this.$createElement;
        this.$notify({
          title: '开启显示',
          message: h('i', '开启全部平台轨迹显示'),
          offset: -18,
          duration: 2000
        });
      }
      else {
        const h = this.$createElement;
        this.$notify({
          title: '关闭显示',
          message: h('i', '关闭全部平台轨迹显示，可通过勾选显示指定平台轨迹'),
          offset: -18,
          duration: 2000
        });
      }
      //清空选择内容
      this.redSelection = [];
      this.blueSelection = [];
      this.$refs.redTable.clearSelection();
      this.$refs.blueTable.clearSelection();
      //遍历轨迹实体集合 设置所有实体的show属性
      for (let i = 0; i < this.polyLineList.length; i++) {
        let entity = this.$data._viewer.entities.getById(
          this.polyLineList[i].polyId
        );
        if (entity == undefined) {
          entity = this.$data._viewer.entities.getById(this.polyLineList[i].polyId + 1e7);
        }
        entity.show = this.isShow;
      }
    },
    /*
      移动单个模型实体方法
      输入：
        id：要移动的实体id号
        position：实体移动后的位置
        color：移动轨迹颜色
    */
    moveSingleModel(id, position, color) {
      //通过id获取实体
      let entity = this.$data._viewer.entities.getById(id);
      //获取实体原始位置
      let oldPosition = entity.position._value;
      //如果未移动 返回
      if (position.x == oldPosition.x && position.y == oldPosition.y) return;
      //设置方向
      entity.orientation = this.Cesium.VelocityOrientationProperty(
        entity.position
      );
      //模型移动--直接修改position 的 value值实现
      entity.position.setValue(position);
      //绘制移动路径
      this.drawTrace(id, position, oldPosition, color);
    },
    //移动本平台模型
    moveNavModel() {
      console.log("移动本平台模型");
      let position = this.Cesium.Cartesian3.fromDegrees(
        this.navPos[1].value,
        this.navPos[0].value,
        0
      );
      this.moveSingleModel(this.platformID, position, this.Cesium.Color.RED);
    },
    //移动友方模型
    moveFriendModel() {
      console.log("移动友方模型");
      this.map.data.friend.forEach((element) => {
        let position = this.Cesium.Cartesian3.fromDegrees(
          element.value[0],
          element.value[1],
          0
        );
        this.moveSingleModel(element.id, position, this.Cesium.Color.RED);
      });
    },
    //移动敌方模型
    moveEnemyModel() {
      console.log("移动敌方模型");
      this.map.data.enemy.forEach((element) => {
        let position = this.Cesium.Cartesian3.fromDegrees(
          element.value[0],
          element.value[1],
          0
        );
        this.moveSingleModel(element.id, position, this.Cesium.Color.BLUE);
      });
    },
    //红方轨迹控制操作
    handleRedSelectionChange(val) {
      if (this.isShow) return;
      for (let i = 0; i < this.redSelection.length; i++) {
        let flag = 0;
        //检查当前选中是否被取消
        for (let j = 0; j < val.length; j++) {
          if (val[j].id == this.redSelection[i].id) {
            flag++;
            break;
          }
        }
        if (flag == 0) {//新选择中被取消了
          for (let z = 0; z < this.polyLineList.length; z++) {
            //找到对应的轨迹实体并将其show属性置为false
            if (this.redSelection[i].id == this.polyLineList[z].entityId) {
              let entity = this.$data._viewer.entities.getById(
                this.polyLineList[z].polyId
              );
              if (entity == undefined) {
                entity = this.$data._viewer.entities.getById(
                  this.polyLineList[z].polyId + 1e7
                );
              }
              entity.show = false;
              break;
            }
          }
        }
      }
      if (!this.isShow) {
        for (let i = 0; i < this.polyLineList.length; i++) {
          for (let j = 0; j < val.length; j++) {
            //将所有被选中的红方平台的轨迹实体show属性置为true
            if (val[j].id == this.polyLineList[i].entityId) {
              let entity = this.$data._viewer.entities.getById(
                this.polyLineList[i].polyId
              );
              if (entity == undefined) {
                entity = this.$data._viewer.entities.getById(
                  this.polyLineList[i].polyId + 1e7
                );
              }
              entity.show = true;
            }
          }
        }
      }
      //更新
      this.redSelection = val;
    },
    //蓝方轨迹控制操作
    handleBlueSelectionChange(val) {
      if (this.isShow) return;
      for (let i = 0; i < this.blueSelection.length; i++) {
        let flag = 0;
        //检查当前选中是否被取消
        for (let j = 0; j < val.length; j++) {
          if (val[j].id == this.blueSelection[i].id) {
            flag++;
            break;
          }
        }
        if (flag == 0) {//新选择中被取消了
          for (let z = 0; z < this.polyLineList.length; z++) {
            //找到对应的轨迹实体并将其show属性置为false
            if (this.blueSelection[i].id == this.polyLineList[z].entityId) {
              let entity = this.$data._viewer.entities.getById(
                this.polyLineList[z].polyId
              );
              if (entity == undefined) {
                entity = this.$data._viewer.entities.getById(
                  this.polyLineList[z].polyId + 1e7
                );
              }
              entity.show = false;
              break;
            }
          }
        }
      }
      for (let i = 0; i < this.polyLineList.length; i++) {
        for (let j = 0; j < val.length; j++) {
          //将所有被选中的蓝方平台的轨迹实体show属性置为true
          if (val[j].id == this.polyLineList[i].entityId) {
            let entity = this.$data._viewer.entities.getById(
              this.polyLineList[i].polyId
            );
            if (entity == undefined) {
              entity = this.$data._viewer.entities.getById(
                this.polyLineList[i].polyId + 1e7
              );
            }
            entity.show = true;
          }
        }
      }
      this.blueSelection = val;
    },
    //根据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)));
    },
    //获取相机层级和视高
    getCameraHeightAndZoom() {
      let height = this.$data._viewer.camera.positionCartographic.height;
      let zoom = this.heightToZoom(height);
      this.$store.commit("app/setCameraLocation", { height, zoom });
    },
    //显示鼠标经纬度
    getMouseLocation(event) {
      let { longitude, latitude } = this.getCoordinatesFromEvent(event);
      this.$store.commit("app/setMouseLocation", { longitude, latitude });
    },
    // 从鼠标点击事件获取坐标
    getCoordinatesFromEvent(event) {
      let clickPosition = new this.Cesium.Cartesian2(
        event.clientX - 1080,
        event.clientY - 160
      );
      //获取地图上的经纬度
      const viewerPosition =
        this.$data._viewer.scene.camera.pickEllipsoid(clickPosition);
      const cartographic =
        this.$data._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,
      };
    },
    //获取camera中心点坐标
    getCenterPosition() {
      let result = this.$data._viewer.camera.pickEllipsoid(
        new this.Cesium.Cartesian2(
          this.$data._viewer.canvas.clientWidth / 2,
          this.$data._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 = this.$data._viewer.camera.positionCartographic.height;
      return {
        longitude: lon,
        latitude: lat,
        height: height,
      };
    },
    // 图像放大
    big() {
      let { longitude, latitude, height } = this.getCenterPosition();
      this.$data._viewer.camera.flyTo({
        destination: this.Cesium.Cartesian3.fromDegrees(
          longitude,
          latitude,
          height / 1.8
        ),
        duration: 1.0,
      });
    },
    //图像缩小
    small() {
      let { longitude, latitude, height } = this.getCenterPosition();
      this.$data._viewer.camera.flyTo({
        destination: this.Cesium.Cartesian3.fromDegrees(
          longitude,
          latitude,
          height * 1.2
        ),
        duration: 1.0,
      });
    },
    home() {
      this.$data._viewer.camera.flyTo({
        destination: this.Cesium.Cartesian3.fromDegrees(
          117.918977,
          25.0,
          1500000
        ),
        duration: 2.0,
      });
    },
  },
};
</script>
<style scoped>
.model {
  position: absolute;
  top: 20px;
  left: 100px;
  z-index: 999;
}

.tableHeight {
  height: 100%;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.navCtrl {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 999;
}

.table1 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 999;
  width: 400px;
  height: 800px;
}

.table1 /deep/ .el-card__header {
  background-color: #11144e;
  color: white;
}

.table2 {
  position: absolute;
  top: 430px;
  left: 10px;
  z-index: 999;
  width: 400px;
  height: 400px;
}

.table2 /deep/ .el-card__header {
  background-color: #11144e;
  color: white;
}

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

.container {
  height: 100%;
}

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

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

.situationButtons {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-100%);
}

.buttons .el-button {
  margin: 5px !important;
}
</style>