1

Surpriseplus

2022-11-28 ac687d46631445a2ad0efebe843c300535277dec

 src/views/Synthesis/index.vue

@@ -1,232 +1,434 @@
<template>
  <div class="synthesis">
    <map-div></map-div>
    <!-- <el-tabs type="border-card">
      <el-tab-pane v-if="menuStatus.menu1" :label="$t('synthesis.coverage')">
        <coverage />
      </el-tab-pane>
      <el-tab-pane v-if="menuStatus.menu2" :label="$t('synthesis.viewport')">
        <viewport />
      </el-tab-pane>
      <el-tab-pane v-if="menuStatus.menu3" :label="$t('synthesis.wander')">
        <wander />
      </el-tab-pane>
      <el-tab-pane v-if="menuStatus.menu4" :label="$t('synthesis.analyse')">
        <analyse />
      </el-tab-pane>
      <el-tab-pane v-if="menuStatus.menu5" :label="$t('synthesis.iqyery')">
        <iqyery />
      </el-tab-pane>
      <el-tab-pane v-if="menuStatus.menu6" :label="$t('synthesis.orientation')">
        <orientation />
      </el-tab-pane>
      <el-tab-pane v-if="menuStatus.menu7" :label="$t('synthesis.measurement')">
        <measurement />
      </el-tab-pane>
      <el-tab-pane v-if="menuStatus.menu8" :label="$t('synthesis.plotting')">
        <plotting @drawing="showBtn" />
      </el-tab-pane>
    </el-tabs>
    <el-card class="box-card">

    </el-card>
    <div class="plotBox">
      <el-collapse-transition>
        <div class="transition-box" v-show="showBtnBox">
          <ul>
            <li
              @click="changePlot(item)"
              v-for="item in itemsOne"
              :key="item.id"
            >
              <div class="divli">
                <div :class="item.class" class="backimge8"></div>
              </div>
              <div class="div_li">{{ $t(item.name) }}</div>
            </li>
          </ul>
    <div class="lefIcon">
      <ul>
        <li v-for="item in showMenuList">
          <div class="menuDiv" :title="item.name" @click="setMenuChange(item)">
            <div class="menuImage" :class="item.class"></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="rightContent">
      <div class="left_main" :class="{ left_main_show: !openStatus }">
        <div class="leftMen_div" v-for="(item, index) in setListTwoMenu">
          <div class="menuTwoImage" :class="item.css"></div>
          <div>{{ $t(item.label) }}</div>
        </div>
      </el-collapse-transition>
    </div> -->
      </div>
      <div id="mapdiv" class="right_main">
        <div @click="changeBaseLayer" class="bottomChageLayer">
          <div
            id="cenBg"
            v-bind:class="{ active: isActive, menuLayer: !isActive }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import coverage from './coverage.vue'; //图层
