控制

lxl

2022-10-19 cfcd9a35c74ce88da3647a0be3f1459fe5086ed1

 src/views/Synthesis/analyse.vue

@@ -2,14 +2,14 @@
  <div class="box">
    <ul>
      <li
        style="width: 110px"
        style="margin-left: 10px; width: 130px"
        @click="changeAnalsy(item)"
        v-for="item in itemsOne"
      >
        <div class="divli">
          <div :class="item.class" class="backimge4"></div>
        </div>
        <div class="div_li">{{ item.name }}</div>
        <div class="div_li">{{ $t(item.name) }}</div>
      </li>
    </ul>
  </div>
@@ -19,53 +19,69 @@
export default {
  data() {
    return {
      isoline: null,
      isolineFlag: false,
      itemsOne: [
        {
          id: "1",
          name: "等高线分析",
          class: "d1",
          id: '1',
          name: 'synthesis.contouranalysis',
          class: 'd1',
        },
        {
          id: "2",
          name: "坡度分析",
          class: "d2",
          id: '2',
          name: 'synthesis.slopeanalysis',
          class: 'd2',
        },
        {
          id: "3",
          name: "路径分析",
          class: "d3",
          id: '3',
          name: 'synthesis.pathanalysis',
          class: 'd3',
        },
        {
          id: "4",
          name: "地形剖切分析",
          class: "d4",
          id: '4',
          name: 'synthesis.cuttinganalysis',
          class: 'd4',
        },
        {
          id: "5",
          name: "洪水淹没分析",
          class: "d5",
          id: '5',
          name: 'synthesis.floodanalysis',
          class: 'd5',
        },
        {
          id: "6",
          name: "土方量计算",
          class: "d6",
          id: '6',
          name: 'synthesis.earthworkcalculation',
          class: 'd6',
        },
        {
          id: "7",
          name: "三维截面分析",
          class: "d7",
          id: '7',
          name: 'synthesis.crosssectionanalysis',
          class: 'd7',
        },
        {
          id: "8",
          name: "影像对比分析",
          class: "d8",
          id: '8',
          name: 'synthesis.imagecontrast',
          class: 'd8',
        },
      ],
    };
  },
  mounted() {
    if (this.isoline == null) {
      this.isoline = new SmartEarth.ElevationTool(sgworld);
    }
  },
  methods: {
    changeAnalsy(res) {
      switch (res.id) {
        case '1':
          this.isolineFlag = !this.isolineFlag;
          this.isoline.tf = this.isolineFlag;
          this.isoline.render();
          break;
        case '2':
          elevationTool.type = 'slope';
          elevationTool.render();
          break;
      }
    },
  },
@@ -92,33 +108,33 @@
  margin: 0px;
}
.d1 {
  background: url("../../assets/img/synthesis/椭圆 8 拷贝 8.png") no-repeat
  background: url('../../assets/img/synthesis/椭圆 8 拷贝 8.png') no-repeat
    center;
}
.d2 {
  background: url("../../assets/img/synthesis/圆角矩形 12 拷贝 5.png") no-repeat
  background: url('../../assets/img/synthesis/圆角矩形 12 拷贝 5.png') no-repeat
    center;
}
.d3 {
  background: url("../../assets/img/synthesis/圆角矩形 10 副本 3.png") no-repeat
  background: url('../../assets/img/synthesis/圆角矩形 10 副本 3.png') no-repeat
    center;
}
.d4 {
  background: url("../../assets/img/synthesis/图层 74 拷贝 3.png") no-repeat
  background: url('../../assets/img/synthesis/图层 74 拷贝 3.png') no-repeat
    center;
}
.d5 {
  background: url("../../assets/img/synthesis/图层 20.png") no-repeat center;
  background: url('../../assets/img/synthesis/图层 20.png') no-repeat center;
}
.d6 {
  background: url("../../assets/img/synthesis/图层 14 拷贝 3.png") no-repeat
  background: url('../../assets/img/synthesis/图层 14 拷贝 3.png') no-repeat
    center;
}
.d7 {
  background: url("../../assets/img/synthesis/图层 18.png") no-repeat center;
  background: url('../../assets/img/synthesis/图层 18.png') no-repeat center;
}
.d8 {
  background: url("../../assets/img/synthesis/圆角矩形 12 拷贝 6.png") no-repeat
  background: url('../../assets/img/synthesis/圆角矩形 12 拷贝 6.png') no-repeat
    center;
}
.backimge4 {
@@ -127,6 +143,7 @@
  margin-left: 40px;
  position: absolute;
  background-size: 100% 100%;
  margin: 0% 39%;
}
.divli {
  width: 100%;