格式化

src/components/TerrainAnalysis/TerrainCutFillAnalysis/TerrainCutFillAnalysis.vue

@@ -6,27 +6,46 @@
     <div v-show="radio == 'cut'">
       <div class="cut_fill_centent1">
         填挖深度(米)：
-        <el-input class="cut_fill_input" v-model="height" placeholder=""></el-input>
-        <br>
+        <el-input
+          class="cut_fill_input"
+          v-model="height"
+          placeholder=""
+        ></el-input>
+        <br />
         土石方量(立方米)：
-        <el-input class="cut_fill_input" v-model="result" placeholder=""></el-input>
-
+        <el-input
+          class="cut_fill_input"
+          v-model="result"
+          placeholder=""
+        ></el-input>
       </div>
-
     </div>
 
     <div v-show="radio == 'smooth'">
       <div class="cut_fill_centent1">
         平整深度(米)：
-        <el-input class="cut_fill_input" v-model="smooth_height" placeholder="" readonly="readonly"></el-input>
-        <br>
+        <el-input
+          class="cut_fill_input"
+          v-model="smooth_height"
+          placeholder=""
+          readonly="readonly"
+        ></el-input>
+        <br />
         土石方量(立方米)：
-        <el-input class="cut_fill_input" v-model="result" placeholder=""></el-input>
-        <br>
-        <br>
+        <el-input
+          class="cut_fill_input"
+          v-model="result"
+          placeholder=""
+        ></el-input>
+        <br />
+        <br />
 
         土石面积(平方米)：
-        <el-input class="cut_fill_input" v-model="result_area" placeholder=""></el-input>
+        <el-input
+          class="cut_fill_input"
+          v-model="result_area"
+          placeholder=""
+        ></el-input>
       </div>
     </div>
     <div class="cut_fill_Buttons">
@@ -38,19 +57,19 @@
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-import CutFillAnalysis from "./CutFillAnalysis.js"
+import CutFillAnalysis from "./CutFillAnalysis.js";
 let cutFillAnalysis = null;