import viewport from './viewport.vue'; //视图
import wander from './wander.vue'; //漫游
import analyse from './analyse.vue'; //分析
import iqyery from './inquire.vue'; //查询
import orientation from './orientation.vue'; //定位
import measurement from './measurement.vue'; //测量
import plotting from './plotting.vue'; //标绘
import MapDiv from '../../components/MapDiv';
import { getPerms } from '../../api/api';
export default {
  components: {
    coverage,
    viewport,
    wander,
    analyse,
    iqyery,
    orientation,
    measurement,
    plotting,
    MapDiv,
  },
  components: {},
  data() {
    return {
      showBtnBox: false,
      itemsOne: [
      openStatus: false,
      isActive: false,
      showMenuList: [],
      menuOption: [
        {
          id: '1',
          name: 'synthesis.point',
          class: 'h1',
          id: 1,
          name: '菜单',
          class: 'menu_img1',
          show: true,
        },
        {
          id: '2',
          name: 'synthesis.line',
          class: 'h2',
          id: 2,
          name: '图层',
          class: 'menu_img2',
          show: false,
        },
        // {
        //   id: "3",
        //   name: "synthesis.rectangle",
        //   class: "h3",
        // },
        {
          id: '4',
          name: 'synthesis.polygon',
          class: 'h4',
          id: 3,
          name: '视图',
          class: 'menu_img3',
          show: false,
        },
        // {
        //   id: "7",
        //   name: "synthesis.symboliclabel",
        //   class: "h7",
        // },
        // {
        //   id: "5",
        //   name: "synthesis.flatterrain",
        //   class: "h5",
        // },
        // {
        //   id: "6",
        //   name: "synthesis.terrainexcavation",
        //   class: "h6",
        // },
        {
          id: '8',
          name: 'synthesis.removepaint',
          class: 'h8',
          id: 4,
          name: '漫游',
          class: 'menu_img4',
          show: false,
        },
        // {
        //   id: "9",
        //   name: "synthesis.openFile",
        //   class: "h6",
        // },
        // {
        //   id: "10",
        //   name: "synthesis.saveFile",
        //   class: "h8",
        // },
        {
          id: 5,
          name: '分析',
          class: 'menu_img5',
          show: false,
        },
        {
          id: 6,
          name: '查询',
          class: 'menu_img6',
          show: false,
        },
        {
          id: 7,
          name: '定位',
          class: 'menu_img7',
          show: false,
        },
        {
          id: 8,
          name: '测量',
          class: 'menu_img8',
          show: false,
        },
        {
          id: 9,
          name: '标绘',
          class: 'menu_img9',
          show: false,
        },
      ],
      iframeSrc: null,
      messageName: null,
      permsId: null,
      menuStatus: {
        menu1: false,
        menu2: false,
        menu3: false,
        menu4: false,
        menu5: false,
        menu6: false,
        menu7: false,
        menu8: false,
      },
      setListTwoMenu: [],
      setListTwoMenuAll: [
        [
          {
            label: 'synthesis.layer',
            name: '图层管理',
            css: 'twoMenu_imge11',
          },
          {
            name: '场景提取',
            label: 'synthesis.sceneExtraction',
            css: 'twoMenu_imge12',
          },
          {
            label: 'synthesis.release',
            name: '场景发布',
            css: 'twoMenu_imge13',
          },
        ],
        [
          {
            label: 'synthesis.split',
            name: '分屏',
            css: 'twoMenu_imge21',
          },
          {
            label: 'synthesis.twod',
            name: '二维',
            css: 'twoMenu_imge22',
          },
          {
            label: 'synthesis.threed',
            name: '三维',
            css: 'twoMenu_imge23',
          },
          {
            label: 'synthesis.full',
            name: '全图',
            css: 'twoMenu_imge24',
          },
          {
            label: 'synthesis.zommin',
            name: '放大',
            css: 'twoMenu_imge25',
          },
          {
            label: 'synthesis.zoomout',
            name: '缩小',
            css: 'twoMenu_imge26',
          },
          {
            label: 'synthesis.rule',
            name: '比例尺',
            css: 'twoMenu_imge27',
          },
          {
            label: 'synthesis.compass',
            name: '指北针',
            css: 'twoMenu_imge28',
          },
        ],
        [
          {
            label: 'synthesis.someroaming',
            name: '点漫游',
            css: 'twoMenu_imge31',
          },
          {
            label: 'synthesis.lineroaming',
            name: '线路漫游',
            css: 'twoMenu_imge32',
          },
          {
            label: 'synthesis.mouseroaming',
            name: '鼠标漫游',
            css: 'twoMenu_imge33',
          },
          {
            label: 'synthesis.snapshot',
            name: '地图快照',
            css: 'twoMenu_imge34',
          },
          {
            label: 'synthesis.tdisplay',
            name: '三维演示',
            css: 'twoMenu_imge35',
          },
        ],
        [
          {
            label: 'synthesis.contouranalysis',
            name: '等高线',
            css: 'twoMenu_imge41',
          },
          {
            label: 'synthesis.slopeanalysis',
            name: '坡度分析',
            css: 'twoMenu_imge42',
          },
          {
            label: 'synthesis.pathanalysis',
            name: '路径分析',
            css: 'twoMenu_imge43',
          },
          {
            label: 'synthesis.cuttinganalysis',
            name: '地形剖切',
            css: 'twoMenu_imge44',
          },
          {
            label: 'synthesis.floodanalysis',
            name: '淹没分析',
            css: 'twoMenu_imge45',
          },
          {
            label: 'synthesis.earthworkcalculation',
            name: '土方量计算',
            css: 'twoMenu_imge46',
          },
          {
            label: 'synthesis.crosssectionanalysis',
            name: '三维截面',
            css: 'twoMenu_imge47',
          },
          {
            label: 'synthesis.imagecontrast',
            name: '影像对比',
            css: 'twoMenu_imge48',
          },
          {
            label: 'synthesis.pipelineAnalysis',
            name: '管道分析',
            css: 'twoMenu_imge49',
          },
          {
            label: 'synthesis.flatterrain',
            name: '地形平整',
            css: 'twoMenu_imge410',
          },
          {
            label: 'synthesis.terrainexcavation',
            name: '地形开挖',
            css: 'twoMenu_imge411',
          },
        ],
        [
          {
            label: 'synthesis.attributequery',
            name: '属性查询',
            css: 'twoMenu_imge51',
          },
          {
            label: 'synthesis.rangequery',
            name: '空间查询',
            css: 'twoMenu_imge52',
          },
        ],
        [
          {
            label: 'synthesis.gpsrtk',
            name: '坐标定位',
            css: 'twoMenu_imge61',
          },
          {
            label: 'synthesis.placenamelocation',
            name: '地名定位',
            css: 'twoMenu_imge62',
          },
        ],
        [
          {
            label: 'synthesis.synthobj.m1',
            name: '水平距离',
            css: 'twoMenu_imge71',
          },
          {
            label: 'synthesis.synthobj.m4',
            name: '垂直高度',
            css: 'twoMenu_imge72',
          },
          {
            label: 'synthesis.synthobj.m6',
            name: '平面面积',
            css: 'twoMenu_imge73',
          },
          {
            label: 'synthesis.synthobj.m7',
            name: '体积',
            css: 'twoMenu_imge74',
          },
          {
            label: 'synthesis.synthobj.m5',
            name: '表面面积',
            css: 'twoMenu_imge75',
          },
          {
            label: 'synthesis.synthobj.m2',
            name: '空间距离',
            css: 'twoMenu_imge76',
          },
        ],
        [
          {
            label: 'synthesis.point',
            name: '点',
            css: 'twoMenu_imge81',
          },
          {
            label: 'synthesis.line',
            name: '线',
            css: 'twoMenu_imge82',
          },
          {
            label: 'synthesis.rectangle',
            name: '矩形',
            css: 'twoMenu_imge83',
          },
          {
            label: 'synthesis.polygon',
            name: '多边形',
            css: 'twoMenu_imge84',
          },
          {
            label: 'synthesis.import',
            name: '导入',
            css: 'twoMenu_imge85',
          },
          {
            label: 'synthesis.export',
            name: '导出',
            css: 'twoMenu_imge86',
          },
          {
            label: 'synthesis.removepaint',
            name: '清除',
            css: 'twoMenu_imge87',
          },
        ],
      ],
    };
  },
  watch: {},
  created() {},
  methods: {
    showBtn() {
      this.showBtnBox = !this.showBtnBox;
    },
    changePlot(res) {
      sgworld.Creator.SimpleGraphic.edit(true, { editProp: true });
      switch (res.id) {
        case '1':
          sgworld.Creator.createSimpleGraphic(
            'point',
            {},
            function (entity) {}
          );
          break;
        case '2':
          sgworld.Creator.createSimpleGraphic(
            'polyline',
            {},
            function (entity) {}
          );
          break;
        case '3':
          sgworld.Creator.createSimpleGraphic(
            'rectangle',
            {},
            function (entity) {}
          );
          break;
        case '4':
          sgworld.Creator.createSimpleGraphic(
            'polygon',
            {},
            function (entity) {}
          );
          break;
        case '6':
          if (window.Excavation) {
            window.Excavation.clear();
            window.Excavation = null;
          } else {
            this.$refs.terrainDig.open();
          }
          break;
        case '5':
          if (window.TerrainFlattening) {
            window.TerrainFlattening.remove();
            window.TerrainFlattening = null;
          } else {
            this.$refs.modelPress.open();
          }
          break;
        case '7':
          sgworld.Creator.createModelLibrary();
          break;
        case '8':
          this.clearAll();
          break;
        case '10':
          break;
      }
    },
    //地图初始化
    initMap() {
      //地图初始化
      window.sgworld = new SmartEarth.SGWorld('mapdiv', {
        licenseServer: window.sceneConfig.licenseServer,
      });
      window.Viewer = window.sgworld._Viewer;
      //定位
      sgworld.Navigate.jumpTo({
        //跳转视角
        destination: new Cesium.Cartesian3.fromDegrees(
          116.055913,
          39.937685,
          8000
        ),
      });
      Viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
          layer: 'tdtVecBasicLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
          show: false,
        })
      );

    clearAll() {
      sgworld.Creator.SimpleGraphic.clear();
      if (window.Excavation) {
        window.Excavation.clear();
        window.Excavation = null;
      }
      if (window.TerrainFlattening) {
        window.TerrainFlattening.remove();
        window.TerrainFlattening = null;
      Viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
          layer: 'tdtBasicLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
          show: false,
        })
      );
      Viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=94a34772eb88317fcbf8428e10448561',
          layer: 'tdtAnnoLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
        })
      );
    },
    //底图切换
    changeBaseLayer() {
      this.isActive = !this.isActive;
      this.setLayerVisible();
    },
    setLayerVisible() {
      if (this.isActive == true) {
        Viewer.imageryLayers.get(1).show = true;
        Viewer.imageryLayers.get(2).show = false;
      } else {
        Viewer.imageryLayers.get(1).show = false;
        Viewer.imageryLayers.get(2).show = true;
      }
    },
    tepostmessage(res) {
      const msg = {
        message: 'changeTool',
        data: res,
      };
      document
        .getElementById('sunIframe')
        .contentWindow.postMessage(msg, this.iframeSrc);
    //左侧菜单滑动显隐
    setMenuChange(res) {
      switch (res.id) {
        case 1:
          this.openStatus = !this.openStatus;
          break;
        default: {
          this.openStatus = true;
          this.setListTwoMenu = this.setListTwoMenuAll[res.id - 2];
        }
      }
    },
    //初始化菜单授权
    getPermsMenu() {
      var val = this.$store.state.currentPerms;
      var permsEntity = this.$store.state.permsEntity;
      for (var i = 0; i < permsEntity.length; i++) {
        if (permsEntity[i].perms == val) {
          this.showMenuChange(permsEntity[i], permsEntity);
        }
      }
      for (var i in this.menuOption) {
        if (this.menuOption[i].show != false) {
          this.showMenuList.push(this.menuOption[i]);
        }
      }
      //初始化二级菜单
      if (this.showMenuList.length > 1) {
        var index = this.showMenuList[1].id;
        this.setListTwoMenu = this.setListTwoMenuAll[index - 2];
      }
    },
    showMenuChange(res, result) {
      var permsId = res.id;
@@ -238,77 +440,333 @@
      }
    },
    showMenuStatus(res) {
      switch (res.cnName) {
        case '图层':
          this.menuStatus.menu1 = true;
          break;
        case '视图':
          this.menuStatus.menu2 = true;
          break;
        case '漫游':
          this.menuStatus.menu3 = true;
          break;
        case '分析':
          this.menuStatus.menu4 = true;
          break;
        case '查询':
          this.menuStatus.menu5 = true;
          break;
        case '定位':
          this.menuStatus.menu6 = true;
          break;
        case '测量':
          this.menuStatus.menu7 = true;
          break;
        case '标绘':
          this.menuStatus.menu8 = true;
          break;
      }
    },
    getPermsMenu() {
      let val;
      if (this.$store.state.currentPerms) {
        val = this.$store.state.currentPerms;
      } else {
        val = '/comprehensive';
      }
      var permsEntity = this.$store.state.permsEntity;

      if (permsEntity.length == 0) {
        getPerms().then((res) => {
          if (res.code == 200) permsEntity = res.result;
          for (var i = 0; i < permsEntity.length; i++) {
            if (permsEntity[i].perms == val) {
              this.showMenuChange(permsEntity[i], permsEntity);
            }
          }
        });
      } else {
        for (var i = 0; i < permsEntity.length; i++) {
          if (permsEntity[i].perms == val) {
            this.showMenuChange(permsEntity[i], permsEntity);
          }
      var std = [];
      std.push(this.menuOption[0]);
      for (var i = 1; i < this.menuOption.length; i++) {
        if (this.menuOption[i].name == res.cnName) {
          this.menuOption[i].show = true;
        }
      }
    },
  },
  mounted() {
    //this.messageName = this.$store.state.teNmme;
    this.$bus.$on('changetool', (e) => {
      this.tepostmessage(e);
    });
    this.initMap();
  },

  //初始化菜单授权
  created() {
    this.getPermsMenu();
  },
};
</script>

