测量工具完善

zhangshuaibao

2021-03-16 5876bb59a7d11a487fe36ebaae231dd15c2c07c4

 src/components/panel/ToolBoxPanel.vue

@@ -5,32 +5,35 @@
        <img src="@assets/images/map-pages/icon/toolbox/tool.png" alt="">
        <span>工具</span>
      </el-button>
      <el-row v-show="selectGroup" class="specific-tools-group">
        <el-popover
            placement="bottom"
            width=""
            trigger="click"
            :popper-class="'tools-panel-content'"
            v-for="(item,index) in menuList" :key="index"
        >
          <el-button slot="reference" class="el-button" :class="active === index ? 'tools-panel-choose':''"
                     @click="changeChoose(index)">
            <img :src="item.icon" alt=""/>
            <span>{{ item.label }}</span>
      <transition name="animationChange">
        <el-row v-show="selectGroup" class="specific-tools-group">
          <el-popover
              placement="bottom"
              width=""
              trigger="click"
              :popper-class="'tools-panel-content'"
              v-for="(item,index) in menuList" :key="index"
          >
            <el-button slot="reference" class="el-button" :class="active === index ? 'tools-panel-choose':''"
                       @click="changeChoose(index)">
              <img :src="item.icon" alt=""/>
              <span>{{ item.label }}</span>
            </el-button>
            <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT,indexT)">
              <img :src="itemT.icon" :title="itemT.title"/>
            </el-button>
          </el-popover>
          <el-button @click="changeSelect" class="special-button">
            <i :class="selectGroup === false ? 'el-icon-d-arrow-left':'el-icon-d-arrow-left'"></i>
          </el-button>
          <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT)">
            <img :src="itemT.icon" :title="itemT.title"/>
          </el-button>
        </el-popover>
        <el-button @click="changeSelect" class="special-button">
          <i :class="selectGroup === false ? 'el-icon-d-arrow-right':'el-icon-d-arrow-left'"></i>
        </el-button>
      </el-row>
        </el-row>
      </transition>
    </div>
  </div>
</template>

<script>
// 功能导航
import plot from '@assets/images/map-pages/icon/toolbox/biaohui.png'
import polygon from '@assets/images/map-pages/icon/toolbox/celiang1.png'
import location from '@assets/images/map-pages/icon/toolbox/ditu.png'
@@ -46,8 +49,15 @@
import polygonY from '@assets/images/map-pages/icon/toolbox/circle.png'
import del from '@assets/images/map-pages/icon/toolbox/del.png'

// 选中的内容图片
import markerChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/dingweimark.png'
import lineChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/linemark.png'
import distanceChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/juliceliangmark.png'
import mmChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/mianjiceliangmark.png'
import delChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/shanchu.png'

// 测量
import distance from '@assets/images/map-pages/icon/toolbox/juli.png'
import distance from '@assets/images/map-pages/icon/toolbox/jusli.png'
import mm from '@assets/images/map-pages/icon/toolbox/M2.png'

// 测量的方法
@@ -68,13 +78,15 @@
              index: '1-1',
              label: '点标绘',
              icon: marker,
              title: '点标绘'
              title: '点标绘',
              iconChoose: markerChoose
            },
            {
              index: '1-2',
              label: '线标绘',
              icon: line,
              title: '线标绘'
              title: '线标绘',
              iconChoose: lineChoose
            },
            {
              index: '1-4',
@@ -111,13 +123,22 @@
              index: '3-1',
              label: '距离',
              icon: distance,
              title: '距离测量'
              title: '距离测量',
              iconChoose: distanceChoose
            },
            {
              index: '3-2',
              label: '面积',
              icon: mm,
              title: '面积测量'
              title: '面积测量',
              iconChoose: mmChoose
            },
            {
              index: '3-3',
              label: '清除',
              icon: del,
              title: '清除测量',
              iconChoose: delChoose
            }
          ]
        },
@@ -185,8 +206,9 @@
        }
      ],
      selectGroup: false,
      active: 0,
      active: -1,
      drawLayer: null,
      Draw: null,
      map: null,
      L: window.L
    }
@@ -194,6 +216,9 @@
  methods: {
    changeChoose (index) {
      this.active = index
    },
    changeSelect () {
      this.selectGroup = !this.selectGroup
    },
    choiceItem (itemT) {
      switch (itemT.label) {
@@ -224,6 +249,9 @@
          break
        case '面积':
          Measure.startMeasureArea(this.map, this.L)
          break
        case '清除':
          Measure.clearMeasure(this.map, this.L)
          break
        case '全屏':
          // this.map.toggleFullscreen()
@@ -258,22 +286,27 @@
          break
      }
      this.drawLayer.on('dblclick', this.L.DomEvent.stop).on('dblclick', this.drawLayer.toggleEdit)
      if (itemT.label === '多边形') {
        this.drawLayer.setStyle({ color: 'red', fillColor: '#ffffff', fillOpacity: 0.1, fill: true })
      }
      if (itemT.label === '矩形') {
        this.drawLayer.setStyle({ color: 'red', fillColor: '#ffffff', fillOpacity: 0.1, fill: true })
      }
    },
    // 左上功能控制
    changeSelect () {
      this.selectGroup = !this.selectGroup
      this.drawLayer.setStyle({
        color: 'red',
        fillColor: '#ffffff',
        fillOpacity: 0.1,
        fill: true
      })
    }
  }
}
</script>

<style lang="less" scoped>
.animationChange-enter-active, .animationChange-leave-active {
  transition: all 0.5s;
}

.animationChange-enter, .animationChange-leave-to {
  opacity: 0;
  transform: translateX(-100px);
}

.left-top-toolbox-panel {
  position: absolute;
  left: 0;
@@ -284,6 +317,7 @@
    display: flex;

    .el-button {
      z-index: 999;
      padding: 0;
      margin: 0 0.015rem;
      width: 45px;