tmzn-weihe/src/views/components/tools/index.vue

<template>
  <div>
    <div class="tools-container" :class="{hide:rightPanelHide}">
      <img src="@/assets/image/common/tools.png" alt="" @click="toOpenTools" />
      <div class="tools-menu" :class="{ isHide: !toolsShow }">
        <div class="tool" @click="toChangeMap" :class="{ active: isMapActive }"><i class="iconfont icon-tongyong-gongjuxiang-ditukongzhi" style="font-size: 34px"></i></div>
        <div class="tool" :class="{ active: isClActive }" @click="toCl"><i class="iconfont icon-icon_xiaogongju_20_s" style="font-size: 18px"></i></div>
      </div>
      <div class="measuring-tool" :class="{ clToolHide: !measureShow }">
        <div class="ranging" :class="{ active: rangingActive }" @click="measureRanging">测距</div>
        <div class="measureArea" :class="{ active: measureActive }" @click="measureArea">测面</div>
      </div>
    </div>
    <Controls v-if="isMapActive" />
  </div>
</template>

<script>
import Controls from './controls/control.vue'
export default {
  name: 'MapTools',
  data() {
    return {
      toolsShow: false,
      isMapActive: false,
      measureActive: false,
      rangingActive: false,
      isClActive: false,
      measureShow: false,
      rightPanelHide:false,
      distanceMeasure: null, // 测距工具实例
      isMeasuring: false, // 是否正在测量
      measureResult: '' // 测量结果
    }
  },
  components: {
    Controls
  },
  mounted() {
    this.$globalEventBus.$on('loadMap', () => {
      console.info('我加入')
      this.distanceMeasure = new this.mars3d.thing.Measure({
        label: {
          color: '#ffffff',
          font_family: '楷体',
          font_size: 20,
          background: false
        },
        isAutoEditing: false
      })

      // 将测距工具添加到地图
      window.map.addThing(this.distanceMeasure)
    })
    this.$globalEventBus.$on('toggleRightPanel',(val)=>{
      this.rightPanelHide = val
    })
  },
  methods: {
    toOpenTools() {
      this.toolsShow = !this.toolsShow
    },
    toChangeMap() {
      this.isMapActive = !this.isMapActive
    },
    toCl() {
      this.isClActive = !this.isClActive
      this.measureShow = this.isClActive ? true : false
      if (this.distanceMeasure) {
        this.distanceMeasure.clear()
      }
    },
    measureRanging() {
      this.rangingActive = !this.rangingActive
      if (this.rangingActive) {
        this.measureActive = false
        const graphic = this.distanceMeasure.distance({
          style: {
            color: '#4487D7',
            width: 20,
            clampToGround: false //是否贴地
          },
          showAddText: true,
          label: {
            // 自定义显示label的graphic类型
            type: 'div',
            color: '#ffffff',
            updateText: function (text, graphic) {
              graphic.html = `<div class="marsGreenGradientPnl" >${text}</div>`
            },
            // 下面是graphic对应类型本身的参数
            html: `<div class="marsGreenGradientPnl" ></div>`,
            horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM
          }
        })
      } else {
        this.distanceMeasure.clear()
      }
    },
    measureArea() {
      this.measureActive = !this.measureActive
      if (this.measureActive) {
        this.rangingActive = false
        const graphic = this.distanceMeasure.area({
          style: {
            color: '#4F9FFF',
            fill: true,
            materialType:"Color",
            fillColor: 'rgba(73,142,227,0.2)',
            outline:true,
            outlineColor: '#4F9FFF',
            outlineWidth: 10,
            clampToGround: false //贴地
          }
        })

        // 下面代码抬升面的高度到一个平面，来示意“水平”
        if (window.map.scene.mode === this.Cesium.SceneMode.SCENE3D) {
          const oldPositions = graphic.positionsShow
          const rang = this.mars3d.PolyUtil.getHeightRangeByDepth(oldPositions, window.map.scene)
          graphic.positions = this.mars3d.PointUtil.setPositionsHeight(oldPositions, rang.maxHeight)
        }
      } else {
        this.distanceMeasure.clear()
      }
    }
  },
  destroyed() {
    this.$globalEventBus.$off('loadMap')
    this.$globalEventBus.$off('toggleRightPanel')
  }
}
</script>

<style lang="scss" scoped>
.tools-container {
  position: absolute;
  top: px-to-rem(45);
  right: 4.2rem;
  z-index: 41;
  img {
    width: px-to-rem(40);
    height: px-to-rem(40);
  }
  .tools-menu {
    background: #172536;
    border-radius: px-to-rem(4);
    padding-bottom: px-to-rem(10);
    width: px-to-rem(40);
    .tool {
      text-align: center;
      color: #fff;
    }
    .tool.active {
      color: #4f9fff;
    }
  }
  .measuring-tool {
    position: absolute;
    top: px-to-rem(95);
    right: px-to-rem(43);
    background-color: rgba(23, 37, 55, 0.9);
    border-radius: px-to-rem(8);
    color: #fff;
    cursor: pointer;
    width: px-to-rem(50);
    div {
      padding: px-to-rem(10);
    }
    .ranging.active,
    .measureArea.active {
      background: rgba(79, 159, 255, 0.4);
      color: #4f9fff;
    }
  }
  .isHide,
  .clToolHide {
    display: none;
  }
}
.hide{
  right: px-to-rem(30);
}
</style>