视廊分析

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

@@ -1,5 +1,8 @@
 <template>
-  <div class="sm-function-module-content">
+  <div
+    class="sm-function-module-content"
+    style="border-top: 1px dashed #02a7f0; padding: 0.5rem; color: #ffffff"
+  >
     <video
       id="trailer"
       WE

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

@@ -2,9 +2,10 @@
   <div class="sm-function-module-content ZTGlobal">
     <el-row
       :gutter="5"
-      style="border: 1px dashed #02a7f0; padding: 0.5rem; color: #ffffff"
+      style="border-top: 1px dashed #02a7f0; padding: 0.5rem; color: #ffffff"
     >
-      <el-row :gutter="5">
+      {{ viewshed }}
+      <el-col style="padding: 0.5rem">
         观察者高度(米):
         <el-input-number
           size="small"
@@ -15,63 +16,36 @@
           precision="1"
           v-model="personH"
         ></el-input-number>
-        <el-col :span="8"
-          ><el-button size="mini" type="default" @click="addGCD"
-            >添加观察点</el-button
-          >
-        </el-col>
-        <el-col :span="8"
-          ><el-button size="mini" type="default" @click="addTagget"
-            >添加目标点</el-button
-          >
-        </el-col>
-        <el-col :span="7">
-          <el-button size="mini" type="default" @click="changeView"
-            >切换视角</el-button
-          >
-        </el-col>
-      </el-row>
+      </el-col>
+      <el-col :span="8">
+        <el-button size="mini" type="default" @click="addGCD">
+          添加观察点
+        </el-button>
+      </el-col>
+      <el-col :span="8">
+        <el-button size="mini" type="default" @click="addTagget">
+          添加目标点
+        </el-button>
+      </el-col>
+      <el-col :span="7">
+        <el-button size="mini" type="default" @click="clearViewshed">
+          清除
+        </el-button>
+      </el-col>
+      <!-- <el-col :span="7">
+        <el-button size="mini" type="default" @click="changeView"
+          >切换视角</el-button
+        >
+      </el-col> -->
     </el-row>
-    绿线为可见区域，红线为不可见区域
-
-    <el-form :model="proform" ref="ruleForm" label-width="100px">
-      <el-form-item label="宽度：" prop="horizontal">
-        <el-slider
-          class="inputwidth"
-          :min="1"
-          :max="50"
-          :step="1"
-          v-model="proform.horizontal"
-          @input="chageHor"
-        ></el-slider>
-      </el-form-item>
-      <el-form-item label="高度：" prop="vertical">
-        <el-slider
-          class="inputwidth"
-          :min="1"
-          :max="50"
-          :step="1"
-          v-model="proform.vertical"
-          @input="chageVert"
-        ></el-slider>
-      </el-form-item>
-      <el-form-item label="距离：" prop="distance">
-        <el-slider
-          class="distance"
-          :min="100"
-          :max="1000"
-          :step="1"
-          v-model="proform.distance"
-          @input="chageDist"
-        ></el-slider>
-      </el-form-item>
-    </el-form>
+    <!-- </el-row> -->
+    <!-- 绿线为可见区域，红线为不可见区域 -->
 
     <div class="boxchild">
-      <el-button type="primary" size="mini" @click="active">
-        视频投放
+      <el-button type="primary" size="mini" @click="ExportResult">
+        导出结果
       </el-button>
-      <el-button type="primary" size="mini" @click="clear">清除</el-button>
+      <!-- <el-button type="primary" size="mini" @click="clear">清除</el-button> -->
     </div>
   </div>
 </template>
@@ -80,8 +54,10 @@
 import { init } from "@/utils/MapHelper/sightCorridor.js";
 import RSAnalysis from "@/utils/MapHelper/RSAnalysis.js";
 // 观察点，目标点
-// import { Cartesian2toDegrees } from "@/utils/MapHelper/help.js";
+import { Cartesian2toDegrees } from "@/utils/MapHelper/help.js";
 let sightline, handlerPoint, points;
