real3d-portalsite/src/components/3DAnalysis/ClippingPlanes/index.vue

<template>
  <div class="sm-function-module-content">
    <el-form :model="form" ref="ruleForm" label-width="100px">
      <el-form-item label="裁剪区域宽度:" prop="width">
        <el-slider
          class="inputwidth"
          :min="1"
          :max="500"
          :step="1"
          v-model="form.width"
          @input="changewh()"
        ></el-slider>
      </el-form-item>
      <el-form-item label="裁剪区域高度:" prop="height">
        <el-slider
          class="inputwidth"
          :min="1"
          :max="500"
          :step="1"
          v-model="form.height"
          @input="changewh()"
        ></el-slider>
      </el-form-item>
      <el-form-item label="绕X轴旋转:" prop="pitch">
        <el-slider
          class="inputwidth"
          :min="0"
          :max="360"
          :step="1"
          v-model="form.pitch"
          @input="changehpr()"
        ></el-slider>
      </el-form-item>
      <el-form-item label="绕Y轴旋转:" prop="roll">
        <el-slider
          class="inputwidth"
          :min="0"
          :max="360"
          :step="1"
          v-model="form.roll"
          @input="changehpr()"
        ></el-slider>
      </el-form-item>
      <el-form-item label="绕Z轴旋转:" prop="heading">
        <el-slider
          class="inputwidth"
          :min="0"
          :max="360"
          :step="1"
          v-model="form.heading"
          @input="changehpr()"
        ></el-slider>
      </el-form-item>
      <el-form-item label="拉伸高度:" prop="extrudeDistance">
        <el-slider
          class="inputwidth"
          :min="0.01"
          :max="100"
          :step="0.02"
          v-model="form.extrudeDistance"
          @input="analysis"
        ></el-slider>
      </el-form-item>
    </el-form>
    <div class="boxchild">
      <el-button type="primary" size="mini" @click="clickPoint"
        >点击选择点位</el-button
      >
      <el-button type="primary" size="mini" @click="clear">清除</el-button>
    </div>
  </div>
</template>

<script>
import { moveHandler, pickPoint } from "@/utils/MapHelper/help.js";
let pos = {};
let box = null;
let startClip = false;
let boxPosition = {};
let layers = null;
export default {
  name: "ClippingPlanes",
  props: {},
  data() {
    return {
      form: {
        width: 100,
        height: 100,
        heading: 0,
        pitch: 0,
        roll: 0,
        // 裁剪区域中心点拉伸距离，单位:米，
        extrudeDistance: 0.01,
        isMoving: false,
      },
    };
  },
  computed: {},

  beforeDestroy() {},
  mounted() {
    layers = store.state.tempLatData[0][0];
    viewer.flyTo(layers);
    this.addEntity();
  },

  methods: {
    clickPoint() {
      // startClip = true;
      if (!box) this.addEntity();
      box.show = true;
      moveHandler((position) => {
        boxPosition = position;
        this.setBox();
      });
      pickPoint(false, (position, handler) => {
        pos = position;
        // this.form.extrudeDistance = 100 - hei;
        // this.changehpr(pos);
        box.show = false;
        this.analysis();
        handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      });
    },
    changewh() {
      this.setBox();
      this.analysis();
    },
    changehpr(pos) {
      if (!box) return;
      var hpr = new Cesium.HeadingPitchRoll(
        Cesium.Math.toRadians(this.form.heading),
        Cesium.Math.toRadians(this.form.pitch),
        Cesium.Math.toRadians(this.form.roll)
      );

      box.orientation = Cesium.Transforms.headingPitchRollQuaternion(
        pos || boxPosition,
        hpr
      );
      this.analysis();
    },

    analysis() {
      if (!pos.x) return;
      // this.vectorlayerlist.push(obj);
      // store.state.sceneLayerlist[obj.title];
      // this.layerparams.forEach(laitem => {
      // this.addEntity();
      this.updateClip();
    },
    // addEntity() {
    //   viewer.entities.removeAll();
    //   let js = 0.0000095;
    //   // 计算矩形的边界坐标;
    //   var minX = pos.lon - (this.form.width / 2) * js;
    //   var maxX = pos.lon + (this.form.width / 2) * js;
    //   var minY = pos.lat - (this.form.height / 2) * js;
    //   var maxY = pos.lat + (this.form.height / 2) * js;
    //   // 创建一个长方形实体
    //   viewer.entities.add({
    //     rectangle: {
    //       coordinates: Cesium.Rectangle.fromDegrees(minX, minY, maxX, maxY),
    //       material: new Cesium.Color.BLUE.withAlpha(0.5),
    //       outline: true,
    //       outlineColor: Cesium.Color.BLACK,
    //       height: this.form.extrudeDistance,
    //     },
    //   });
    // },
    addEntity() {
      box = viewer.entities.add({
        // 标识盒
        position: Cesium.Cartesian3.fromDegrees(0, 0, 0),
        show: false,
        box: {
          dimensions: new Cesium.Cartesian3(5, 5, 0.1),
          fill: false,
          outline: true,
          outlineColor: Cesium.Color.RED,
          outlineWidth: 5.0,
        },
      });
      this.setBox();
      this.changehpr();
    },
    setBox() {
      if (!box) return;
      box.box.dimensions = new Cesium.Cartesian3(
        this.form.width,
        this.form.height,
        0.1
      );
      box.position = boxPosition;
    },

    updateClip() {
      console.log(layers, "llll");
      // layers.setCustomClipPlane(pos[0], pos[1], pos[2]);
      layers.setCustomClipCross({
        position: pos,
        dimensions: new Cesium.Cartesian3(
          this.form.width,
          this.form.height,
          this.form.extrudeDistance
        ),
        heading: this.form.heading,
        pitch: this.form.pitch,
        roll: this.form.roll,
        extrudeDistance: this.form.extrudeDistance,
      });
    },
    clear() {
      if (box) box.show = false;
      // layers.clearCustomClipBox();
      layers.clearCustomClipBox();
      // viewer.entities.removeAll();
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.inputwidth {
  width: calc(100% - 10px);
}
</style>