孙浩博，fixed：态势界面放大缩小按钮

src/views/situation/index.vue

@@ -1,25 +1,34 @@
 <template>
-    <div class="container">
-      <div id="modeltooltip">左键单击确认</div>
-      <el-row style="height:40px;">
-        <div class="myHeader" >
-          <el-button :type="(this.dimension==2?'success':'danger')" @click="dimensionswitch(2)" round>二维</el-button>
-          <el-button :type="(this.dimension==3?'success':'danger')" @click="dimensionswitch(3)" round>三维</el-button>
-          <el-button :type="(this.dimension==5?'success':'danger')" @click="dimensionswitch(5)" round>一体化</el-button>
+  <div class="container">
+    <div id="modeltooltip">左键单击确认</div>
+    <el-row style="height: 40px">
+      <div class="myHeader">
+        <el-button :type="this.dimension == 2 ? 'success' : 'danger'" @click="dimensionswitch(2)" round>二维</el-button>
+        <el-button :type="this.dimension == 3 ? 'success' : 'danger'" @click="dimensionswitch(3)" round>三维</el-button>
+        <el-button :type="this.dimension == 5 ? 'success' : 'danger'" @click="dimensionswitch(5)" round>
+          一体化
+        </el-button>
+      </div>
+    </el-row>
+    <el-row id="map" style="height: 790px; width: 100%; display: flex; position: relative">
+      <el-col style="height: 100%; position: relative" :span="this.leftwidth">
+        <div class="main-layout" v-on:mouseover="changeActive('3D')">
+          <div id="3DcesiumContainer" class="map"></div>
         </div>
-      </el-row>
-      <el-row id="map" style="height:790px;width: 100%; display:flex;position: relative;">
-        <el-col style="height:100%;position: relative;" :span="this.leftwidth"  >
-          <div class="main-layout" v-on:mouseover="changeActive('3D')">
-            <div id="3DcesiumContainer" class="map"></div>
-          </div>
-        </el-col>
-        <el-col style="height:100%;position: relative;" :span="(24-this.leftwidth)" >
-          <div class="main-layout" v-on:mouseover="changeActive('2D')">
-            <div id="2DcesiumContainer" class="map"></div>
-          </div>
-        </el-col>
-        <el-tabs type="border-card" v-model="activeName" tab-position="left" class="menu" :stretch="true" @tab-click="legendClick">
+      </el-col>
+      <el-col style="height: 100%; position: relative" :span="24 - this.leftwidth">
+        <div class="main-layout" v-on:mouseover="changeActive('2D')">
+          <div id="2DcesiumContainer" class="map"></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="first">
           <span slot="label">
             <el-modeltooltip class="item" effect="dark" content="标绘" placement="left">
@@ -33,98 +42,65 @@
               <i class="el-icon-receiving"></i>
             </el-modeltooltip>
           </span>
-          <el-radio-group v-model="whosmodel" style="margin: 0 auto;" size="mini">
+          <el-radio-group v-model="whosmodel" style="margin: 0 auto" size="mini">
             <el-radio-button label="red">红方</el-radio-button>
             <el-radio-button label="blue">蓝方</el-radio-button>
-          </el-radio-group >
+          </el-radio-group>
           <div v-if="whosmodel == 'blue'" class="model">
-            <div :class="{active:this.modelType == 'ThadRocket'}" 
-                  @click="selectmodel('ThadRocket')">
-              <el-image
-                  style="width: 100px; height: 80px; margin: 0 auto;"
-                  :src="url"
-                  fit="fill">
-              </el-image>
-              <div style="text-align: center;">Thad拦截导弹</div>
+            <div :class="{ active: this.modelType == 'ThadRocket' }" @click="selectmodel('ThadRocket')">
+              <el-image style="width: 100px; height: 80px; margin: 0 auto" :src="url" fit="fill"></el-image>
+              <div style="text-align: center">Thad拦截导弹</div>
             </div>
