派生自 wuyushui/SewerAndRainNetwork

wangqi
2021-03-11 1348c11eceeecc172e2a069b67e197de90aa5827
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">
@@ -20,6 +15,8 @@
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!--    // 弹框-->
    <TextBounced v-show="this.bouncedText" @changeBounced="gitBounced"></TextBounced>
  </div>
</template>
@@ -31,9 +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: {},
  components: { TextBounced },
  data () {
    return {
      isPanelVisible: false,
@@ -103,11 +110,16 @@
      },
      selectGroup: false,
      drawLayer: null,
      map: null,
      L: window.L,
      map: null
      // 控制工具栏 文字标注 的弹框是否显示
      bouncedText: false
    }
  },
  methods: {
    gitBounced (params) {
      this.bouncedText = params
    },
    changeSelect () {
      this.selectGroup = !this.selectGroup
    },
@@ -157,20 +169,25 @@
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          break
        case '箭头标绘':
          this.drawLayer = this.map.editTools.startPolyline()
          this.drawLayer = this.map.editTools.startPolylineArrow()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          break
        case '点标注':
          this.drawLayer = this.map.editTools.startMarker()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          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.drawLayer = this.map.editTools.startText()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          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
      }
    },