fireManage/src/views/situation/index.vue

<template>
    <div class="container">
      <el-row style="height:50px;">
        <div class="header" >
          <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 style="height:calc(100% - 50px);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-tab-pane name="first">
          <span slot="label">
          <el-tooltip class="item" effect="dark" content="标绘" placement="left">
            <i class="el-icon-wind-power"></i>
          </el-tooltip>
          </span>
        </el-tab-pane>
        <el-tab-pane name="second">
          <span slot="label">
          <el-tooltip class="item" effect="dark" content="模型" placement="left">
            <i class="el-icon-receiving"></i>
          </el-tooltip>
          </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-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';
export default ({
  computed: {
  
  },
    
  data () {
    return {
      viewer2D: null,
      viewer3D: null,
      dimension: 3,
      leftwidth: 0,
      mousevalue: null,
      shouldAnimate: false,
      activeName: 'first',
      currentLab: {
        index: -1,
        isActive: false
      }
  
    }
  },
  mounted () {
    this.cesiumInit();
  },
  
  methods: {
      
    cesiumInit () {
      this.viewer2D = new this.Cesium.Viewer('2DcesiumContainer', {
        sceneMode: this.Cesium.SceneMode.SCENE2D,
        animation: false, // 是否显示时间轴动画
        baseLayerPicker: false,
        homeButton: false,
        geocoder: false,
        timeline: false,
        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: false, // 是否显示时间轴动画
        baseLayerPicker: false,
        homeButton: false,
        geocoder: false,
        timeline: false,
        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);
    },
    removeAllModel () {
      this.viewer.entities.removeAll(); // 移除全部模型
    },
    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);
        console.log(position);
        // 判断中心点是否在椭球体上
        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)
          })
          console.log(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);
        console.log(position);
        // 判断中心点是否在椭球体上
        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)
          })
          console.log(this.viewer2D.scene.camera.positionWC)
        }
      }
    },
    // 将世界坐标系转换为经纬度坐标系
    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
      console.log(value)
    },
    dimensionswitch (value) {
      this.dimension = value
      if (value == 3) {
        this.leftwidth = 24;
      } else if (value == 2) {
        this.leftwidth = 0;
      } else {
        this.leftwidth = 12;
      }
    },
    // 全屏缩小
    ismax () {
      if (screenfull.isEnabled && screenfull.isFullscreen) {
        screenfull.exit();
      } else {
        screenfull.request();
      }
    },
    /* 获取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
      return {
        lon: lon,
        lat: lat,
        height: height
      }
    },
  
    /* 地图放大 */
    big () {
      // 镜头拉进
      this.viewer2D.camera.flyTo({
        destination: this.Cesium.Cartesian3.fromDegrees(this.getCenterPosition().lon, this.getCenterPosition().lat, this.getCenterPosition().height / 1.8),
        duration: 1.0
      })
    },
    /* 地图缩小 */
    small () {
      // 镜头远离
      this.viewer2D.camera.flyTo({
        destination: this.Cesium.Cartesian3.fromDegrees(this.getCenterPosition().lon, this.getCenterPosition().lat, this.getCenterPosition().height * 1.2),
        duration: 1.0
      })
    },
    home () {
      this.viewer2D.camera.flyTo({
        destination: this.Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000)
      });
    },
    Fly () {
      this.shouldAnimate = !this.shouldAnimate
      this.viewer2D.clock.shouldAnimate = true
      this.viewer3D.clock.shouldAnimate = true
      if (this.shouldAnimate == true) {
        this.startRun({ multiplier: 2000 })
      } else {
        this.stopRun()
      }
    },
    startRun (option = { multiplier: 1 }) {
      // 监听每次渲染前执行矩阵求解
      this.viewer3D.scene.postUpdate.addEventListener(this.rotateSetting)
      // 根据option修改一些参数
      if (this.viewer3D.clock) {
        const keys = Object.keys(option)
        for (let k of keys) {
          this.viewer3D.clock[k] = option[k]
        }
      }
    },
    stopRun () {
      let viewer = this.viewer3D
      viewer.clock.multiplier = 1
      viewer.scene.postUpdate.removeEventListener(this.rotateSetting)
    },
    rotateSetting () {
      let Cesium = this.Cesium
      let viewer = this.viewer3D
      if (!viewer || viewer.scene.mode !== Cesium.SceneMode.SCENE3D) {
        return
      }
      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)
      }
    },
    /// / tabs 切换点击
    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';
      }
      if (this.currentLab.index != tab.index) {
        this.currentLab.index = tab.index;
        tab_content[0].style.display = 'block';
      }
    }
  
  }
  
})
</script>
  <style scoped>
  .header{
    background-color: #1c222b;
    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代表的是垂直方向*/
  }
  .header .el-button{
    width: 150px;
    margin: 0 10px;
    height:30px;
    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: unset !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>