综合展示，系统管理，授权管理，专题图，资料馆添加权限配置

Surpriseplus

2022-10-26 62ae55ae397b7997b147a7b946f7ad5f1c78a45d

 src/views/Synthesis/viewport.vue

@@ -2,14 +2,14 @@
  <div class="box">
    <ul>
      <li
        style="width: 66px"
        style="margin-left: 10px; width: 110px"
        @click="changeview(item)"
        v-for="item in itemsOne"
      >
        <div class="divli">
          <div :class="item.class" class="backimge2"></div>
        </div>
        <div class="div_li">{{ item.name }}</div>
        <div class="div_li">{{ $t(item.name) }}</div>
      </li>
    </ul>
  </div>
@@ -20,77 +20,98 @@
  data() {
    return {
      isRuler: false,
      isNaviget: false,
      itemsOne: [
        {
          id: "1",
          name: "分屏",
          class: "b1",
          id: '1',
          name: 'synthesis.split',
          class: 'b1',
        },
        {
          id: "2",
          name: "二维",
          class: "b2",
          id: '2',
          name: 'synthesis.twod',
          class: 'b2',
        },
        {
          id: "3",
          name: "三维",
          class: "b3",
          id: '3',
          name: 'synthesis.threed',
          class: 'b3',
        },
        {
          id: "4",
          name: "全图",
          class: "b4",
          id: '4',
          name: 'synthesis.full',
          class: 'b4',
        },
        {
          id: "5",
          name: "放大",
          class: "b5",
          id: '5',
          name: 'synthesis.zommin',
          class: 'b5',
        },
        {
          id: "6",
          name: "缩小",
          class: "b6",
          id: '6',
          name: 'synthesis.zoomout',
          class: 'b6',
        },
        {
          id: "7",
          name: "比例尺",
          class: "b7",
          id: '7',
          name: 'synthesis.rule',
          class: 'b7',
        },
        {
          id: "8",
          name: "指北针",
          class: "b8",
          id: '8',
          name: 'synthesis.compass',
          class: 'b8',
        },
      ],
    };
  },
  created() {
    var cover_Id = this.$store.state.syntiesis.menu;
    var cover_perms = this.$store.state.permsEntity;

    for (var i = 0; i < cover_perms.length; i++) {
      if (cover_perms[i].pid == cover_Id) {
        this.showViewMenu(cover_perms[i]);
      }
    }
  },
  methods: {
    showViewMenu(res) {
      if (res.cnName != '视图') return;
      console.log('视图', res.tag);
    },
    changeview(res) {
      switch (res.id) {
        case "1":
          this.$bus.$emit("changemap", res.name);
        case '1':
          this.$bus.$emit('changemap', '分屏');
          break;
        case "2":
          this.$bus.$emit("changemap", res.name);
        case '2':
          this.$bus.$emit('changemap', '二维');
          break;
        case "3":
          this.$bus.$emit("changemap", res.name);
        case '3':
          this.$bus.$emit('changemap', '三维');
          break;
        case "4":
        case '4':
          window.sgworld.Navigate.jumpTo({
            //跳转视角
            destination: new Cesium.Cartesian3.fromDegrees(110, 32, 8000000),
          });
          break;
        case "5":
        case '5':
          window.sgworld.Navigate.zoomIn();
          break;
        case "6":
        case '6':
          window.sgworld.Navigate.zoomOut();
          break;
        case "7":
        case '7':
          this.isRuler = !this.isRuler;
          window.sgworld.navControl("enableCompass", this.isRuler);
          //比例尺
          window.sgworld.navControl('scale', this.isRuler);
          break;
        case '8':
          this.isNaviget = !this.isNaviget;
          //导航控件
          window.sgworld.navControl('nav', this.isNaviget);
          break;
      }
      // this.$bus.$emit("changetool", res_val);
@@ -119,42 +140,42 @@
  margin: 0px;
}
.b1 {
  background: url("../../assets/img/synthesis/圆角矩形 12 拷贝 3.png") no-repeat
  background: url('../../assets/img/synthesis/圆角矩形 12 拷贝 3.png') no-repeat
    center;
}
.b2 {
  background: url("../../assets/img/synthesis/图层 10 拷贝.png") no-repeat
  background: url('../../assets/img/synthesis/图层 10 拷贝.png') no-repeat
    center;
}
.b3 {
  background: url("../../assets/img/synthesis/图层 11 拷贝.png") no-repeat
  background: url('../../assets/img/synthesis/图层 11 拷贝.png') no-repeat
    center;
}
.b4 {
  background: url("../../assets/img/synthesis/图层 12 拷贝 2.png") no-repeat
  background: url('../../assets/img/synthesis/图层 12 拷贝 2.png') no-repeat
    center;
}
.b5 {
  background: url("../../assets/img/synthesis/圆角矩形 5 拷贝 2.png") no-repeat
  background: url('../../assets/img/synthesis/圆角矩形 5 拷贝 2.png') no-repeat
    center;
}
.b6 {
  background: url("../../assets/img/synthesis/圆角矩形 5 拷贝 3.png") no-repeat
  background: url('../../assets/img/synthesis/圆角矩形 5 拷贝 3.png') no-repeat
    center;
}
.b7 {
  background: url("../../assets/img/synthesis/矩形 9.png") no-repeat center;
  background: url('../../assets/img/synthesis/矩形 9.png') no-repeat center;
}

.b8 {
  background: url("../../assets/img/synthesis/椭圆 4.png") no-repeat center;
  background: url('../../assets/img/synthesis/椭圆 4.png') no-repeat center;
}
.backimge2 {
  width: 30px;
  height: 30px;
  margin-left: 20px;
  position: absolute;
  background-size: 100% 100%;
  margin: 0 39%;
}
.divli {
  width: 100%;