<style>
<style lang="less" scoped>
.synthesis {
  width: 100%;
  height: 100%;
  position: absolute;
  position: relative;
  .lefIcon {
    width: 63px;
    height: 100%;
    background: #353535;
    position: absolute;
    z-index: 30;
    .menuDiv {
      width: 60px;
      height: 60px;
      border: 1px solid rgba(53, 53, 53, 0);

      .menuImage {
        width: 26px;
        height: 26px;
        margin-left: 17px;
        margin-top: 17px;
      }

      .menu_img1 {
        background: url('../../assets/img/synthesis/系统菜单.png') no-repeat
          center;
      }
      .menu_img2 {
        background: url('../../assets/img/synthesis/矩形 8 拷贝 2.png')
          no-repeat center;
      }
      .menu_img3 {
        background: url('../../assets/img/synthesis/图层 6 拷贝.png') no-repeat
          center;
      }
      .menu_img4 {
        background: url('../../assets/img/synthesis/图层 8 拷贝 2.png')
          no-repeat center;
      }
      .menu_img5 {
        background: url('../../assets/img/synthesis/矢量智能对象 拷贝 3.png')
          no-repeat center;
      }
      .menu_img6 {
        background: url('../../assets/img/synthesis/图层 9 拷贝 4.png')
          no-repeat center;
      }
      .menu_img7 {
        background: url('../../assets/img/synthesis/图层 7 拷贝 5.png')
          no-repeat center;
      }
      .menu_img8 {
        background: url('../../assets/img/synthesis/图层 5 拷贝 6.png')
          no-repeat center;
      }
      .menu_img9 {
        background: url('../../assets/img/synthesis/矩形 8 拷贝 11.png')
          no-repeat center;
      }
    }
    li:hover {
      background: linear-gradient(180deg, #002992, #080472);
    }
  }
  .rightContent {
    width: calc(100% - 63px);
    height: 100%;
    float: right;
    display: flex;
    .left_main {
      margin: 0;
      width: 300px;
      height: auto;
      text-align: center;
      transition: width 2s;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
    }
    .leftMen_div {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      padding: 10px;
      min-width: 100px;
      margin-left: 10px;
      margin-top: 10px;
      border-radius: 5px;
    }
    .leftMen_div:hover {
      background: linear-gradient(180deg, #002992, #080472);
      border: 1px solid #000000;
      box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.21);
    }
    .menuTwoImage {
      width: 32px;
      height: 32px;
      display: inline-block;
    }

    .twoMenu_imge11 {
      background: url('../../assets/img/synthesis/图层 32.png') no-repeat center;
    }
    .twoMenu_imge12 {
      background: url('../../assets/img/synthesis/图层 35.png') no-repeat center;
    }
    .twoMenu_imge13 {
      background: url('../../assets/img/synthesis/发布.png') no-repeat center;
    }
    //视图
    .twoMenu_imge21 {
      background: url('../../assets/img/synthesis/圆角矩形 12 拷贝 3.png')
        no-repeat center;
    }
    .twoMenu_imge22 {
      background: url('../../assets/img/synthesis/图层 10 拷贝.png') no-repeat
        center;
    }
    .twoMenu_imge23 {
      background: url('../../assets/img/synthesis/图层 11 拷贝.png') no-repeat
        center;
    }
    .twoMenu_imge24 {
      background: url('../../assets/img/synthesis/图层 12 拷贝 2.png') no-repeat
        center;
    }
    .twoMenu_imge25 {
      background: url('../../assets/img/synthesis/圆角矩形 5 拷贝 2.png')
        no-repeat center;
    }
    .twoMenu_imge26 {
      background: url('../../assets/img/synthesis/圆角矩形 5 拷贝 3.png')
        no-repeat center;
    }
    .twoMenu_imge27 {
      background: url('../../assets/img/synthesis/矩形 9.png') no-repeat center;
    }
    .twoMenu_imge28 {
      background: url('../../assets/img/synthesis/椭圆 4.png') no-repeat center;
    }
    //漫游
    .twoMenu_imge31 {
      background: url('../../assets/img/synthesis/椭圆 6.png') no-repeat center;
    }
    .twoMenu_imge32 {
      background: url('../../assets/img/synthesis/椭圆 7 拷贝 2.png') no-repeat
        center;
    }
    .twoMenu_imge33 {
      background: url('../../assets/img/synthesis/图层 14 副本 拷贝.png')
        no-repeat center;
    }
    .twoMenu_imge34 {
      background: url('../../assets/img/synthesis/图层 74 拷贝 2.png') no-repeat
        center;
    }
    .twoMenu_imge35 {
      background: url('../../assets/img/synthesis/椭圆 7 拷贝 4.png') no-repeat
        center;
    }
    //分析
    .twoMenu_imge41 {
      background: url('../../assets/img/synthesis/椭圆 8 拷贝 8.png') no-repeat
        center;
    }
    .twoMenu_imge42 {
      background: url('../../assets/img/synthesis/圆角矩形 12 拷贝 5.png')
        no-repeat center;
    }
    .twoMenu_imge43 {
      background: url('../../assets/img/synthesis/圆角矩形 10 副本 3.png')
        no-repeat center;
    }
    .twoMenu_imge44 {
      background: url('../../assets/img/synthesis/图层 74 拷贝 3.png') no-repeat
        center;
    }
    .twoMenu_imge45 {
      background: url('../../assets/img/synthesis/图层 20.png') no-repeat center;
    }
    .twoMenu_imge46 {
      background: url('../../assets/img/synthesis/图层 14 拷贝 3.png') no-repeat
        center;
    }
    .twoMenu_imge47 {
      background: url('../../assets/img/synthesis/图层 18.png') no-repeat center;
    }
    .twoMenu_imge48 {
      background: url('../../assets/img/synthesis/圆角矩形 12 拷贝 6.png')
        no-repeat center;
    }
    .twoMenu_imge49 {
      background: url('../../assets/img/synthesis/管道.png') no-repeat center;
    }
    .twoMenu_imge410 {
      background: url('../../assets/img/synthesis/dxkw.png') no-repeat center;
    }
    .twoMenu_imge411 {
      background: url('../../assets/img/synthesis/矩形 14 拷贝 7.png') no-repeat
        center;
    }
    //查询
    .twoMenu_imge51 {
      background: url('../../assets/img/synthesis/图层 23.png') no-repeat center;
    }
    .twoMenu_imge52 {
      background: url('../../assets/img/synthesis/空间查询.png') no-repeat
        center;
    }
    //定位
    .twoMenu_imge61 {
      background: url('../../assets/img/synthesis/图层 27.png') no-repeat center;
    }
    .twoMenu_imge62 {
      background: url('../../assets/img/synthesis/图层 28.png') no-repeat center;
    }
    //测量
    .twoMenu_imge71 {
      background: url('../../assets/img/synthesis/图层 31.png') no-repeat center;
    }
    .twoMenu_imge72 {
      background: url('../../assets/img/synthesis/图层 31 拷贝.png') no-repeat
        center;
    }
    .twoMenu_imge73 {
      background: url('../../assets/img/synthesis/矩形 13 拷贝.png') no-repeat
        center;
    }
    .twoMenu_imge74 {
      background: url('../../assets/img/synthesis/图层 18 拷贝.png') no-repeat
        center;
    }
    .twoMenu_imge75 {
      background: url('../../assets/img/synthesis/M 拷贝.png') no-repeat center;
    }
    .twoMenu_imge76 {
      background: url('../../assets/img/synthesis/空间测距.png') no-repeat
        center;
    }
    //标绘
    .twoMenu_imge81 {
      background: url('../../assets/img/synthesis/椭圆 5 拷贝 3.png') no-repeat
        center;
    }
    .twoMenu_imge82 {
      background: url('../../assets/img/synthesis/椭圆 3 拷贝 16.png') no-repeat
        center;
    }
    .twoMenu_imge83 {
      background: url('../../assets/img/synthesis/椭圆 3 拷贝 20.png') no-repeat
        center;
    }
    .twoMenu_imge84 {
      background: url('../../assets/img/synthesis/椭圆 3 拷贝 23.png') no-repeat
        center;
    }
    .twoMenu_imge85 {
      background: url('../../assets/img/synthesis/导入.png') no-repeat center;
    }
    .twoMenu_imge86 {
      background: url('../../assets/img/synthesis/导出.png') no-repeat center;
    }
    .twoMenu_imge87 {
      background: url('../../assets/img/synthesis/清除.png') no-repeat center;
    }

    .right_main {
      flex: 1;
      height: 100%;
      position: relative;
    }
    .left_main_show {
      width: 0px;
    }
    .bottomChageLayer {
      height: 40px;
      width: 60px;
      z-index: 40;
      position: absolute;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 3px 3px 6px #666;
      border: 1px solid rgba(204, 204, 204, 0.76);
      border-radius: 5px;
      cursor: pointer;
      bottom: 1%;
      left: 1%;
    }
    .bottomChageLayer:hover {
      border: 1px solid #409eff;
    }
    .active {
      width: 100%;
      height: 100%;
      background: url('../../assets/img/Layer/imgLayer2.png') no-repeat center;
      position: absolute;
      background-size: 100% 100%;
      border-radius: 5px;
    }
    .menuLayer {
      width: 100%;
      height: 100%;
      background: url('../../assets/img/Layer/imgLayer1.png') no-repeat center;
      position: absolute;
      background-size: 100% 100%;
      border-radius: 5px;
    }
  }
}
</style>