-            <div :class="{active:this.modelType == 'interceptRadar'}" 
-                  @click="selectmodel('interceptRadar')">
-              <el-image
-                  style="width: 100px; height: 80px; margin: 0 auto;"
-                  :src="url"
-                  fit="fill">
-              </el-image>
-              <div style="text-align: center;">拦截雷达</div>
+            <div :class="{ active: this.modelType == 'interceptRadar' }" @click="selectmodel('interceptRadar')">
+              <el-image style="width: 100px; height: 80px; margin: 0 auto" :src="url" fit="fill"></el-image>
+              <div style="text-align: center">拦截雷达</div>
             </div>
-            <div :class="{active:this.modelType == 'interceptSatellite'}" 
-                  @click="selectmodel('interceptSatellite')">
-              <el-image
-                  style="width: 100px; height: 80px; margin: 0 auto;"
-                  :src="url"
-                  fit="fill">
-              </el-image>
-              <div style="text-align: center;">拦截卫星</div>
+            <div :class="{ active: this.modelType == 'interceptSatellite' }" @click="selectmodel('interceptSatellite')">
+              <el-image style="width: 100px; height: 80px; margin: 0 auto" :src="url" fit="fill"></el-image>
+              <div style="text-align: center">拦截卫星</div>
             </div>
           </div>
           <div v-else class="model">
-            <div :class="{active:this.modelType == 'rocket'}" 
-                  @click="selectmodel('rocket')">
-              <el-image
-                  style="width: 100px; height: 80px; margin: 0 auto;"
-                  :src="url"
-                  fit="fill">
-              </el-image>
-              <div style="text-align: center;">弹道导弹</div>
+            <div :class="{ active: this.modelType == 'rocket' }" @click="selectmodel('rocket')">
+              <el-image style="width: 100px; height: 80px; margin: 0 auto" :src="url" fit="fill"></el-image>
+              <div style="text-align: center">弹道导弹</div>
             </div>
-            <div :class="{active:this.modelType == 'radarTrap'}" 
-                  @click="selectmodel('radarTrap')">
-              <el-image
-                  style="width: 100px; height: 80px; margin: 0 auto;"
-                  :src="url"
-                  fit="fill">
-              </el-image>
-              <div style="text-align: center;">雷达诱饵</div>
+            <div :class="{ active: this.modelType == 'radarTrap' }" @click="selectmodel('radarTrap')">
+              <el-image style="width: 100px; height: 80px; margin: 0 auto" :src="url" fit="fill"></el-image>
+              <div style="text-align: center">雷达诱饵</div>
             </div>
-            <div :class="{active:this.modelType == 'GRradar'}" 
-                  @click="selectmodel('GRradar')">
-              <el-image
-                  style="width: 100px; height: 80px; margin: 0 auto;"
-                  :src="url"
-                  fit="fill">
-              </el-image>
-              <div style="text-align: center;">干扰雷达</div>
+            <div :class="{ active: this.modelType == 'GRradar' }" @click="selectmodel('GRradar')">
+              <el-image style="width: 100px; height: 80px; margin: 0 auto" :src="url" fit="fill"></el-image>
+              <div style="text-align: center">干扰雷达</div>
             </div>
           </div>
         </el-tab-pane>
         <el-tab-pane name="third">
           <span slot="label">
-          <el-modeltooltip class="item" effect="dark" content="测量" placement="left">
-            <i class="el-icon-discount"></i>
-          </el-modeltooltip>
+            <el-modeltooltip class="item" effect="dark" content="测量" placement="left">
+              <i class="el-icon-discount"></i>
+            </el-modeltooltip>
           </span>
         </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-coin" circle></el-button>
-        <el-button icon="el-icon-bangzhu" @click="Fly()" circle></el-button>
+        <!-- <el-button icon="el-icon-coin" circle></el-button> -->
+        <!-- <el-button icon="el-icon-bangzhu" @click="Fly()" circle></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>
-
   </div>
 </template>
 <script>
 import screenfull from 'screenfull';
 import fireController from '../../api/fireController';
