修改

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

@@ -7,7 +7,7 @@
           size="mini"
           type="number"
           placeholder=""
-          @change="analysis"
+          @input="changewh"
         ></el-input>
       </el-form-item>
       <el-form-item label="裁剪区域高度:" prop="height">
@@ -15,7 +15,7 @@
           v-model="form.height"
           size="mini"
           type="number"
-          @change="analysis"
+          @input="changewh"
         ></el-input>
       </el-form-item>
       <el-form-item label="绕X轴旋转:" prop="pitch">
@@ -25,7 +25,7 @@
           :max="360"
           :step="1"
           v-model="form.pitch"
-          @input="analysis"
+          @input="changehpr()"
         ></el-slider>
       </el-form-item>
       <el-form-item label="绕Y轴旋转:" prop="roll">
@@ -35,7 +35,7 @@
           :max="360"
           :step="1"
           v-model="form.roll"
-          @input="analysis"
+          @input="changehpr()"
         ></el-slider>
       </el-form-item>
       <el-form-item label="绕Z轴旋转:" prop="heading">
@@ -45,7 +45,7 @@
           :max="360"
           :step="1"
           v-model="form.heading"
-          @input="analysis"
+          @input="changehpr()"
         ></el-slider>
       </el-form-item>
       <el-form-item label="拉伸高度:" prop="extrudeDistance">
@@ -69,8 +69,12 @@
 </template>
 
 <script>
-import { pickPoint } from "@/utils/MapHelper/help.js";
+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: {},
@@ -92,51 +96,111 @@ export default {
 
   beforeDestroy() {},
   mounted() {
-    viewer.flyTo(store.state.tempLatData[0][0]);
+    layers = store.state.tempLatData[0][0];
+    viewer.flyTo(layers);
+    this.addEntity();
   },
 
   methods: {
     clickPoint() {
-      pickPoint((lon, lat, hei) => {
-        pos = { lon, lat, hei };
-        this.form.extrudeDistance = 100 - hei;
+      // 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);
+        console.log(box, "---s-s-s-s-");
+        box.show = false;
         this.analysis();
+        handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
       });
     },
+    changewh() {
+      console.log("-s--s-s-s-s-");
+      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.lon) return;
+      if (!pos.x) return;
       // this.vectorlayerlist.push(obj);
       // store.state.sceneLayerlist[obj.title];
       // this.layerparams.forEach(laitem => {
       // this.addEntity();
-      this.updateClip(store.state.tempLatData[0][0]);
+      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() {
-      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),
+      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.BLACK,
-          height: this.form.extrudeDistance,
+          outlineColor: Cesium.Color.RED,
+          outlineWidth: 5.0,
         },
       });
     },
+    setBox() {
+      if (!box) return;
+      box.box.dimensions = new Cesium.Cartesian3(
+        this.form.width,
+        this.form.height,
+        0.1
+      );
+      box.position = boxPosition;
+    },
 
-    updateClip(layers) {
+    updateClip() {
+      console.log(layers, "llll");
       // layers.setCustomClipPlane(pos[0], pos[1], pos[2]);
       layers.setCustomClipCross({
-        position: Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat, 100),
-        dimensions: new Cesium.Cartesian2(this.form.width, this.form.height),
+        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,
@@ -144,9 +208,10 @@ export default {
       });
     },
     clear() {
+      if (box) box.show = false;
       // layers.clearCustomClipBox();
-      store.state.tempLatData[0][0].clearCustomClipBox();
-      viewer.entities.removeAll();
+      layers.clearCustomClipBox();
+      // viewer.entities.removeAll();
     },
   },
   watch: {},

src/utils/MapHelper/help.js

@@ -107,20 +107,31 @@ export function clearPoint() {
   //   manager_multi_level_query.entities.remove(entities[i]);
   // }
 }
-export function pickPoint(fun) {
+export function moveHandler(fun) {
+  let handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
+  handler.setInputAction((event) => {
+    var position = viewer.scene.pickPosition(event.endPosition);
+    if (!position) return;
+    fun(position)
+  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+}
+export function pickPoint(isjs, fun) {
   let handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
   handler.setInputAction((event) => {
     var position = viewer.scene.pickPosition(event.position);
     if (!position)
       //点击到地球之外
       return false;
-    var cartographic = Cesium.Cartographic.fromCartesian(position);
-    let lon = Cesium.Math.toDegrees(cartographic.longitude);
-    let lat = Cesium.Math.toDegrees(cartographic.latitude);
-    let height = cartographic.height;
-    // let heading = viewer.scene.camera.heading;
-    // let pitch = viewer.scene.camera.pitch;
-    fun(lon, lat, height)
+    if (isjs) {
+      var cartographic = Cesium.Cartographic.fromCartesian(position);
+      let lon = Cesium.Math.toDegrees(cartographic.longitude);
+      let lat = Cesium.Math.toDegrees(cartographic.latitude);
+      let height = cartographic.height;
+      // let heading = viewer.scene.camera.heading;
+      // let pitch = viewer.scene.camera.pitch;
+      fun(lon, lat, height)
+    }
+    else fun(position, handler)
     handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
   }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 }