nyyzt/src/components/toolbar/measure/index.vue

<!--
 * @FileDescription:  工具栏
 * @Author:  刘策
 * @Date: 2023-02-07 14:32
 * @LastEditors: wg
 * @LastEditTime: 2023年2月17日11:48:08
 -->
<template>
  <div class="measureContainer" >
    <div class="titles">
      <div class="title-text">测量工具</div>
      <div class="title-icon"><i class="iconfont iconguanbi" @click="closeBox"></i></div>
    </div>
    <div class="main">
      <div class="measureList" :id="item.icon" v-for="(item,index) in measureType" :key="index" @click="show(item)">
        <i class="iconfont" :class="[item.icon]"></i>
        <span>{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>

<script>
let measure
export default {
  name: "index",
  components: {},
  data() {
    return {
      measureType: [{
        label: '距离测量',
        icon: 'iconceliang'
      }, {
        label: '面积测量',
        icon: 'iconcemian'
      }],
      currentActivate: ''
    };
  },
  computed: {},
  created() {
  },
  mounted() {
    measure = new GD.Measure(viewer)
  },
  destroyed() {
    measure.deactivate()
  },
  methods: {
    show(item) {
      this.clear()
      if (this.currentActivate && this.currentActivate === item.label) {
        this.currentActivate = ''
        return
      }
      this.currentActivate = item.label
      switch (this.currentActivate) {
        case '距离测量' :
          measure.distance()
          break
        case '面积测量':
          measure.area()
          break
      }
    },
    clear(){
      measure.clearLayer()
    },
    closeBox() {
      this.clear()
      this.$emit('clearMeasure',false)
    }
  }
}
</script>

<style scoped>
.measureContainer {
  width: 150px;
  height: auto;
  /* background: #1a2f48; */
  color: white;
  position: fixed;
  margin-top: 50px;
  z-index: 4;
}
.titles{
  height: 40px;
  line-height: 40px;
  background: linear-gradient(90deg, rgb(255 224 160 / 48%) 0%, rgb(72 246 255 / 26%) 100%);
}
.title-text{
  float: left;
  margin-left: 10px;
}
.title-icon{
  float: right;
  margin-right: 10px;
}
.iconguanbi{
  border-radius: 5px;
  background: #e6a23c;
  padding: 2px;
  cursor: pointer;
}
.main{
  height: 140px;
  background: #14202dcf;
}
.measureList{
  color: white;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #9b9898;
    border-radius: 5px;
    margin: 12px 10px;
    position: absolute;
    width: 85%;
    cursor: pointer;

}
.iconfont{
  margin-right: 5px;
}
#iconcemian{
  top: 90px;
}
</style>