弹框增加了效果

YANGDL

2021-03-11 67d326d365cd484ad11880f6dcbc8f50bda88b2b

 src/components/panel/ToolBoxPanel.vue

@@ -3,11 +3,6 @@
    <div class="init-choose" @click="changeSelect()">
      <img src="@/assets/images/map-pages/icon/toolbox/circle.png" alt="">
    </div>
    <!--    <transition name="fade">-->
    <!--      <ul v-show='selectGroup'>-->
    <!--        <li v-for="(item,i) in imgList" :key="i" @click="toggleActive(i)" :value="total"><img :src="item"/></li>-->
    <!--      </ul>-->
    <!--    </transition>-->
    <div class="el-select-dropdown" v-show='selectGroup'>
      <el-dropdown @command="handleCommand" trigger="click" v-for="(item,i) in imgLists" :key="i" :value="total">
        <transition name="fade">
@@ -15,11 +10,13 @@
        </transition>
        <el-dropdown-menu>
          <el-dropdown-item v-for="(ite,index) in item.items" :key="index" :command='ite.headings'>
            <span @click='toggleActive(ite)'>{{ ite.headings }}</span>
            <span>{{ ite.headings }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!--    // 弹框-->
    <TextBounced v-show="this.bouncedText" @changeBounced="gitBounced"></TextBounced>
  </div>
</template>

@@ -31,10 +28,19 @@
import polygon from '@/assets/images/map-pages/icon/toolbox/polygon.png'
import square from '@/assets/images/map-pages/icon/toolbox/square.png'

// 测量的方法
import '@/components/plugin/leaflet-measure-path/leaflet-measure-path.css'
import Measure from '@/components/plugin/MeaSure'

// 标注的方法
import MakeTation from '@components/plugin/MakeTation'

// 封装的选择弹框
import TextBounced from '@components/panel/bounced/TextBounced'

export default {
  name: 'ToolBoxPanel',
  components: {},
  props: ['map'],
  components: { TextBounced },
  data () {
    return {
      isPanelVisible: false,
@@ -103,10 +109,17 @@
        enterprise: ''
      },
      selectGroup: false,
      selectGroupOne: false
      drawLayer: null,
      map: null,
      L: window.L,
      // 控制工具栏 文字标注 的弹框是否显示
      bouncedText: false
    }
  },
  methods: {
    gitBounced (params) {
      this.bouncedText = params
    },
    changeSelect () {
      this.selectGroup = !this.selectGroup
    },
@@ -118,13 +131,64 @@
    },
    handleCommand (command) {
      console.log(command)
      if (command === '全屏') {
        this.map.toggleFullscreen()
      }
    },
    toggleActive (k) {
      if (k === 'fullscreen') {
        this.map.toggleFullscreen()
      switch (command) {
        case '全屏':
          // this.map.toggleFullscreen()
          var printer = this.L.easyPrint({
            sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
            filename: 'map_image',
            exportOnly: true,
            hideControlContainer: true
          }).addTo(this.map)
          printer.printMap('CurrentSize', 'MyManualPrint')
          break
        case 'A4横向':
          var printerX = this.L.easyPrint({
            sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
            filename: 'map_image',
            exportOnly: true,
            hideControlContainer: true
          }).addTo(this.map)
          printerX.printMap('A4Landscape page', 'MyManualPrint')
          break
        case 'A4纵向':
          var printerY = this.L.easyPrint({
            sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
            filename: 'map_image',
            exportOnly: true,
            hideControlContainer: true
          }).addTo(this.map)
          printerY.printMap('A4Portrait page', 'MyManualPrint')
          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.startPolylineArrow()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          break
        case '点标注':
          MakeTation.StartCircleAnnotation(this.map, this.L)
          break
        case '图标标注':
          this.drawLayer = this.map.editTools.startIcon()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          break
        case '文字标注':
          this.bouncedText = true
          MakeTation.startMakeText(this.map, this.L)
          break
        case '距离测量':
          Measure.startMeasureLen(this.map, this.L)
          break
        case '面积测量':
          Measure.startMeasureArea(this.map, this.L)
          break
      }
    },
    loadData () {
@@ -153,7 +217,7 @@
    background: #305B62;
    //margin-top: 15px;
    width: 35px;
    height: 35px;
    height: 38px;
    border-radius: 50%;
    border: 2px skyblue solid;
    display: flex;