剖切

src/components/3DAnalysis/ClippingPlanes/index.vue

@@ -18,13 +18,44 @@
           @change="analysis"
         ></el-input>
       </el-form-item>
-      <el-form-item label="拉伸高度:" prop="extrudeDistance">
+      <el-form-item label="绕X轴旋转:" prop="pitch">
+        <el-slider
+          class="inputwidth"
+          :min="0"
+          :max="360"
+          :step="1"
+          v-model="form.pitch"
+          @input="analysis"
+        ></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="analysis"
+        ></el-slider>
+      </el-form-item>
+      <el-form-item label="绕Z轴旋转:" prop="heading">
         <el-slider
+          class="inputwidth"
           :min="0"
-          :max="50"
+          :max="360"
+          :step="1"
+          v-model="form.heading"
+          @input="analysis"
+        ></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"
-          @change="analysis"
+          @input="analysis"
         ></el-slider>
       </el-form-item>
     </el-form>
@@ -39,22 +70,20 @@
 
 <script>
 import { pickPoint } from "@/utils/MapHelper/help.js";
-let position = null;
+let pos = {};
 export default {
   name: "ClippingPlanes",
   props: {},
   data() {
     return {
       form: {
-        lon: "",
-        lat: "",
-        width: 200,
-        height: 200,
+        width: 100,
+        height: 100,
         heading: 0,
         pitch: 0,
         roll: 0,
         // 裁剪区域中心点拉伸距离，单位:米，
-        extrudeDistance: 0,
+        extrudeDistance: 0.01,
         isMoving: false,
       },
     };
@@ -68,51 +97,45 @@ export default {
 
   methods: {
     clickPoint() {
-      let _this = this;
       pickPoint((lon, lat, hei) => {
-        position = Cesium.Cartesian3.fromDegrees(lon, lat, hei + 1);
+        pos = { lon, lat, hei };
+        this.form.extrudeDistance = 100 - hei;
         this.analysis();
       });
     },
 
-    analysis(lon, lat, hei) {
+    analysis() {
+      if (!pos.lon) return;
       // this.vectorlayerlist.push(obj);
       // store.state.sceneLayerlist[obj.title];
       // this.layerparams.forEach(laitem => {
-      this.addEntity(lon, lat, hei);
+      // this.addEntity();
       this.updateClip(store.state.tempLatData[0][0]);
     },
-    addEntity(lon, lat, hei) {
-      // 使用Cesium.Rectangle.fromDegrees方法创建一个矩形区域，该方法接受中心点、宽度和高度（在经纬度坐标系中），并返回一个Rectangle对象
-      // var rectangle = Cesium.Rectangle.fromDegrees(
-      //   lon,
-      //   lat,
-      //   lon + this.form.width / 6371000,
-      //   lat +
-      //     this.form.height / (6371000 * Math.cos(Cesium.Math.toRadians(lat)))
-      // );
+    addEntity() {
+      viewer.entities.removeAll();
+      let js = 0.0000095;
       // 计算矩形的边界坐标;
-      // var minX = lon - this.form.width / 2;
-      // var maxX = lon + this.form.width / 2;
-      // var minY = lat - this.form.height / 2;
-      // var maxY = lat + this.form.height / 2;
-      // // 使用Cesium.Rectangle.fromCartesianBounds创建矩形边界
-      // var rectangle = Cesium.Rectangle.fromCartesianBounds(
-      //   new Cesium.CartesianBounds(minX, minY, maxX, maxY)
-      // );
-      // var entity = viewer.entities.add({
-      //   name: "Sample Rectangle", // 实体的名称
-      //   rectangle: {
-      //     coordinates: rectangle, // 矩形区域的坐标
-      //     material: new Cesium.Color.BLUE.withAlpha(0.5), // 设置矩形的材质和透明度，这里使用了半透明的蓝色
-      //   },
-      // });
+      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,
+        },
+      });
     },
 
     updateClip(layers) {
       // layers.setCustomClipPlane(pos[0], pos[1], pos[2]);
       layers.setCustomClipCross({
-        position,
+        position: Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat, 100),
         dimensions: new Cesium.Cartesian2(this.form.width, this.form.height),
         heading: this.form.heading,
         pitch: this.form.pitch,
@@ -132,6 +155,6 @@ export default {
 
 <style lang="scss" scoped>
 .inputwidth {
-  width: calc(100% - 100px);
+  width: calc(100% - 10px);
 }
 </style>