real3d-portalsite/src/components/TerrainAnalysis/TerrainCutFillAnalysis/TerrainCutFillAnalysis.vue

<template>
  <div v-show="isCutFill" class="cut_fill_box">
    <div class="cut_fill_centent1">
      设计高度(米)：
      <el-input class="cut_fill_input" v-model="height" placeholder=""></el-input>
      <br>
      土石方量(立方米)：
      <el-input class="cut_fill_input" v-model="result" placeholder=""></el-input>

    </div>
    <div class="cut_fill_Buttons">
      <el-button size="mini" type="primary" @click="draw">绘制</el-button>
      <el-button size="mini" type="primary" @click="clear">清除</el-button>


    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import CutFillAnalysis from "./CutFillAnalysis.js"
let cutFillAnalysis = null;
export default {
  name: "TerrainCutFillAnalysis",
  components: {},
  data() {

    return {
      input: '', sharedState: store.state,
      height: 300,
      result: null,
      handler_Cut_fill: new Cesium.DrawHandler(viewer, Cesium.DrawMode.Polygon, 0)
    };
  },
  //监听属性 类似于data概念
  computed: {

    isCutFill: function () {
      return this.sharedState.terrain[4];
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    draw() {
     
     
      const that = this;
      that.clear();
      // that.handler_Cut_fill.clear();
      // that.handler_Cut_fill.deactivate();



      // if (that.handler_Cut_fill.polyline) {
      //   that.handler_Cut_fill.polyline.show = false;
      // }
      // if (that.handler_Cut_fill.polyline) {
      //   that.handler_Cut_fill.polygon.show = false;
      // }
      // viewer.scene.globe.removeAllExcavationRegion();
      var tooltip = createTooltip(viewer._element);
      //绘制多边形
      that.handler_Cut_fill.activeEvt.addEventListener(function (isActive) {
        if (isActive == true) {
          viewer.enableCursorStyle = false;
          viewer._element.style.cursor = '';
          // $('body').removeClass('drawCur').addClass('drawCur');
        }
        else {
          viewer.enableCursorStyle = true;
          // $('body').removeClass('drawCur');
        }
      });
      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();
        viewer.scene.globe.addExcavationRegion({
          name: 'ggg',
          position: positions,
          height: Number(that.height),
          transparent: false
        });

        that.handler_Cut_fill.polygon.show = false;
        that.handler_Cut_fill.polyline.show = false;
        that.handler_Cut_fill.deactivate();
        // that.handler_Cut_fill.activate();
      });
      that.handler_Cut_fill.activate();
    },
    clear() {
      const that = this;
      that.handler_Cut_fill.clear();
      viewer.scene.globe.removeAllExcavationRegion();

      that.result = null;

    }
  },
  beforeCreate() { }, //生命周期 - 创建之前
  created() {

    const terrainP = new Cesium.CesiumTerrainProvider({
      url: 'http://192.168.60.3:8099/iserver/services/3D-local3DCache-SanYaDSMHuanCun/rest/realspace/datas/dsm@dsm',
      isSct: true//地形服务源自SuperMap iServer发布时需设置isSct为true
    });

    // const terrainP = new Cesium.CesiumTerrainProvider({
    //   url: 'https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path',
    //   requestWaterMask: true,
    //   requestVertexNormals: true,
    //   isSct: false,
    // });
    // // 设置相机视角
    // viewer.scene.camera.setView({
    //   destination: Cesium.Cartesian3.fromDegrees(88.3648, 29.0946, 90000),
    //   orientation: {
    //     heading: 6.10547067016156,
    //     pitch: -0.8475077031996778,
    //     roll: 6.2831853016686185
    //   }
    // });
    viewer.terrainProvider = terrainP;

    viewer.scene.globe.depthTestAgainstTerrain = false;


  }, //生命周期 - 创建完成（可以访问当前this实例）
  beforeMount() { }, //生命周期 - 挂载之前
  mounted() {

    cutFillAnalysis = new CutFillAnalysis(
      viewer,
      80,
    );
  }, //生命周期 - 挂在完成
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroy() { },//生命周期 - 销毁完成
  activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
  deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
};
</script>
<style lang="scss" scoped>
.cut_fill_centent1 {
  width: 100%;
  text-align: left;
  margin-left: 10%;
  margin-top: 5%;
  margin-bottom: 6%;
}

.cut_fill_input {
  display: inline-block;
  width: 50%
}

.cut_fill_input:first-child {
  margin-left: 7%;
  margin-bottom: 5%;
}

.cut_fill_Buttons {
  margin-bottom: 5%;

}
</style>