+
+import { download } from "@/utils/MapHelper/help.js";
 export default {
   mixins: [RSAnalysis],
   data() {
@@ -96,7 +72,8 @@ export default {
         distance: 200,
         visibleLine: true,
       },
-      center: null,
+      viewshed: null,
+      points: [],
     };
   },
   mounted() {
@@ -104,17 +81,49 @@ export default {
     // }
     this.$nextTick(() => {
       this.initPoint();
-      init();
+      // init();
     });
   },
   methods: {
+    initViewshed3D(point1, point2) {
+      this.clearViewshed();
+      // 创建可视域分析对象
+      var viewshed3D = new Cesium.ViewShed3D(scene);
+      viewshed3D.visibleAreaColor =
+        Cesium.Color.fromCssColorString("rgba(255,0,0,0.5)");
+      viewshed3D.hiddenAreaColor =
+        Cesium.Color.fromCssColorString("rgba(0,255,0,0)");
+      viewshed3D.viewPosition = point1;
+      viewshed3D.build();
+      viewshed3D.setDistDirByPoint(point2);
+      viewshed3D.horizontalFov = 40;
+      viewshed3D.verticalFov = 20;
+      this.viewshed = viewshed3D;
+    },
+    clearViewshed() {
+      if (!this.viewshed) return;
+      this.viewshed.removeAllClipRegion();
+      this.viewshed.distance = 0.1;
+      this.clearScope();
+    },
+    ExportResult() {
+      var legends = [];
+      legends.push({ name: "视廊分析", value: "", unit: "" });
+      legends.push({ name: "观察者高度", value: this.personH, unit: "米" });
+      legends.push({ name: "观察者坐标", value: this.points[0], unit: "" });
+      legends.push({ name: "目标点坐标", value: this.points[1], unit: "" });
+      var promise = scene.outputSceneToFile();
+      Cesium.when(promise, (base64data) => {
+        download(base64data, legends);
+      });
+    },
+
     /**
      * 添加观察点
      */
     addGCD() {
       let that = this;
       this.clearScope();
-
       sightline.removeAllTargetPoint();
       that.addViewFlag = true;
       that.addTargetFlag = false;
@@ -269,7 +278,6 @@ export default {
       // this.changCount++;
       var point1;
       var point2;
-      debugger;
       if (
         sightline.viewPosition[0] == 0 ||
         sightline.viewPosition[1] == 0 ||
@@ -312,6 +320,7 @@ export default {
         point2[1],
         point2[2]
       );
+      this.points = [point1, point2];
       let finalPosition = new Cesium.Cartesian3();
       let matrix4 = Cesium.Transforms.eastNorthUpToFixedFrame(positionA);
       Cesium.Matrix4.inverse(matrix4, matrix4);
@@ -329,6 +338,7 @@ export default {
           roll: 0.0, // default value
         },
       });
+      this.initViewshed3D(point1, point2);
     },
     /**
      * 停止飞行、漫游、清除图元
@@ -336,17 +346,15 @@ export default {
     clearScope() {
       viewer.entities.removeAll();
       points = [];
-      console.log("sightline", "sightline");
-      console.log(sightline, "sightline");
       sightline.removeAllTargetPoint();
       if (handlerPoint) {
         handlerPoint.clear();
         handlerPoint.deactivate();
       }
       // this.tooltip.setVisible(false);
-      viewer.scene.camera.stopFlyCircle();
+      // viewer.scene.camera.stopFlyCircle();
       // this.changCount = 0;
-      viewer.scene.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
+      // viewer.scene.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
     },
   },
 };

src/utils/MapHelper/help.js

@@ -244,7 +244,7 @@ function convertImageToCanvas(image, fu) {
 function drawLegends(canvas, ctx, legends) {
   var padding = 10; // 图例与边缘的间距
   var lineHeight = 30; // 每行图例的高度
-  var labW = 200;
+  var labW = legends[0].name == '视廊分析' ? 400 : 200;
   var x = canvas.width - padding - labW; // 图例的起始X坐标
   var y = canvas.height - legends.length * lineHeight - padding; // 图例的起始Y坐标
   // 绘制颜色块