user

lxl

2022-10-27 9ce29c536ba2a636416c618761985e2b9a711ee6

 src/views/Synthesis/analyse.vue

@@ -2,72 +2,331 @@
  <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>
    <mapinfo ref="mapinfo" />
  </div>
</template>

<script>
import $ from 'jquery';
// 测量-信息弹窗
import mapinfo from '../Tools/mapinfo.vue';
export default {
  components: {
    mapinfo,
  },
  data() {
    return {
      changeAnalsyFlag: null,
      isoline: null,
      isolineFlag: false,
      isslopeFlag: false,
      isslopeType: null,
      dxpmIndex: null,
      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',
        },
      ],
    };
  },

  methods: {
    changeAnalsy(res) {
      var that = this;
      switch (res.id) {
        case '1':
          that.isolineFlag = !that.isolineFlag;
          elevationTool.tf = that.isolineFlag;
          elevationTool.render();
          break;
        case '2':
          that.isslopeFlag = !that.isslopeFlag;
          if (that.isslopeFlag == true) {
            elevationTool.type = 'slope';
          } else {
            elevationTool.type = 'none';
          }
          elevationTool.render();
          break;
        case '3':
          var value = {
            name: 'Analysis',
            id: 3,
          };
          this.$bus.$emit('mapChangeBox', value);
          // var jsonurl =
          //   'http://192.168.20.39:9055/gisserver/wnsserver/beijingdaohang_wns?start=' +
          //   '116.0867468497,39.937314280233' +
          //   '&end=' +
          //   '116.0860003269,39.936289981725' +
          //   '&propertyName=Shape&tolerance=500&request=FindPath&format=json';
          // $.ajax({
          //   url: jsonurl,
          //   async: false,
          //   type: 'GET',
          //   dataType: 'json',
          //   contentType: 'application/json;charset=utf-8',
          //   success: (data) => {
          //     data.features.forEach((e) => {
          //       if (e.geometry.type == 'LineString') {
          //         //this.executeFly3D(e.geometry.coordinates);
          //         this.executeFly3D(e.geometry.coordinates);
          //       }
          //     });
          //   },
          // });
          break;
        case '4':
          if (window.AnalysisDXPM) {
            this.clear(res.id);
          } else {
            this.addterrainSectionAnalysis();
          }
          break;
        case '5':
          if (window.AnalysisFlood) {
            this.clear(res.id);
          } else {
            this.addAnalysisFlood();
          }
          break;
        case '6':
          var that = this;
          var volumetricMeasurementTool =
            sgworld.Creator.createVolumetricMeasureTool();
          volumetricMeasurementTool.startDrawing(
            { ...this.colorAll, onlyTerrain: false },
            'auto',
            (data) => {
              if (volumetricMeasurementTool.popupData) {
                volumetricMeasurementTool.popupData.value = `填方：${
                  data.volume.fill.toFixed(4) + data.unit.fill
                }<br>挖方：${data.volume.dig.toFixed(4) + data.unit.dig}`;
              } else {
                data.id = sgworld.Core.getuid();
                this.measureData.set(data.id, volumetricMeasurementTool);
                let popupData = that.openMeasureResultInfo('体积方量', data);
                volumetricMeasurementTool.popupData = popupData;
              }
            }
          );
          break;
        case '7':
          window.model = null;
          var url =
            'http://183.162.245.49:8099/pcdata/JC_MAX_MX/SN/tileset.json';
          model = sgworld.Creator.create3DTilesets(
            '',
            url,
            { height: 670 },
            {},
            '0',
            true,
            (data) => {
              sgworld.Navigate.flyToObj(data);
            }
          );
          setTimeout(() => {
            model.clippingModel({
              direction: 'x',
            });
          }, 5000);
          break;
        case '8':
          if (openStreetMap.item.show == false) {
            openStreetMap.item.show = true;
            sgworld.Analysis.createCurtainContrast(0, 1);
          } else {
            openStreetMap.item.show = false;
            sgworld.Analysis.clearCurtainContrast();
          }
          break;
      }
    },
    clear(res) {
      switch (res) {
        case '4':
          layer.close(this.dxpmIndex);
          this.dxpmIndex = undefined;
          if (window.AnalysisDXPM) {
            window.AnalysisDXPM.flyPoint &&
              Viewer.entities.remove(window.AnalysisDXPM.flyPoint);
            window.AnalysisDXPM && window.AnalysisDXPM.deleteObject();
            window.AnalysisDXPM = undefined;
          }
          break;
        case '5':
          window.AnalysisFlood && window.AnalysisFlood.endWater();
          window.AnalysisFlood = undefined;

          break;
      }
    },
    openMeasureResultInfo(name, data) {
      let info = '';
      switch (name) {
        case '水平距离':
        case '空间距离':
          info = '总长度：' + data.distance[data.distance.length - 1];
          break;
        case '海拔高度':
          info = '海拔：' + data.height;
          break;
        case '垂直高度':
          info = `${data.gddistance}<br>${data.kjdistance}<br>${data.spdistance}`;
          break;
        case '表面面积':
        case '平面面积':
          info = data.mj;
          break;
        case '角度':
          data.labels.forEach((label) => {
            info += label.label.text.getValue() + '<br>';
          });
          break;
        case '体积方量':
          info = `填方：${
            data.volume.fill.toFixed(4) + data.unit.fill
          }<br>挖方：${data.volume.dig.toFixed(4) + data.unit.dig}`;
          break;
      }
      return (
        this.$refs &&
        this.$refs.mapinfo &&
        this.$refs.mapinfo.open(name, info, {
          close: () => {
            // 清除测量
            this.clearMeasure(data.id);
          },
        })
      );
    },
    clearMeasure(id) {
      if (id) {
        let data = this.measureData.get(id);
        data && data.deleteObject && data.deleteObject();
        // 体积方量
        data && data.cleanUp && data.cleanUp();
        this.measureData.delete(id);
      } else {
        this.measureData.forEach((data) => {
          data.deleteObject && data.deleteObject();
          // 体积方量
          data.cleanUp && data.cleanUp();
        });
        this.measureData.clear();
      }
    },
    addterrainSectionAnalysis() {
      window.AnalysisDXPM = sgworld.Command.execute(
        2,
        6,
        { cyjj: 50, objid: 0 },
        (Distance) => {
          if (Distance.gcs && Distance.gcs.length) {
            window.AnalysisDXPM.analyseData = Distance;
            this.dxpmIndex = layer.open({
              type: 2,
              title: '分析结果',
              shade: false,
              area: ['80%', '280px'],
              offset: 'b',
              skin: 'other-class',
              content: '/SmartEarthSDK/Workers/analysis/AnalysisDXPM.html',
              end: () => {
                this.dxpmIndex && this.clear('4');
              },
            });
          } else {
            //剖面
            window.AnalysisDXPM && window.AnalysisDXPM.deleteObject();
          }
        }
      );
    },
    addAnalysisFlood() {
      var method = {
        pointSelect: true,
        spood: 20,
        GroupID: 0,
        url: '/SmartEarthSDK/Workers/image/waterNormals.jpg',
      };
      window.AnalysisFlood = sgworld.Command.execute(
        2,
        2,
        method,
        (value) => {}
      );
    },
    showViewMenu(res) {
      if (res.cnName != '分析') return;
      console.log('分析', res.tag);
    },
  },
  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]);
      }
    }
  },
  mounted() {
    this.measureData = new Map();
    this.colorAll = {
      point: Cesium.Color.fromCssColorString('#ff0000'),
      polyline: Cesium.Color.fromCssColorString('#ffff00').withAlpha(0.6),
      polygon: Cesium.Color.fromCssColorString('#ffff00').withAlpha(0.6),
    };
  },
};
</script>
@@ -92,33 +351,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 +386,7 @@
  margin-left: 40px;
  position: absolute;
  background-size: 100% 100%;
  margin: 0% 39%;
}
.divli {
  width: 100%;