Merge remote-tracking branch 'origin/master' into master

chenzeping

2021-03-16 97a7d4a2a256b9171bca05e69d154996645b4722

 src/components/panel/ToolBoxPanel.vue

@@ -2,24 +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=""/>
          </el-button>
        </el-popover>
      </el-row>
@@ -31,19 +31,29 @@
</template>

<script>
import circle from '@assets/images/map-pages/icon/toolbox/biaohui.png'
import location from '@assets/images/map-pages/icon/toolbox/celiang1.png'
import polygon from '@assets/images/map-pages/icon/toolbox/ditu.png'
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'
import fullscreen from '@assets/images/map-pages/icon/toolbox/xiazai.png'

// import square from '@/assets/images/map-pages/icon/toolbox/square.png'
// 标绘的可选择数据
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 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',
@@ -52,29 +62,34 @@
    return {
      menuList: [
        {
          icon: circle,
          icon: plot,
          label: '标绘',
          index: '1',
          items: [
            {
              index: '1-1',
              label: '点标绘'
              label: '点标绘',
              icon: marker
            },
            {
              index: '1-2',
              label: '线标绘'
            },
            {
              index: '1-3',
              label: '圆形'
              label: '线标绘',
              icon: line
            },
            {
              index: '1-4',
              label: '多边形'
              label: '多边形',
              icon: polygonJ
            },
            {
              index: '1-5',
              label: '矩形'
              label: '矩形',
              icon: polygonS
            },
            {
              index: '1-3',
              label: '圆形',
              icon: polygonY
            }
          ]
        },
@@ -85,11 +100,13 @@
          items: [
            {
              index: '3-1',
              label: '距离'
              label: '距离',
              icon: distance
            },
            {
              index: '3-2',
              label: '面积'
              label: '面积',
              icon: mm
            }
          ]
        },
@@ -150,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) {
@@ -223,9 +275,6 @@
    //   }
    // },
    // 文字标注控制
    gitBounced (params) {
      this.bouncedText = params
    },
    // 左上功能控制
    changeSelect () {
      this.selectGroup = !this.selectGroup
@@ -262,7 +311,23 @@
      span {
        display: block;
        font-size: 0.012rem;
        color: @color-over;
        color: @color-tool;
      }
    }

    .specific-tools-group {
      .tools-panel-choose {
        border: none;
        box-shadow: 0 0 0.03rem @color-shadow;

        img {
          width: 22px;
          height: 22px;
        }

        span {
          display: block;
        }
      }
    }

@@ -270,17 +335,6 @@
      width: 22.5px;
      height: 45px;
      color: @color-over;
    }

    .tools-panel-choose {
      img {
        width: 16px;
        height: 16px;
      }

      span {
        display: block;
      }
    }
  }
}