1

Surpriseplus

2022-11-29 271d931fc950745d37554528324cbc8a636d85c3

 src/views/Synthesis/index.vue

@@ -2,7 +2,10 @@
  <div class="synthesis">
    <div class="lefIcon">
      <ul>
        <li v-for="item in showMenuList">
        <li
          v-for="item in showMenuList"
          :class="{ lefMenuActive: showMenuFlag == item.id }"
        >
          <div class="menuDiv" :title="item.name" @click="setMenuChange(item)">
            <div class="menuImage" :class="item.class"></div>
          </div>
@@ -11,17 +14,13 @@
    </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 class="right_Map">
          <left-menu></left-menu>
        </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 class="right_main">
        <div class="right_Map">
          <mapdiv></mapdiv>
        </div>
      </div>
    </div>
@@ -30,10 +29,16 @@

<script>
import { getPerms } from '../../api/api';
import mapdiv from '../../components/MapDiv.vue';
import leftMenu from './LeftMenu.vue';
export default {
  components: {},
  components: {
    mapdiv,
    leftMenu,
  },
  data() {
    return {
      showMenuFlag: null,
      openStatus: false,
      isActive: false,
      showMenuList: [],
@@ -93,311 +98,11 @@
          show: 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: {
    //地图初始化
    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,
        })
      );

      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;
      }
    },
    //左侧菜单滑动显隐
    setMenuChange(res) {
      switch (res.id) {
@@ -406,7 +111,8 @@
          break;
        default: {
          this.openStatus = true;
          this.setListTwoMenu = this.setListTwoMenuAll[res.id - 2];
          this.$bus.$emit('setChangeTwoMenu', res.id - 2);
          this.showMenuFlag = res.id;
        }
      }
    },
@@ -427,7 +133,7 @@
      //初始化二级菜单
      if (this.showMenuList.length > 1) {
        var index = this.showMenuList[1].id;
        this.setListTwoMenu = this.setListTwoMenuAll[index - 2];
        this.$bus.$emit('setChangeTwoMenu', index - 2);
      }
    },
    showMenuChange(res, result) {
@@ -470,6 +176,7 @@
    background: #353535;
    position: absolute;
    z-index: 30;

    .menuDiv {
      width: 60px;
      height: 60px;
@@ -519,10 +226,17 @@
          no-repeat center;
      }
    }
    // li {
    //   background: rgba(53, 53, 53, 0);
    // }
    .lefMenuActive {
      background: linear-gradient(180deg, #002992, #080472);
    }
    li:hover {
      background: linear-gradient(180deg, #002992, #080472);
    }
  }

  .rightContent {
    width: calc(100% - 63px);
    height: 100%;
@@ -532,198 +246,8 @@
      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;
      transition: width 2s;
    }

    .right_main {
@@ -731,6 +255,10 @@
      height: 100%;
      position: relative;
    }
    .right_Map {
      width: 100%;
      height: 100%;
    }
    .left_main_show {
      width: 0px;
    }