派生自 wuyushui/SewerAndRainNetwork

chenzeping
2021-03-16 77eaa966286dbbcf4b4474763533d448e0fa03f9
src/components/panel/ToolBoxPanel.vue
@@ -37,14 +37,11 @@
import fullscreen from '@assets/images/map-pages/icon/toolbox/xiazai.png'
// 标绘的可选择数据
import iconRefinery from '@assets/images/map-pages/local.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 del from '@assets/images/map-pages/icon/toolbox/del.png'
// 测量
import distance from '@assets/images/map-pages/icon/toolbox/juli.png'
@@ -93,12 +90,6 @@
              label: '圆形',
              icon: polygonY,
              title: '圆形'
            },
            {
              index: '1-4',
              label: '删除',
              icon: del,
              title: '删除标绘'
            }
          ]
        },
@@ -185,10 +176,10 @@
        }
      ],
      selectGroup: false,
      active: 0,
      drawLayer: null,
      map: null,
      L: window.L
      L: window.L,
      active: 0
    }
  },
  methods: {
@@ -196,28 +187,28 @@
      this.active = index
    },
    choiceItem (itemT) {
      console.log(itemT.label)
      switch (itemT.label) {
        case '点标绘':
          var myIcon = this.L.icon({
            iconUrl: iconRefinery,
            iconSize: [26, 32],
            iconAnchor: [13, 16],
            popupAnchor: [26, -32]
          })
          // MakeTation.StartPointAnnotation(this.map, this.L)
          this.drawLayer = this.map.editTools.startMarker()
          this.drawLayer.setIcon(myIcon)
          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)
@@ -253,18 +244,73 @@
          }).addTo(this.map)
          printerY.printMap('A4Portrait page', 'MyManualPrint')
          break
        case '删除':
          this.map.removeLayer(this.drawLayer)
          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 })
      }
    },
    // handleSelect (index) {
    //   console.log(index)
    //   switch (index) {
    //     case '4-1':
    //       // 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 '4-2':
    //       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 '4-3':
    //       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 '1-2':
    //       this.drawLayer = this.map.editTools.startPolyline()
    //       this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
    //       Measure.startMeasureLen(this.map, this.L)
    //       break
    //     case '1-3-1':
    //       // alert('圆形')
    //       this.drawLayer = this.map.editTools.circleMarker()
    //       this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
    //       break
    //     case '1-3-2':
    //       this.drawLayer = this.map.editTools.startPolygon()
    //       this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
    //       break
    //     case '1-1':
    //       MakeTation.StartPointAnnotation(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
    //   }
    // },
    // 文字标注控制
    // 左上功能控制
    changeSelect () {
      this.selectGroup = !this.selectGroup
@@ -282,6 +328,8 @@
  .specific-tools {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .el-button {
      padding: 0;
@@ -298,6 +346,7 @@
      span {
        display: block;
        font-size: 0.012rem;
        color: @color-tool;
      }
    }