图层功能

chenzeping

2021-03-16 91079d3c4940cfaac4f263a1265c043341e65fcc

 src/components/panel/ToolBoxPanel.vue

@@ -21,7 +21,7 @@
          <el-button  v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT)" v-show="item.index!=='2'">
            <img :src="itemT.icon" :title="itemT.title" v-show="item.index!=='2'"/>
          </el-button>
          <div class="base-map-inner-panel" v-show="!isShow&&item.index==='2'">
          <div class="base-map-inner-panel" v-show="isShow&&item.index==='2'">
            <div v-for="item in basemapList" :key="item.code" class="basemap-layer-item">
              <img class="base-map-img" width="50" height="50" :src="item.conf.icon_actived" :title="item.name"
                   @click="changeBasemap(item)"/>
@@ -51,15 +51,9 @@
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 distanceChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/juliceliangmark.png'
import mmChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/mianjiceliangmark.png'
import delChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/shanchu.png'

// 测量
import distance from '@assets/images/map-pages/icon/toolbox/jusli.png'
import distance from '@assets/images/map-pages/icon/toolbox/juli.png'
import mm from '@assets/images/map-pages/icon/toolbox/M2.png'

// 测量的方法
@@ -120,22 +114,13 @@
              index: '3-1',
              label: '距离',
              icon: distance,
              title: '距离测量',
              iconChoose: distanceChoose
              title: '距离测量'
            },
            {
              index: '3-2',
              label: '面积',
              icon: mm,
              title: '面积测量',
              iconChoose: mmChoose
            },
            {
              index: '3-3',
              label: '清除',
              icon: del,
              title: '清除测量',
              iconChoose: delChoose
              title: '面积测量'
            }
          ]
        },
@@ -204,7 +189,6 @@
      ],
      selectGroup: false,
      drawLayer: null,
      Draw: null,
      map: null,
      L: window.L,
      active: 0
@@ -276,9 +260,6 @@
          break
        case '面积':
          Measure.startMeasureArea(this.map, this.L)
          break
        case '清除':
          Measure.clearMeasure(this.map, this.L)
          break
        case '全屏':
          // this.map.toggleFullscreen()
@@ -422,44 +403,6 @@

    .specific-tools-group {
      z-index: 1;
      //.tools-panel-content {
      //  width:220px!important;
      //}
      .base-map-inner-panel {
        display: flex;
        justify-content: center;
        align-items: center;

        .base-map-img{
          position: absolute;
        }
        .base-map-img-Tool:hover{
          cursor:pointer;
        }
        .base-map-anno-Tool{
          position: absolute;margin-left: 2px;background-color: rgba(0,0,0,.5);color: white;
          .el-checkbox__label{
            padding-left: 5px !important;
          }
        }
        .basemap-layer-item {
          display: flex;
          width: 50px;
          height: 50px;
          margin: 10px;
          border: 2px solid white;
          input {
            position: relative;
            left: 0;
            top: -53px;
          }
          .basemap-layer-item-name {
            position: relative;
            left: 0;
            top: -53px;
          }
        }
      }
      .tools-panel-choose {
        border: none;
        box-shadow: 0 0 0.03rem @color-shadow;