real3d-portalsite/src/components/3DAnalysis/Smashing/Smashing.vue

<template>
  <div v-show="smashingComb">
    <div>
      <!-- <div class="sm-point media-hidden"></div>
      <label class="sm-function-module-sub-section-setting media-hidden">{{
        Resource.ObserverInformation
      }}</label> -->

      <div class="boxchild">
        <el-button type="primary" size="mini" @click="createSmashing"
          >倾斜压平</el-button
        >
        <el-button type="primary" size="mini" @click="clear">{{
          Resource.clear
        }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
let cutFillAnalysis = null;

export default {
  name: "Sm3dSmashing",
  props: {},
  data() {
    return {
      inited: false,
      sharedState: store.state,
      handler_Cut_fill: null,
      //存储压平数据名称
      flattenNames: [],
      handlerTemp: null,
    };
  },
  computed: {
    smashingComb: function () {
      return this.sharedState.analysis[5];
    },
    analysisShow: function () {
      return this.sharedState.toolBar[6];
    },
  },
  beforeDestroy() {},
  mounted() {},
  methods: {
    //压平测试方法
    tempTest() {
      let pos = [
        109.61859827027874, 18.321966806715164, -1.2607129544892512,
        109.62636359998885, 18.321805377984234, -1.2572823282163708,
        109.62492348975545, 18.299342421648266, -0.8778970374238814,
        109.62015920613872, 18.29884447877476, -0.8767527547718837,
      ];
      let aaa = store.state.tempLatData[0];
      this.flattenNames = [];
      //遍历所有s3m图层，设置压平
      for (var i = 0; i < aaa.length; i++) {
        let nameStr = "flatten" + new Date().getTime();
        aaa[i].addFlattenRegion({
          position: pos,
          name: nameStr,
        });
        this.flattenNames.push(nameStr);
      }
    },
    createSmashing() {
      //绘制多边形
      const that = this;
      let tooltip = createTooltip(document.body);

      that.clear();
      if (that.handler_Cut_fill == null) {
        that.handler_Cut_fill = new Cesium.DrawHandler(
          viewer,
          Cesium.DrawMode.Polygon,
          0
        );
      }

      that.handler_Cut_fill.activeEvt.addEventListener(function (isActive) {
        if (isActive == true) {
          viewer.enableCursorStyle = false;
          viewer._element.style.cursor = "";
        } else {
          viewer.enableCursorStyle = true;
        }
      });
      that.handler_Cut_fill.movingEvt.addEventListener(function (
        windowPosition
      ) {
        if (windowPosition.x < 200 && windowPosition.y < 150) {
          tooltip.setVisible(false);
          return;
        }
        if (that.handler_Cut_fill.isDrawing) {
          tooltip.showAt(
            windowPosition,
            "<p>点击确定压平区域中间点</p><p>右键单击结束绘制,进行压平</p>"
          );
        } else {
          tooltip.showAt(windowPosition, "<p>点击绘制压平区域第一个点</p>");
        }
      });
      that.handler_Cut_fill.drawEvt.addEventListener(function (result) {
        if (!result.object.positions) {
          tooltip.showAt(result, "<p>请绘制正确的多边形</p>");
          that.handler_Cut_fill.polygon.show = false;
          that.handler_Cut_fill.polyline.show = false;
          that.handler_Cut_fill.deactivate();
          that.handler_Cut_fill.activate();
          return;
        }

        var array = [].concat(result.object.positions);

        tooltip.setVisible(false);
        var positions = [];
        for (var i = 0, len = array.length; i < len; i++) {
          var cartographic = Cesium.Cartographic.fromCartesian(array[i]);
          var longitude = Cesium.Math.toDegrees(cartographic.longitude);
          var latitude = Cesium.Math.toDegrees(cartographic.latitude);
          var h = cartographic.height;

          if (
            positions.indexOf(longitude) == -1 &&
            positions.indexOf(latitude) == -1
          ) {
            positions.push(longitude);
            positions.push(latitude);
            positions.push(h);
          }
        }
        viewer.scene.globe.removeAllExcavationRegion();
        let s3mLayers = store.state.tempLatData[0];
        //遍历所有s3m图层，设置压平
        for (var i = 0; i < s3mLayers.length; i++) {
          let nameStr = "flatten" + new Date().getTime(); //创建唯一名称
          //倾斜影像压平处理
          s3mLayers[i].addFlattenRegion({
            position: positions,
            name: nameStr,
          });
          //推送压平实体名称
          this.flattenNames.push(nameStr);
        }
        positions = [];
        that.handler_Cut_fill.polygon.show = false;
        that.handler_Cut_fill.polyline.show = false;
        that.handler_Cut_fill.deactivate();
      });
      that.handler_Cut_fill.activate();
    },
    clear() {
      const that = this;
      if (that.handler_Cut_fill != null) {
        that.handler_Cut_fill.clear();
        viewer.scene.globe.removeAllExcavationRegion();
        that.handler_Cut_fill.deactivate();
        that.handler_Cut_fill = null;
        that.value = "";
      }

      if (this.flattenNames.length) {
        //图层数据
        let layersData = store.state.tempLatData[0];
        //遍历所有s3m图层，删除压平
        for (var i = 0; i < layersData.length; i++) {
          layersData[i].removeFlattenRegion(this.flattenNames[i]);
          this.flattenNames.push(nameStr);
        }
        this.flattenNames = [];
      }
    },
  },
  watch: {
    smashingComb(val) {
      if (!this.inited) {
        this.inited = !this.inited;
        this.handler_Cut_fill = new Cesium.DrawHandler(
          viewer,
          Cesium.DrawMode.Polygon,
          0
        );
        this.handlerTemp = new Cesium.ScreenSpaceEventHandler(
          viewer.scene.canvas
        );
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>