派生自 wuyushui/SewerAndRainNetwork

YANGDL
2021-03-19 271e24da2d88a912129d638027bdaf853cb842a0
src/components/panel/ToolBoxPanel.vue
@@ -2,26 +2,24 @@
  <div class="left-top-toolbox-panel">
    <div class="specific-tools">
      <el-button @click="changeSelect">
        <!--        <i class="el-icon-s-tools"></i>-->
        <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="200"
            width=""
            trigger="click"
            :popper-class="'tools-panel-content'"
            v-for="(item,index) in menuList" :key="index"
        >
          <el-button slot="reference" class="tools-panel-choose">
          <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">
            <!--            <i class="el-icon-s-tools"></i>-->
          <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT)">
            <img :src="itemT.icon" alt=""/>
            <!--            <span>{{ itemT.label }}</span>-->
          </el-button>
        </el-popover>
      </el-row>
@@ -41,15 +39,21 @@
// 标绘的可选择数据
import marker from '@assets/images/map-pages/icon/toolbox/map.png'
import line from '@assets/images/map-pages/icon/toolbox/line.png'
import polygonJ from '@assets/images/map-pages/icon/toolbox/polygon.png'
import polygonS from '@assets/images/map-pages/icon/toolbox/ju.png'
import polygonY from '@assets/images/map-pages/icon/toolbox/circle.png'
// import square from '@/assets/images/map-pages/icon/toolbox/square.png'
// 测量
import distance from '@assets/images/map-pages/icon/toolbox/juli.png'
import mm from '@assets/images/map-pages/icon/toolbox/M2.png'
// 测量的方法
import Measure from '@/components/plugin/MeaSure'
// import '@/components/plugin/leaflet-measure-path/leaflet-measure-path.css'
// import Measure from '@/components/plugin/MeaSure'
// 标注的方法
// import MakeTation from '@components/plugin/MakeTation'
// 封装的选择弹框
// import BaseNavMenuItem from '@components/panel/BaseNavMenuItem'
// 标注的方法
// import MakeTation from '@components/plugin/MakeTation'
export default {
  name: 'ToolBoxPanel',
@@ -73,16 +77,19 @@
              icon: line
            },
            {
              index: '1-3',
              label: '圆形'
            },
            {
              index: '1-4',
              label: '多边形'
              label: '多边形',
              icon: polygonJ
            },
            {
              index: '1-5',
              label: '矩形'
              label: '矩形',
              icon: polygonS
            },
            {
              index: '1-3',
              label: '圆形',
              icon: polygonY
            }
          ]
        },
@@ -93,11 +100,13 @@
          items: [
            {
              index: '3-1',
              label: '距离'
              label: '距离',
              icon: distance
            },
            {
              index: '3-2',
              label: '面积'
              label: '面积',
              icon: mm
            }
          ]
        },
@@ -158,14 +167,49 @@
          ]
        }
      ],
      isCollapse: false,
      selectGroup: false,
      drawLayer: null,
      map: null,
      L: window.L
      L: window.L,
      active: 0
    }
  },
  methods: {
    changeChoose (index) {
      this.active = index
    },
    choiceItem (itemT) {
      console.log(itemT.label)
      switch (itemT.label) {
        case '点标绘':
          // MakeTation.StartPointAnnotation(this.map, this.L)
          this.drawLayer = this.map.editTools.startMarker()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          break
        case '线标绘':
          this.drawLayer = this.map.editTools.startPolyline()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          break
        case '多边形':
          this.drawLayer = this.map.editTools.startPolygon()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          break
        case '矩形':
          this.drawLayer = this.map.editTools.startRectangle()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          break
        case '圆形':
          this.drawLayer = this.map.editTools.startCircle()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          break
        case '距离':
          Measure.startMeasureLen(this.map, this.L)
          break
        case '面积':
          Measure.startMeasureArea(this.map, this.L)
          break
      }
    },
    // handleSelect (index) {
    //   console.log(index)
    //   switch (index) {
@@ -231,9 +275,6 @@
    //   }
    // },
    // 文字标注控制
    gitBounced (params) {
      this.bouncedText = params
    },
    // 左上功能控制
    changeSelect () {
      this.selectGroup = !this.selectGroup
@@ -261,7 +302,6 @@
      height: 45px;
      background: @background-color-tools;
      border: none;
      box-shadow: 0 0 0.03rem #00fff6;
      img {
        width: 22px;
@@ -275,21 +315,26 @@
      }
    }
    .specific-tools-group {
      .tools-panel-choose {
        border: none;
        box-shadow: 0 0 0.03rem @color-shadow;
        img {
          width: 22px;
          height: 22px;
        }
        span {
          display: block;
        }
      }
    }
    .special-button {
      width: 22.5px;
      height: 45px;
      color: @color-over;
    }
    .tools-panel-choose {
      img {
        width: 16px;
        height: 16px;
      }
      span {
        display: block;
      }
    }
  }
}