yclw/src/views/groupPage/districtPageModules/commonModules/ToolBox.vue

<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__flipInX"
    leave-active-class="animate__flipOutX"
  >
    <div class="widget-ToolBox" ref="widget-ToolBox">
      <div class="tool-list">
        <div
          class="list-item"
          v-for="item of toolList"
          :key="item.name"
          :title="item.name"
          v-show="isFold"
          @click="activeEvent(item.name)"
        >
          <img :src="item.imgUrl" />
        </div>
        <div class="list-item" :title="'工具栏'" @click="isFold = !isFold">
          <img :src="unfoldUrl" />
        </div>
      </div>
      <div class="roam-panel" v-show="isRoaming">
        <ViewManagement :show="isRoaming" />
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import ViewManagement from '@/views/groupPage/districtPageModules/customTools/viewManagement.vue'
const Cesium = (window as any).Cesium
const viewMemoryType = {
  none: 'none',
  pre: 'pre',
  after: 'after'
} //记录视图
//工具栏
@Component({ name: 'ToolBox', components: { ViewManagement } })
export default class ToolBox extends Vue {
  toolList: Array<any> = [
    { imgUrl: require('@/views/groupPage/images/工具栏/基础地图.png'), name: '基础地图' },
    { imgUrl: require('@/views/groupPage/images/工具栏/初始范围.png'), name: '初始范围' },
    { imgUrl: require('@/views/groupPage/images/工具栏/俯视.png'), name: '俯视' },
    { imgUrl: require('@/views/groupPage/images/工具栏/左视图.png'), name: '上一视图' },
    { imgUrl: require('@/views/groupPage/images/工具栏/右视图.png'), name: '下一视图' },
    { imgUrl: require('@/views/groupPage/images/工具栏/漫游.png'), name: '漫游' }
    // { imgUrl: require('@/views/groupPage/images/工具栏/图片.png'), name: '截图' },
    // { imgUrl: require('@/views/groupPage/images/工具栏/鹰眼.png'), name: '鹰眼' }
  ]
  unfoldUrl = require('@/views/groupPage/images/工具栏/展开.png')
  isFold: boolean = false
  isRoaming: boolean = false //漫游面板
  g_preViews = [] //前一视图
  g_afterViews = [] //后一视图
  g_viewType = viewMemoryType.none //前或后视图
  viewer
  get mapConfig() {
    return this.$store.state.bigScreen.mapConfig
  }
  get isInitViewer() {
    return this.$store.state.bigScreen.isInitViewer
  }
  @Watch('isInitViewer')
  onChangeMethod() {
    this.viewer = (window as any).viewer
    this.cameraMoveEvent()
  }
  mounted() {
    let target = this.$refs['widget-ToolBox'] as any
    target.style.setProperty('--right', '2.291667rem')
  }
  activeEvent(type) {
    var id = type
    switch (id) {
      case '初始范围':
        this.initPosition()
        break
      case '上一视图':
        this.preView()
        break
      case '下一视图':
        this.afterView()
        break
      case '俯视':
        this.lookDown()
        break
      case '漫游':
        this.roaming()
        break
    }
  }
  //初始位置
  initPosition() {
    // const degre = Cesium.Cartographic.fromCartesian(this.viewer.camera.position)
    // console.log({
    //   lon: Cesium.Math.toDegrees(degre.longitude),
    //   lat: Cesium.Math.toDegrees(degre.latitude),
    //   height: degre.height
    // })
    const initPosition = this.mapConfig.initPosition
    const carto = Cesium.Cartographic.fromDegrees(
      parseFloat(initPosition.lon),
      parseFloat(initPosition.lat),
      parseFloat(initPosition.height)
    )
    let camera = Cesium.Cartographic.toCartesian(carto)
    if (!camera) return
    this.viewer.camera.setView({
      destination: new Cesium.Cartesian3(camera.x, camera.y, camera.z),
      orientation: {
        heading: 0,
        pitch: Cesium.Math.toRadians(-90),
        roll: 0
      }
    })
  }
  //前一视图
  preView() {
    if (!this.g_preViews || this.g_preViews.length === 0) {
      return
    }
    this.g_viewType = viewMemoryType.pre
    const camera = this.viewer.camera
    const pos = Cesium.Cartesian3.clone(camera.position)
    const heading = camera.heading
    const pitch = camera.pitch
    const roll = camera.roll
    const currentview = {
      destination: pos,
      orientation: {
        heading: heading,
        pitch: pitch,
        roll: roll
      }
    }
    const view = this.g_preViews[this.g_preViews.length - 1]
    this.g_preViews.pop()
    this.g_afterViews.push(currentview)
    this.viewer.camera.setView({
      destination: view.destination,
      orientation: view.orientation
    })
  }
  //后一视图
  afterView() {
    if (!this.g_afterViews || this.g_afterViews.length === 0) {
      return
    }
    this.g_viewType = viewMemoryType.after
    const camera = this.viewer.camera
    const pos = Cesium.Cartesian3.clone(camera.position)
    const heading = camera.heading
    const pitch = camera.pitch
    const roll = camera.roll
    const currentview = {
      destination: pos,
      orientation: {
        heading: heading,
        pitch: pitch,
        roll: roll
      }
    }
    const view = this.g_afterViews[this.g_afterViews.length - 1]
    this.g_afterViews.pop()
    this.g_preViews.push(currentview)
    this.viewer.camera.setView({
      destination: view.destination,
      orientation: view.orientation
    })
  }
  //地图视图移动事件
  cameraMoveEvent() {
    this.viewer.camera.moveStart.addEventListener((e) => {
      const camera = this.viewer.camera
      const pos = Cesium.Cartesian3.clone(camera.position)
      const heading = camera.heading
      const pitch = camera.pitch
      const roll = camera.roll
      const view = {
        destination: pos,
        orientation: {
          heading: heading,
          pitch: pitch,
          roll: roll
        }
      }
      if (this.g_viewType === viewMemoryType.none) {
        this.g_afterViews.length = 0
        this.g_afterViews = []
        if (this.g_preViews && this.g_preViews.length === 10) {
          this.g_preViews.shift()
        }
        this.g_preViews.push(view)
      } else if (this.g_viewType === viewMemoryType.pre) {
        if (this.g_afterViews && this.g_afterViews.length === 10) {
          this.g_afterViews.shift()
        }
      } else {
        if (this.g_preViews && this.g_preViews.length === 10) {
          this.g_preViews.shift()
        }
      }
      this.g_viewType = viewMemoryType.none
    })
  }
  //俯视
  lookDown() {
    const camera = this.viewer.camera
    camera.flyTo({
      destination: camera.position,
      orientation: {
        // 视角
        heading: 0,
        pitch: Cesium.Math.toRadians(-90),
        roll: camera.roll
      }
    })
  }
  //漫游面板操作
  roaming() {
    this.isRoaming = true
  }
}
</script>

