添加内网地形网址

wangqi

2021-03-17 0945576df59e26ef2ca98ad8d3faf37cb0833943

 src/components/panel/ToolBoxPanel.vue

@@ -8,10 +8,10 @@
      <el-row v-show="selectGroup" class="specific-tools-group">
        <el-popover
            placement="bottom"
            width="100%"
            trigger="click"
            :popper-class="'tools-panel-content'"
            v-for="(item,index) in menuList" :key="index"
            :width="item.index === '2'?230 : 150"
        >
          <el-button slot="reference" class="el-button" :class="active === index ? 'tools-panel-choose':''"
                     @click="changeChoose(index)">
@@ -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,9 +51,15 @@
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/juli.png'
import distance from '@assets/images/map-pages/icon/toolbox/jusli.png'
import mm from '@assets/images/map-pages/icon/toolbox/M2.png'

// 测量的方法
@@ -114,13 +120,22 @@
              index: '3-1',
              label: '距离',
              icon: distance,
              title: '距离测量'
              title: '距离测量',
              iconChoose: distanceChoose
            },
            {
              index: '3-2',
              label: '面积',
              icon: mm,
              title: '面积测量'
              title: '面积测量',
              iconChoose: mmChoose
            },
            {
              index: '3-3',
              label: '清除',
              icon: del,
              title: '清除测量',
              iconChoose: delChoose
            }
          ]
        },
@@ -189,6 +204,7 @@
      ],
      selectGroup: false,
      drawLayer: null,
      Draw: null,
      map: null,
      L: window.L,
      active: 0
@@ -260,6 +276,9 @@
          break
        case '面积':
          Measure.startMeasureArea(this.map, this.L)
          break
        case '清除':
          Measure.clearMeasure(this.map, this.L)
          break
        case '全屏':
          // this.map.toggleFullscreen()
@@ -359,6 +378,7 @@
    // 左上功能控制
    changeSelect () {
      this.selectGroup = !this.selectGroup
      this.isShow = !this.isShow
    }
  }
}
@@ -373,10 +393,8 @@

  .specific-tools {
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .el-button {
      z-index: 999;
      padding: 0;
      margin: 0 0.015rem;
      width: 45px;
@@ -403,6 +421,46 @@
    }

    .specific-tools-group {
      z-index: 1;
      //.tools-panel-content {
      //  width:220px!important;
      //}
      .base-map-inner-panel {
        //width: 230px!important;
        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;
@@ -425,4 +483,11 @@
    }
  }
}
.isD-enter-active, .isD-leave-active{
  transition: all 0.5s;
}
.isD-enter, .isD-leave-to{
  opacity: 0;
  transform: translateX(-100px);
}
</style>