修改功能栏功能

chenzeping

2021-03-16 c94159caa730e2809d790ab5fd7b77cd47c725dc

修改功能栏功能

 src/assets/css/map/_map-variable.less

@@ -3,7 +3,8 @@
@color-gray: #C0C4CC;
@color-title: white;
@color-over: white;
@color-tool:#C0C4CC;
@color-tool: #C0C4CC;
@color-shadow: #00fff6;
@background-color: rgba(0, 16, 30, .8);
@background-color-light: rgba(40, 50, 100, .4);
@background-color-split: rgba(0, 255, 246, .14);

 src/assets/images/map-pages/icon/toolbox/M2.png

 src/assets/images/map-pages/icon/toolbox/juli.png

 src/components/panel/ToolBoxPanel.vue

@@ -2,7 +2,6 @@
  <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>
@@ -14,14 +13,13 @@
            :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>
@@ -45,14 +43,17 @@
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',
@@ -99,11 +100,13 @@
          items: [
            {
              index: '3-1',
              label: '距离'
              label: '距离',
              icon: distance
            },
            {
              index: '3-2',
              label: '面积'
              label: '面积',
              icon: mm
            }
          ]
        },
@@ -164,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) {
@@ -237,9 +275,6 @@
    //   }
    // },
    // 文字标注控制
    gitBounced (params) {
      this.bouncedText = params
    },
    // 左上功能控制
    changeSelect () {
      this.selectGroup = !this.selectGroup
@@ -267,7 +302,6 @@
      height: 45px;
      background: @background-color-tools;
      border: none;
      box-shadow: 0 0 0.03rem #00fff6;

      img {
        width: 22px;
@@ -281,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;
      }
    }
  }
}

 src/components/plugin/Editable.js

@@ -317,12 +317,6 @@
        return polygon
      },

      // circleMarker :function (latlng,options) {
      //   const yuan = this.circleMarker(latlng,options)
      //   yuan.enableEdit(this.map).newShape(latlng)
      //   return yuan
      // }

      // 🍂method startMarker(latlng: L.LatLng, options: hash): L.Marker
      // Start adding a Marker. If `latlng` is given, the Marker will be shown first at this point.
      // In any case, it will follow the user mouse, and will have a final `latlng` on next click (or touch).
@@ -353,14 +347,6 @@
        const circle = this.createCircle(latlng, options)
        circle.enableEdit(this.map).startDrawing()
        return circle
      },

      // 图标标注
      startIcon: function (latlng, options) {
        latlng = latlng || this.map.getCenter().clone()
        const icon = this.createMarker(latlng, options)
        icon.enableEdit(this.map).startDrawing()
        return icon
      },

      startHole: function (editor, latlng) {

 src/components/plugin/MakeTation.js

@@ -2,7 +2,7 @@
// 添加文字标注

var TextAnnotation = {

  points: [],

  color: 'yellow',

  color: '',

  L: null,

  map: null,

  layers: null,

@@ -60,7 +60,7 @@
// 添加 点 的标注

let pointAnnotation = {

  points: [],

  color: 'yellow',

  color: '',

  L: null,

  map: null,

  layers: null,

@@ -78,7 +78,6 @@
  click: function (e) {

    let marker = L.marker(e.latlng)

    marker.addTo(pointAnnotation.map)

    // pointAnnotation.map.panBy(L.point(e.latlng))

  },

  dblclick: function (e) {

    pointAnnotation.map.off('click', pointAnnotation.click).off('dblclick', pointAnnotation.dblclick)