-export default ({
-  computed: {
+export default {
+  computed: {},
 
-  },
-
-  data() {
+  data () {
     return {
       situation: [],
       unit: [],
@@ -141,82 +117,81 @@ export default ({
         index: -1,
         isActive: false
       },
-      whosmodel: "red",
+      whosmodel: 'red',
       modelType: null,
       url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-  
-    }
+    };
   },
-  mounted() {
+  mounted () {
     this.cesiumInit();
     this.getData();
   },
 
   methods: {
-    //获取所有数据
-    getData(){
+    // 获取所有数据
+    getData () {
       this.getCenter();
       this.getSatellite();
       this.getUnit();
       this.getSituation();
     },
-    //获取场景想定数据
-    getSituation() {
+    // 获取场景想定数据
+    getSituation () {
       let params = {
-        datasourceId: "1656243335922192384",
+        datasourceId: '1656243335922192384',
         filterDtoList: [],
         pageParam: {
           pageNum: 1,
           pageSize: 10
         }
-      }
-      fireController.situation(this, params).then(res => {
-        this.situation = res.data.dataList
-      })
+      };
+      fireController.situation(this, params).then((res) => {
+        this.situation = res.data.dataList;
+      });
     },
-    //获取作战单元数据
-    getUnit() {
+    // 获取作战单元数据
+    getUnit () {
       let params = {
-        datasourceId: "1657931215497334784",
+        datasourceId: '1657931215497334784',
         filterDtoList: [],
         pageParam: {
           pageNum: 1,
           pageSize: 10
         }
-      }
-      fireController.unit(this, params).then(res => {
-        this.unit = res.data.dataList
-      })
+      };
+      fireController.unit(this, params).then((res) => {
+        this.unit = res.data.dataList;
+      });
     },
-    //获取指挥中心数据
-    getCenter() {
+    // 获取指挥中心数据
+    getCenter () {
       let params = {
-        datasourceId: "1654421731512684544",
+        datasourceId: '1654421731512684544',
         filterDtoList: [],
         pageParam: {
           pageNum: 1,
           pageSize: 10
         }
-      }
-      fireController.center(this, params).then(res => {
-        this.center = res.data.dataList
-      })
+      };
+      fireController.center(this, params).then((res) => {
+        this.center = res.data.dataList;
+      });
     },
-    //获取预警卫星数据
-    getSatellite() {
+    // 获取预警卫星数据
+    getSatellite () {
       let params = {
-        datasourceId: "1654424480958648320",
+        datasourceId: '1654424480958648320',
         filterDtoList: [],
         pageParam: {
           pageNum: 1,
           pageSize: 10
         }
-      }
-      fireController.satellite(this, params).then(res => {
-        this.satellite = res.data.dataList
-      })
+      };
+      fireController.satellite(this, params).then((res) => {
+        this.satellite = res.data.dataList;
+      });
     },
-    cesiumInit() {
+    cesiumInit () {
       this.viewer2D = new this.Cesium.Viewer('2DcesiumContainer', {
         sceneMode: this.Cesium.SceneMode.SCENE2D,
         animation: false, // 是否显示时间轴动画
@@ -236,7 +211,6 @@ export default ({
           tileMatrixSetID: 'GoogleMapsCompatible',
           show: false
         })
-
       });
 
       this.viewer3D = new this.Cesium.Viewer('3DcesiumContainer', {
@@ -261,12 +235,12 @@ export default ({
         // }),
 
         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.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({
@@ -288,7 +262,7 @@ export default ({
         //   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)
         // 方向，俯视和仰视的视角
@@ -296,17 +270,17 @@ export default ({
         //   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);
     },
-    removeAllModel() {
+    removeAllModel () {
       this.viewer.entities.removeAll(); // 移除全部模型
     },
-    sync() {
+    sync () {
       if (this.mousevalue == '3D') {
         // 三维地图中心点
         let center = new this.Cesium.Cartesian2(
@@ -320,15 +294,12 @@ export default ({
         // 判断中心点是否在椭球体上
         if (this.Cesium.defined(position)) {
           // 获取三维地图中心点与相机之间的距离
-          let distance = this.Cesium.Cartesian3.distance(
-            position,
-            this.viewer3D.scene.camera.positionWC
-          );
-          position = this.convertWorldToCartographic(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)
-          })
+          });
           console.log(distance);
         }
       }
@@ -346,17 +317,17 @@ export default ({
           // 获取三维地图中心点与相机之间的距离
           let distance = this.viewer2D.scene.camera.positionCartographic.height;
 
-          position = this.convertWorldToCartographic(position)
+          position = this.convertWorldToCartographic(position);
           // 更新三维地图
           this.viewer3D.scene.camera.setView({
             destination: new this.Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, distance)
-          })
-          console.log(this.viewer2D.scene.camera.positionWC)
+          });
+          console.log(this.viewer2D.scene.camera.positionWC);
         }
       }
     },
     // 将世界坐标系转换为经纬度坐标系
-    convertWorldToCartographic(worldPosition) {
+    convertWorldToCartographic (worldPosition) {
       const ellipsoid = this.viewer2D.scene.globe.ellipsoid;
       const cartographic = ellipsoid.cartesianToCartographic(worldPosition);
       const longitude = this.Cesium.Math.toDegrees(cartographic.longitude);
@@ -365,12 +336,12 @@ export default ({
       return { longitude, latitude, height };
     },
     // 监听地图变化
-    changeActive(value) {
-      this.mousevalue = value
-      console.log(value)
+    changeActive (value) {
+      this.mousevalue = value;
+      console.log(value);
     },
-    dimensionswitch(value) {
-      this.dimension = value
+    dimensionswitch (value) {
+      this.dimension = value;
       if (value == 3) {
         this.leftwidth = 24;
       } else if (value == 2) {
@@ -380,7 +351,7 @@ export default ({
       }
     },
     // 全屏缩小
-    ismax() {
+    ismax () {
       if (screenfull.isEnabled && screenfull.isFullscreen) {
         screenfull.exit();
       } else {
@@ -388,89 +359,97 @@ export default ({
       }
     },
     /* 获取camera中心点坐标 */
-    getCenterPosition() {
-      var result = this.viewer2D.camera.pickEllipsoid(new this.Cesium.Cartesian2(this.viewer2D.canvas.clientWidth / 2, this.viewer2D.canvas
-        .clientHeight / 2))
-      var curPosition = this.Cesium.Ellipsoid.WGS84.cartesianToCartographic(result)
-      var lon = curPosition.longitude * 180 / Math.PI
-      var lat = curPosition.latitude * 180 / Math.PI
-      var height = this.viewer2D.camera.positionCartographic.height
+    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() {
+    big () {
+      let { lon, lat, height } = this.getCenterPosition(this.dimension === 3);
+      let viewer = this.dimension === 3 ? this.viewer3D : this.viewer2D;
       // 镜头拉进
-      this.viewer2D.camera.flyTo({
-        destination: this.Cesium.Cartesian3.fromDegrees(this.getCenterPosition().lon, this.getCenterPosition().lat, this.getCenterPosition().height / 1.8),
+      viewer.camera.flyTo({
+        destination: this.Cesium.Cartesian3.fromDegrees(lon, lat, height / 1.8),
         duration: 1.0
-      })
+      });
     },
     /* 地图缩小 */
-    small() {
+    small () {
+      let { lon, lat, height } = this.getCenterPosition(this.dimension === 3);
+      let viewer = this.dimension === 3 ? this.viewer3D : this.viewer2D;
       // 镜头远离
-      this.viewer2D.camera.flyTo({
-        destination: this.Cesium.Cartesian3.fromDegrees(this.getCenterPosition().lon, this.getCenterPosition().lat, this.getCenterPosition().height * 1.2),
+      viewer.camera.flyTo({
+        destination: this.Cesium.Cartesian3.fromDegrees(lon, lat, height * 1.2),
         duration: 1.0
-      })
+      });
     },
-    home() {
-      this.viewer2D.camera.flyTo({
-        destination: this.Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000)
+    home () {
+      let viewer = this.dimension === 3 ? this.viewer3D : this.viewer2D;
+      viewer.camera.flyTo({
+        destination: this.Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000),
+        duration: 2.0
       });
     },
-    Fly() {
-      this.shouldAnimate = !this.shouldAnimate
-      this.viewer2D.clock.shouldAnimate = true
-      this.viewer3D.clock.shouldAnimate = true
+    Fly () {
+      this.shouldAnimate = !this.shouldAnimate;
+      this.viewer2D.clock.shouldAnimate = true;
+      this.viewer3D.clock.shouldAnimate = true;
       if (this.shouldAnimate == true) {
-        this.startRun({ multiplier: 2000 })
+        this.startRun({ multiplier: 2000 });
       } else {
-        this.stopRun()
+        this.stopRun();
       }
     },
-    startRun(option = { multiplier: 1 }) {
+    startRun (option = { multiplier: 1 }) {
       // 监听每次渲染前执行矩阵求解
-      this.viewer3D.scene.postUpdate.addEventListener(this.rotateSetting)
+      this.viewer3D.scene.postUpdate.addEventListener(this.rotateSetting);
       // 根据option修改一些参数
       if (this.viewer3D.clock) {
-        const keys = Object.keys(option)
+        const keys = Object.keys(option);
         for (let k of keys) {
-          this.viewer3D.clock[k] = option[k]
+          this.viewer3D.clock[k] = option[k];
         }
       }
     },
-    stopRun() {
-      let viewer = this.viewer3D
-      viewer.clock.multiplier = 1
-      viewer.scene.postUpdate.removeEventListener(this.rotateSetting)
+    stopRun () {
+      let viewer = this.viewer3D;
+      viewer.clock.multiplier = 1;
+      viewer.scene.postUpdate.removeEventListener(this.rotateSetting);
     },
-    rotateSetting() {
-      let Cesium = this.Cesium
-      let viewer = this.viewer3D
+    rotateSetting () {
+      let Cesium = this.Cesium;
+      let viewer = this.viewer3D;
       if (!viewer || viewer.scene.mode !== Cesium.SceneMode.SCENE3D) {
-        return
+        return;
       }
-      const icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(
-        viewer.clock.currentTime
-      )
+      const icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(viewer.clock.currentTime);
       // icrfToFixed 在上面的方法中，若没加载好所需的计算资源会返回undefined，判断下
       if (Cesium.defined(icrfToFixed)) {
-        const camera = viewer.camera
-        const offset = Cesium.Cartesian3.clone(camera.position)
-        const transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed)
-        camera.lookAtTransform(transform, offset)
+        const camera = viewer.camera;
+        const offset = Cesium.Cartesian3.clone(camera.position);
+        const transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed);
+        camera.lookAtTransform(transform, offset);
       }
     },
     /// / tabs 切换点击
-    legendClick(tab, event) {
+    legendClick (tab, event) {
       var tab_content = document.querySelectorAll('.menu .el-tabs__content');
       if (this.currentLab.index == tab.index) {
-        tab_content[0].style.display == 'none' || '' ? tab_content[0].style.display = 'block' : tab_content[0].style.display = 'none';
+        tab_content[0].style.display == 'none' || ''
+          ? (tab_content[0].style.display = 'block')
+          : (tab_content[0].style.display = 'none');
       }
       if (this.currentLab.index != tab.index) {
         this.currentLab.index = tab.index;
@@ -478,136 +457,130 @@ export default ({
       }
     },
 
-    selectmodel(modelType){
-        if(this.modelType== modelType){
-          this.modelType == null
-        }else{
-          this.modelType = modelType
-          var map = document.getElementById("map")
-          map.style.cursor= "crosshair"
-          document.addEventListener("mousemove", function(event) {
-            var modeltooltip = document.getElementById("modeltooltip");
-            modeltooltip.style.display = "block";
-            modeltooltip.style.left = event.clientX-180+"px";
-            modeltooltip.style.top = event.clientY-100+"px";
-          });
-
-          document.addEventListener("mouseout", function() {
-            var modeltooltip = document.getElementById("modeltooltip");
-            modeltooltip.style.display = "none";
-          });
-        }
-        
+    selectmodel (modelType) {
+      if (this.modelType == modelType) {
+        this.modelType == null;
+      } else {
+        this.modelType = modelType;
+        var map = document.getElementById('map');
+        map.style.cursor = 'crosshair';
+        document.addEventListener('mousemove', function (event) {
+          var modeltooltip = document.getElementById('modeltooltip');
+          modeltooltip.style.display = 'block';
+          modeltooltip.style.left = event.clientX - 180 + 'px';
+          modeltooltip.style.top = event.clientY - 100 + 'px';
+        });
 
+        document.addEventListener('mouseout', function () {
+          var modeltooltip = document.getElementById('modeltooltip');
+          modeltooltip.style.display = 'none';
+        });
+      }
     }
-
   }
-
-})
+};
 </script>
-  <style scoped>
-  .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%;
-  }
-  
-  /deep/ .el-card__body {
-    height: 100% !important;
-    padding: 0px !important;
-  }
-  
-  .main-layout {
-    height: 100%;
-    width: 100%;
-  }
-  
-  .container {
-    height: 100%;
-   
-  }
-  
-  .map {
-    width: 100%;
-    height: 100%;
-  }
-  
-  .menu{
-    position: absolute;
-    height: 400px;
-    z-index: 999;
-    left: 20px;
-    top: 20px;
-  }
-  
-  /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;
-  }
+<style scoped>
+.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%;
+}
+
+/deep/ .el-card__body {
+  height: 100% !important;
+  padding: 0px !important;
+}
+
+.main-layout {
+  height: 100%;
+  width: 100%;
+}
 
-  /deep/.el-tabs--border-card > .el-tabs__content {
-    width: 300px;
-    display: none;
+.container {
+  height: 100%;
 }
 
-.model{
+.map {
+  width: 100%;
+  height: 100%;
+}
+
+.menu {
+  position: absolute;
+  height: 400px;
+  z-index: 999;
+  left: 20px;
+  top: 20px;
+}
+
+/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;
+}
+
+/deep/.el-tabs--border-card > .el-tabs__content {
+  width: 300px;
+  display: none;
+}
+
+.model {
   display: flex;
   width: 100%;
   flex-wrap: wrap;
 }
 
-.model > div{
+.model > div {
   width: 50%;
   height: 120px;
   padding: 5px;
 }
 
-.model > div:hover{
+.model > div:hover {
   border: 2px solid blue;
 }
 
-.model > div:active{
+.model > div:active {
   border: 2px solid red;
 }
 
-.active{
+.active {
   border: 2px solid red !important;
-
 }
 
 .model .el-image {
-    display: block !important;
+  display: block !important;
 }
 
-/deep/ .el-image .el-image__inner{
-  border:1px solid #ddd;
+/deep/ .el-image .el-image__inner {
+  border: 1px solid #ddd;
   border-radius: 5px;
 }
 
@@ -620,4 +593,4 @@ export default ({
   pointer-events: none;
   z-index: 999;
 }
-  </style>
+</style>

yarn.lock

@@ -3013,6 +3013,11 @@ caseless@~0.12.0:
   resolved "https://registry.npmmirror.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==
 
+cesium@1.93:
+  version "1.93.0"
+  resolved "https://registry.npmmirror.com/cesium/-/cesium-1.93.0.tgz#4e98e7770b993a87e53bffa95ac5cbb89137d390"
+  integrity sha512-y5+KkISn3+0MZxGj96mNaZc5LAfpiOs1fmZCInH2xHwYw43FaaRbvdSHXZs8OwJ5dZIlo/m1biMyOKr354L+UA==
+
 chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.npmmirror.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -3554,7 +3559,7 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.npmmirror.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==
 
-copy-webpack-plugin@^5.1.1:
+copy-webpack-plugin@^5.0.0, copy-webpack-plugin@^5.1.1:
   version "5.1.2"
   resolved "https://registry.npmmirror.com/copy-webpack-plugin/-/copy-webpack-plugin-5.1.2.tgz#8a889e1dcafa6c91c6cd4be1ad158f1d3823bae2"
   integrity sha512-Uh7crJAco3AjBvgAy9Z75CjK8IG+gxaErro71THQ+vv/bl4HaQcpkexAY8KVW/T6D2W2IRr+couF/knIRkZMIQ==
@@ -10104,6 +10109,11 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+screenfull@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.npmmirror.com/screenfull/-/screenfull-5.2.0.tgz#6533d524d30621fc1283b9692146f3f13a93d1ba"
+  integrity sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==
+
 scroll-tabs@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/scroll-tabs/-/scroll-tabs-1.0.1.tgz#bac04e4a1725e8a03344bae644dd6d7cdc192452"