-import { getDsm } from '@/api/analse'
+import { getDsm } from "@/api/analse";
 import * as turf from "@turf/turf";
 
 export default {
   name: "TerrainCutFillAnalysis",
   components: {},
   data() {
-
     return {
-      radio: 'cut',
-      input: '', sharedState: store.state,
+      radio: "cut",
+      input: "",
+      sharedState: store.state,
       height: 300,
       result: null,
       handler_Cut_fill: null,
@@ -60,7 +79,6 @@ export default {
   },
   //监听属性 类似于data概念
   computed: {
-
     isCutFill: function () {
       return this.sharedState.terrain[4];
     },
@@ -73,72 +91,69 @@ export default {
     extract(positions) {
       viewer.scene.globe.removeAllExtractRegion();
       viewer.scene.globe.addExtractRegion({
-        name: 'extract', //名称
+        name: "extract", //名称
         position: positions, //区域
         height: this.height, //开挖深度
         transparent: false, //封边是否透明
         extractHeight: Number(this.height), //抽出高度
-        granularity: 1 //精度
+        granularity: 1, //精度
       });
     },
     cutana(positions) {
       viewer.scene.globe.removeAllExcavationRegion();
       viewer.scene.globe.addExcavationRegion({
-        name: 'ggg',
+        name: "ggg",
         position: positions,
         height: Number(-this.height),
-        transparent: false
+        transparent: false,
       });
     },
     coordsToWktPolygon(coords) {
-      // 检查坐标数组的长度是否为偶数  
+      // 检查坐标数组的长度是否为偶数
       if (coords.length % 2 !== 0) {
-        throw new Error('Coordinate array length must be even.');
+        throw new Error("Coordinate array length must be even.");
       }
 
-      // 构建WKT Polygon字符串  
-      let wktPolygon = 'POLYGON((';
+      // 构建WKT Polygon字符串
+      let wktPolygon = "POLYGON((";
       for (let i = 0; i < coords.length; i += 2) {
-        // 添加经度和纬度对  
+        // 添加经度和纬度对
         wktPolygon += `${coords[i]} ${coords[i + 1]}`;
-        // 如果不是最后一对坐标，则添加逗号  
+        // 如果不是最后一对坐标，则添加逗号
         if (i + 2 < coords.length) {
-          wktPolygon += ', ';
+          wktPolygon += ", ";
         }
       }
-      // 闭合多边形，添加第一个点  
+      // 闭合多边形，添加第一个点
       wktPolygon += `, ${coords[0]} ${coords[1]}))`;
 
       return wktPolygon;
     },
     async smooth_ana(positions, positions_noHeight, threeArray, height) {
-
       let data = await getDsm({
-        "geom": this.coordsToWktPolygon(positions_noHeight),
-        'type': 'min'
+        geom: this.coordsToWktPolygon(positions_noHeight),
+        type: "min",
       });
 
-
       viewer.scene.globe.removeAllExcavationRegion();
       viewer.scene.globe.addExcavationRegion({
-        name: 'ggg',
+        name: "ggg",
         position: positions,
         height: data.data,
-        transparent: false
+        transparent: false,
       });
 
-      this.smooth_height = data.data.toFixed(2)
+      this.smooth_height = data.data.toFixed(2);
 
       let cutVolume = cutFillAnalysis.VolumeAnalysis(threeArray, height);
       that.result = cutVolume.toFixed(2);
     },
     async smooth_ana1(positions, positions_noHeight, threeArray, height) {
-      console.log('positions: ', positions);
-
+      console.log("positions: ", positions);
 
       let data = await getDsm({
-        "geom": this.coordsToWktPolygon(positions_noHeight),
-        'type': 'max'
+        geom: this.coordsToWktPolygon(positions_noHeight),
+        type: "max",
       });
 
       let newArr = positions.map((item, index) => {
@@ -146,11 +161,11 @@ export default {
       });
       viewer.scene.globe.removeAllModifyRegion();
       viewer.scene.globe.addModifyRegion({
-        name: 'ggg',
-        position: newArr
+        name: "ggg",
+        position: newArr,
       });
 
-      this.smooth_height = data.data.toFixed(2)
+      this.smooth_height = data.data.toFixed(2);
       // let cutVolume = cutFillAnalysis.VolumeAnalysis1(threeArray, Number(height));
       // console.log('cutVolume: ', cutVolume);
 
@@ -159,65 +174,66 @@ export default {
         // 将每两个连续的元素组合成一个新的数组，并添加到新数组中
         newArray.push([positions_noHeight[i], positions_noHeight[i + 1]]);
       }
-      newArray.push(newArray[0])
+      newArray.push(newArray[0]);
 
-      var polygon = turf.polygon([
-        newArray
-      ]);
+      var polygon = turf.polygon([newArray]);
 
       this.result_area = turf.area(polygon).toFixed(2);
     },
 
     draw() {
-
-
       const that = this;
       that.clear();
 
       if (that.handler_Cut_fill == null) {
-        that.handler_Cut_fill = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Polygon, 0);
+        that.handler_Cut_fill = new Cesium.DrawHandler(
+          viewer,
+          Cesium.DrawMode.Polygon,
+          0
+        );
       }
 
-
       var tooltip = createTooltip(viewer._element);
       //绘制多边形
       that.handler_Cut_fill.activeEvt.addEventListener(function (isActive) {
         if (isActive == true) {
           viewer.enableCursorStyle = false;
-          viewer._element.style.cursor = '';
+          viewer._element.style.cursor = "";
           // $('body').removeClass('drawCur').addClass('drawCur');
-        }
-        else {
+        } else {
           viewer.enableCursorStyle = true;
           // $('body').removeClass('drawCur');
         }
       });
-      that.handler_Cut_fill.movingEvt.addEventListener(function (windowPosition) {
+      that.handler_Cut_fill.movingEvt.addEventListener(function (
+        windowPosition
+      ) {
         if (windowPosition.x < 200 && windowPosition.y < 150) {
           tooltip.setVisible(false);
           return;
         }
         if (that.handler_Cut_fill.isDrawing) {
-          tooltip.showAt(windowPosition, '<p>点击确定开挖区域中间点</p><p>右键单击结束绘制,进行开挖</p>');
-        }
-        else {
-          tooltip.showAt(windowPosition, '<p>点击绘制开挖区域第一个点</p>');
+          tooltip.showAt(
+            windowPosition,
+            "<p>点击确定开挖区域中间点</p><p>右键单击结束绘制,进行开挖</p>"
+          );
+        } else {
+          tooltip.showAt(windowPosition, "<p>点击绘制开挖区域第一个点</p>");
         }
       });
       that.handler_Cut_fill.drawEvt.addEventListener(function (result) {
         if (!result.object.positions) {
-          tooltip.showAt(result, '<p>请绘制正确的多边形</p>');
+          tooltip.showAt(result, "<p>请绘制正确的多边形</p>");
           that.handler_Cut_fill.polygon.show = false;
           that.handler_Cut_fill.polyline.show = false;
           that.handler_Cut_fill.deactivate();
           that.handler_Cut_fill.activate();
           return;
-        };
+        }
         var array = [].concat(result.object.positions);
         tooltip.setVisible(false);
 
-        that.array = array
-
+        that.array = array;
 
         var positions = [];
         var positions_noHeight = [];
@@ -227,59 +243,57 @@ export default {
           var longitude = Cesium.Math.toDegrees(cartographic.longitude);
           var latitude = Cesium.Math.toDegrees(cartographic.latitude);
           var h = cartographic.height;
-          if (positions.indexOf(longitude) == -1 && positions.indexOf(latitude) == -1) {
+          if (
+            positions.indexOf(longitude) == -1 &&
+            positions.indexOf(latitude) == -1
+          ) {
             positions.push(longitude);
             positions.push(latitude);
             positions.push(h);
             positions_noHeight.push(longitude);
             positions_noHeight.push(latitude);
-
           }
         }
         let threeArray = null;
 
         if (positions.length % 2 == 0) {
           threeArray = positions;
-
-
         } else {
-
           threeArray = that.appendLastThree(positions);
-
         }
 
-        if (that.radio == 'smooth') {
+        if (that.radio == "smooth") {
           // that.smooth_ana(positions, positions_noHeight, threeArray, -that.height);
-          that.smooth_ana1(positions, positions_noHeight, threeArray, -that.height);
-
-
-        } else if (that.radio == 'cut') {
+          that.smooth_ana1(
+            positions,
+            positions_noHeight,
+            threeArray,
+            -that.height
+          );
+        } else if (that.radio == "cut") {
           if (that.height < 0) {
             that.cutana(threeArray);
           } else {
             that.extract(threeArray);
           }
-
         }
 
-
         that.handler_Cut_fill.polygon.show = false;
         that.handler_Cut_fill.polyline.show = false;
         that.handler_Cut_fill.deactivate();
         // that.handler_Cut_fill.activate();
 
-        let cutVolume = cutFillAnalysis.VolumeAnalysis(that.array, -that.height);
+        let cutVolume = cutFillAnalysis.VolumeAnalysis(
+          that.array,
+          -that.height
+        );
         that.result = cutVolume.toFixed(2);
-
-
       });
       that.handler_Cut_fill.activate();
-
     },
     clear() {
       const that = this;
 
-
       if (that.handler_Cut_fill != null) {
         that.handler_Cut_fill.clear();
         viewer.scene.globe.removeAllExcavationRegion();
@@ -287,36 +301,32 @@ export default {
         viewer.scene.globe.removeAllModifyRegion();
 
         that.handler_Cut_fill.deactivate();
-        that.handler_Cut_fill = null
+        that.handler_Cut_fill = null;
         that.result = null;
         that.smooth_height = null;
         that.result_area = null;
-
       }
-
     },
     appendLastThree(arr) {
-      // 创建一个新数组来存储结果  
-      let result = [...arr]; // 使用扩展运算符复制原始数组  
+      // 创建一个新数组来存储结果
+      let result = [...arr]; // 使用扩展运算符复制原始数组
 
-      // 检查数组长度是否至少有三个元素  
+      // 检查数组长度是否至少有三个元素
       // if (arr.length >= 3) {
-      // 获取后三个元素并添加到结果数组末尾  
+      // 获取后三个元素并添加到结果数组末尾
       result.push(...arr.slice(-3));
       // }
 
-      // 返回结果数组  
+      // 返回结果数组
       return result;
-    }
+    },
   },
-  beforeCreate() { }, //生命周期 - 创建之前
+  beforeCreate() {}, //生命周期 - 创建之前
   created() {
-
     // const terrainP = new Cesium.CesiumTerrainProvider({
     //   url: 'http://192.168.60.3:8099/iserver/services/3D-local3DCache-SanYaDSMHuanCun/rest/realspace/datas/dsm@dsm',
     //   isSct: true//地形服务源自SuperMap iServer发布时需设置isSct为true
     // });
-
     // const terrainP = new Cesium.CesiumTerrainProvider({
     //   url: 'https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path',
     //   requestWaterMask: true,
@@ -333,42 +343,27 @@ export default {
     //   }
     // });
     // viewer.terrainProvider = terrainP;
-
-
-
   }, //生命周期 - 创建完成（可以访问当前this实例）
-  beforeMount() { }, //生命周期 - 挂载之前
+  beforeMount() {}, //生命周期 - 挂载之前
   mounted() {
-
     this.$nextTick((res) => {
-      cutFillAnalysis = new CutFillAnalysis(
-        viewer,
-        80,
-      );
+      cutFillAnalysis = new CutFillAnalysis(viewer, 80);
       // viewer.scene.globe.depthTestAgainstTerrain = false;
 
-
-
       // const terrainP = new Cesium.CesiumTerrainProvider({
       //   url: 'http://192.168.60.2:8090/iserver/services/3D-local3DCache-SanYaShi_GaoCheng_Level_16DataSource/rest/realspace/datas/%E4%B8%89%E4%BA%9A%E5%B8%82_%E9%AB%98%E7%A8%8B_Level_16%40DataSource',
       //   isSct: true//地形服务源自SuperMap iServer发布时需设置isSct为true
       // });
 
-
-
       // viewer.terrainProvider = terrainP;
-
-
-
-    })
-
+    });
   }, //生命周期 - 挂在完成
-  beforeUpdate() { }, //生命周期 - 更新之前
-  updated() { }, //生命周期 - 更新之后
-  beforeDestroy() { }, //生命周期 - 销毁之前
-  destroy() { },//生命周期 - 销毁完成
-  activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
-  deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroy() {}, //生命周期 - 销毁完成
+  activated() {}, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+  deactivated() {}, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
 };
 </script>
 <style lang="scss" scoped>
@@ -386,7 +381,7 @@ export default {
 
 .cut_fill_input {
   display: inline-block;
-  width: 50%
+  width: 50%;
 }
 
 .cut_fill_input:first-child {
@@ -395,9 +390,7 @@ export default {
 }
 
 .cut_fill_Buttons {
-
   margin-bottom: 2%;
   float: right;
-
 }
 </style>