<style lang="scss" scoped>
.animate__flipInX,
.animate__flipOutX {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-ToolBox {
  $size10: 0.052083rem /* 10/192 */;
  $size20: 0.104167rem /* 20/192 */;
  z-index: 2;
  //position
  bottom: 0.052083rem /* 10/192 */;
  margin-right: var(--right); //2.291667rem /* 440/192 */;
  position: absolute;
  right: 0;
  //size
  //background
  color: #eee;
  //font
  font-family: Source Han Sans CN;
  .tool-list {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: flex-end;
    .list-item {
      width: 0.177083rem /* 34/192 */;
      height: 0.177083rem /* 34/192 */;
      background: rgba(7, 51, 84, 0.9);
      border-radius: 0.010417rem /* 2/192 */;
      margin: 0.026042rem /* 5/192 */;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: width 0.3s;
      img {
        height: 0.09375rem /* 18/192 */;
        width: 0.09375rem /* 18/192 */;
        object-fit: contain; //保持原有尺寸比例。内容被缩放。
      }
    }
    .list-item:hover {
      width: 0.229167rem /* 44/192 */;
      background: rgba(7, 51, 84, 1);
    }
  }
  .roam-panel {
    position: absolute;
    width: 1.354167rem /* 260/192 */;
    height: 1.546875rem /* 297/192 */;
    border: 1px solid rgba(43, 174, 253, 0.34);
    background: rgba(43, 174, 253, 0.34);
    right: 0.416667rem /* 80/192 */;
    bottom: 0.026042rem /* 5/192 */;
  }
}
</style>