real3d-portalsite/src/views/ConstructionApplication3D/skylineAnalysis/skylineAnalysis.vue

<template>
  <div class="ZTGlobal" style="margin: 1rem;">
    <el-form>
      <el-form-item>宽度：
        <el-input-number min="0" max="1000" :step="1" v-model="faceW" @change="farChange"></el-input-number>
      </el-form-item>
      <el-form-item>高度：
        <el-input-number min="0" max="500" :step="1" v-model="faceH" @change="heightChange"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button @click="draw">绘制范围</el-button>
        <el-button @click="create">分析</el-button>
        <el-button @click="clear">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import TJXResult from './TJXResult.vue'
var drawHandler;
var facade
export default {
  data() {
    return {
      faceW: 200,
      faceH: 100,
    }
  },
  mounted() {
    facade = new Cesium.Facade(scene);
    facade.build();
  },
  methods: {
    draw() {

      var that = this;
      viewer.entities.removeAll()
      // facade.clear();
      drawHandler = new Cesium.DrawHandler(
        viewer,
        Cesium.DrawMode.Line,
        0
      );
      drawHandler.activate()
      // drawHandler.activeEvt.addEventListener(function (isActive) {
      // });
      // drawHandler.movingEvt.addEventListener(function (windowPosition) {

      // });
      drawHandler.drawEvt.addEventListener(function (result) {
        debugger
        // var averageH = result.object.positions[0].z + result.object.positions[1].z
        var startPoint = result.object.positions[0];
        var endPoint = result.object.positions[1];

        // var averageH =(startPoint.z +endPoint.z)/2
        // startPoint.z = averageH
        // endPoint.z = averageH
        // var point1 = that.Cartesian2toDegrees(startPoint)
        // point1[2] += 2
        // var point2 = that.Cartesian2toDegrees(endPoint)
        // point2[2] += 2
        // facade.startPoint = Cesium.Cartesian3.fromDegrees(point1[0], point1[1], point1[2]);
        // facade.endPoint = Cesium.Cartesian3.fromDegrees(point2[0], point2[1], point2[2]);
        facade.startPoint = startPoint
        facade.endPoint =endPoint
        facade.maxHeight = parseFloat(that.faceH)
        facade.farDistance = parseFloat(that.faceW)
      })
    },
    Cartesian2toDegrees(position) {
      var cartographic = Cesium.Cartographic.fromCartesian(position);
      var longitude = Cesium.Math.toDegrees(cartographic.longitude);
      var latitude = Cesium.Math.toDegrees(cartographic.latitude);
      var height = cartographic.height;
      return [longitude, latitude, height];
    },
    create() {
      var that = this;
      facade.readyPromise.then(function (base64data) {
        debugger
        that.$layer.iframe({
          content: {
            content: TJXResult, //传递的组件对象
            parent: that, //当前的vue对象
            data: { 'imageData': { 'height': that.faceH, 'width': that.faceW, 'data': base64data } }, //props
          },

          area: ["60rem", "30rem"], //宽 高
          title: "天际线分析结果",
          maxmin: false,
          shade: false, //是否显示遮罩
          shadeClose: false, //点击遮罩是否关闭
          cancel: () => {
            //关闭事件
          },
        });
      });
    },
    farChange() {
      facade.farDistance = parseFloat(this.faceW)
    },
    heightChange() {
      facade.maxHeight = parseFloat(this.faceH)
    },
    clear() {
      viewer.entities.removeAll()
      facade.clear();
      drawHandler.clear();
    }

  }
}
</script>
<style></style>