裁切

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

@@ -1,33 +1,61 @@
 <template>
   <div class="sm-function-module-content">
-    <label class="sm-function-module-sub-section-setting"> 分析结果 </label>
     <el-form :model="form" ref="ruleForm" label-width="100px">
-      <el-form-item label="剖面范围:" prop="xzmj">
-        <range type="clip" :keys="['hx']" class="range" ref="range" />
+      <el-form-item label="裁剪区域宽度:" prop="width">
+        <el-input
+          v-model="form.width"
+          size="mini"
+          type="number"
+          placeholder=""
+          @change="analysis"
+        ></el-input>
       </el-form-item>
-      <!-- <el-form-item label="模型名称:" prop="mxmc">
+      <el-form-item label="裁剪区域高度:" prop="height">
         <el-input
-          v-model="form.mxmc"
+          v-model="form.height"
           size="mini"
-          placeholder="请输入模型名称"
+          type="number"
+          @change="analysis"
         ></el-input>
-      </el-form-item> -->
+      </el-form-item>
+      <el-form-item label="拉伸高度:" prop="extrudeDistance">
+        <el-slider
+          :min="0"
+          :max="50"
+          :step="0.02"
+          v-model="form.extrudeDistance"
+          @change="analysis"
+        ></el-slider>
+      </el-form-item>
     </el-form>
     <div class="boxchild">
-      <el-button type="primary" size="mini" @click="analysis">分析</el-button>
+      <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 { pickPoint } from "@/utils/MapHelper/help.js";
+let position = null;
 export default {
   name: "ClippingPlanes",
   props: {},
   data() {
     return {
       form: {
-        geom: "",
+        lon: "",
+        lat: "",
+        width: 200,
+        height: 200,
+        heading: 0,
+        pitch: 0,
+        roll: 0,
+        // 裁剪区域中心点拉伸距离，单位:米，
+        extrudeDistance: 0,
+        isMoving: false,
       },
     };
   },
@@ -35,20 +63,67 @@ export default {
 
   beforeDestroy() {},
   mounted() {
-    // this.init();
+    viewer.flyTo(store.state.tempLatData[0][0]);
   },
 
   methods: {
-    analysis() {
-      // viewer.flyTo(this.sceneLayers[obj.title][0][0]);
+    clickPoint() {
+      let _this = this;
+      pickPoint((lon, lat, hei) => {
+        position = Cesium.Cartesian3.fromDegrees(lon, lat, hei + 1);
+        this.analysis();
+      });
+    },
+
+    analysis(lon, lat, hei) {
+      // this.vectorlayerlist.push(obj);
       // store.state.sceneLayerlist[obj.title];
       // this.layerparams.forEach(laitem => {
-      //   BIMLayer.setCustomClipPlane(positions[0],positions[1],positions[2]);
+      this.addEntity(lon, lat, hei);
+      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)))
+      // );
+      // 计算矩形的边界坐标;
+      // 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), // 设置矩形的材质和透明度，这里使用了半透明的蓝色
+      //   },
       // });
     },
-    getBuffer() {},
+
+    updateClip(layers) {
+      // layers.setCustomClipPlane(pos[0], pos[1], pos[2]);
+      layers.setCustomClipCross({
+        position,
+        dimensions: new Cesium.Cartesian2(this.form.width, this.form.height),
+        heading: this.form.heading,
+        pitch: this.form.pitch,
+        roll: this.form.roll,
+        extrudeDistance: this.form.extrudeDistance,
+      });
+    },
     clear() {
-      // BIMLayer.clearCustomClipBox();
+      // layers.clearCustomClipBox();
+      store.state.tempLatData[0][0].clearCustomClipBox();
+      viewer.entities.removeAll();
     },
   },
   watch: {},
@@ -56,4 +131,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.inputwidth {
+  width: calc(100% - 100px);
+}
 </style>

src/utils/MapHelper/help.js

@@ -85,9 +85,47 @@ export function loadGeoJSON(geom, yanse, adata, fun) {
   //   }
   // });
 }
-/**
-    * 下载图片
-    */
+export function addPonit() {
+  // manager_multi_level_query.entities.add({
+  //   name: "manager_multi_level_query",
+  //   position: Cesium.Cartesian3.fromDegrees(longitude, latitude, 40),
+  //   billboard: {
+  //     // 图像地址，URI或Canvas的属性
+  //     image: "./static/images/overview/go.png",
+  //     height: 34,
+  //     width: 36,
+  //     scale: 1.0,
+  //     zIndex: 2,
+  //     show: true,
+  //   },
+  // });
+}
+export function clearPoint() {
+  // 图标
+  // var entities = manager_multi_level_query.entities.values;
+  // for (var i = entities.length - 1; i >= 0; i--) {
+  //   manager_multi_level_query.entities.remove(entities[i]);
+  // }
+}
+export function pickPoint(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)
+    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+}
+
+// 导出结果下载图片
 export function download(base64data, fu) {
   var image = new Image();
   image.src = base64data;
@@ -101,9 +139,7 @@ export function download(base64data, fu) {
     a.dispatchEvent(event); // 触发超链接的点击事件
   };
 }
-/**
-     * 根据图片生成画布
-     */
+// 根据图片生成画布
 function convertImageToCanvas(image, fu) {
   var canvas = document.createElement("canvas");
   canvas.width = image.width;
@@ -152,7 +188,7 @@ function drawLegends(canvas, ctx, legends) {
 }
 
 /**
-*计算用户坐标应该减去的差值
+*wms数据查询计算用户坐标应该减去的差值
 */
 function getZoomBbox(zoom) {
   let level0 = 142.03125