Merge branch 'master' of http://114.244.114.158:8802/siwei/real3d-portalsite

src/api/analse.js

@@ -5,4 +5,11 @@ export function getDsm(params) {
         method: 'get',
         params
     })
-}
+}
+export function cutFill(data) {
+    return request({
+        url: '/analyse/raster/cutFill',
+        method: 'post',
+        data
+    })
+}

src/components/Combinations/terrainCombination/TerrainCombination.vue

@@ -7,7 +7,7 @@
         <span :class="{ titleColor: floodShow }" class="title-txt" @click="choose(1)">{{ Resource.FloodAnalysis }}</span>
         <span :class="{ titleColor: slopeShow }" class="title-txt" @click="choose(2)">{{ Resource.terrainSlope }}</span>
         <span :class="{ titleColor: isolineShow }" class="title-txt" @click="choose(3)">{{ Resource.isoline }}</span>
-        <span :class="{ titleColor: isCutFillShow }" class="title-txt" @click="choose(4)">地形修改分析</span>
+        <span :class="{ titleColor: isCutFillShow }" class="title-txt" @click="choose(4)">地形平整分析</span>
 
         <span class="closeBtn" @click="toggleVisibility">&times;</span>
       </div>

src/components/TerrainAnalysis/TerrainCutFillAnalysis/TerrainCutFillAnalysisNew.vue

@@ -0,0 +1,340 @@
+<template>
+  <div
+    v-show="isCutFill"
+    class="cut_fill_box"
+    v-loading="loading"
+    element-loading-text="正在分析中...."
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+  >
+    <el-radio v-model="radio" label="cut">地形填挖方分析</el-radio>
+    <el-radio v-model="radio" label="smooth">地形平整分析</el-radio>
+    <el-form
+      :model="cutData"
+      ref="ruleForm"
+      label-width="100px"
+      :rules="rules"
+      class="ruleForm"
+    >
+      <el-form-item label="分析范围:" prop="xzmj">
+        <range type="cutfill" :keys="['hx', 'sc']" class="range" ref="range" />
+      </el-form-item>
+      <el-form-item label="开挖高程:" v-if="radio == 'cut'">
+        <!-- readonly="readonly" -->
+        <el-input
+          v-model="smooth_height"
+          placeholder="深度为空时为平整土地"
+          size="mini"
+        ></el-input>
+      </el-form-item>
+      <div v-if="cutData.fillVolume" class="sdatadiv">
+        分析结果：
+        <p v-for="(sitem, index) in sdata" :key="index">
+          <!-- <img src="/static/images/ghzc/iconSun.png" .toFixed(2) /> -->
+          <span class="ptitle">{{ sitem.name }}</span>
+          <span class="pvalue">
+            {{ cutData[sitem.prop] }}{{ sitem.unit }}
+          </span>
+        </p>
+      </div>
+    </el-form>
+    <div class="bottomBtns">
+      <!-- <el-button size="mini" type="primary" @click="draw">绘制</el-button> -->
+      <!-- <el-button size="mini" type="primary" @click="submitData">确定</el-button>
+      <el-button size="mini" type="primary" @click="reset">清除</el-button> -->
+      <span class="clearBtn" @click="reset">取消</span>
+      <span class="sureBtn" @click="submitData">确定</span>
+      <span
+        class="sureBtn"
+        :disabled="sdh.length == 0 ? true : false"
+        @click="ExportResult"
+        >导出结果</span
+      >
+    </div>
+    <el-descriptions border size="mini" :column="2">
+      <el-descriptions-item v-for="item in sdh" :key="item" :label="item.scS"
+        ><div
+          style="width: 4.5rem; height: 100%"
+          :style="{ 'background-color': item.fill }"
+        >
+          &nbsp;
+        </div>
+      </el-descriptions-item>
+    </el-descriptions>
+  </div>
+</template>
+
+<script>
+import { getDsm, cutFill } from "@/api/analse";
+import * as turf from "@turf/turf";
+import parse from "wellknown";
+import { listToMatrix, loadGeoJSON, download } from "@/utils/MapHelper/help.js";
+import range from "@/components/mapview/range.vue"; ///mapview/range
+export default {
+  name: "TerrainCutFillAnalysis",
+  components: { range },
+  data() {
+    return {
+      radio: "smooth",
+      sharedState: store.state,
+      loading: false,
+      smooth_height: "",
+      cutData: {},
+      // 石方量
+      sdata: [
+        { name: "填土体积:", prop: "fillVolume", unit: "立方米", value: "" },
+        { name: "开挖体积:", prop: "cutVolume", unit: "立方米", value: "" },
+        { name: "填挖差值:", prop: "cz", unit: "立方米", value: "" },
+        { name: "最大高程:", prop: "maxHeight", unit: "米", value: "" },
+        { name: "最小高程:", prop: "minHeight", unit: "米", value: "" },
+        { name: "填挖基准:", prop: "midHeight", unit: "米", value: "" },
+      ],
+      sdh: [
+        { scS: "填土", fill: "#1E90A8" },
+        { scS: "开挖", fill: "#FF0000" },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {
+    isCutFill: function () {
+      return this.sharedState.terrain[4];
+    },
+  },
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    reset() {
+      this.cutData = {};
+      this.$refs.range.reset();
+      viewer.entities.removeAll();
+      viewer.dataSources.removeAll();
+    },
+    submitData() {
+      var _temp = this.$refs.range.getRange();
+      if (!_temp.geom) {
+        this.$message.warning("请绘制或导入分析范围!");
+        return;
+      }
+      this.cutFill(_temp.geom);
+    },
+    clear() {
+      common.clearHandlerDrawing("Polygon");
+    },
+    async cutFill(geom) {
+      this.loading = true;
+      let res = await cutFill({
+        geom,
+        height: this.smooth_height,
+      });
+      if (res.success) {
+        this.$refs.range.reset();
+        this.cutData = res.data;
+
+        Object.keys(this.cutData).forEach((key) => {
+          if (typeof this.cutData[key] == "number")
+            this.cutData[key] = this.cutData[key].toFixed(2);
+        });
+        this.cutData.cz = res.data.cutVolume - res.data.fillVolume;
+
+        this.loading = false;
+        let pitch = Cesium.Math.toRadians(-45.0);
+        loadGeoJSON(res.data.bottomGeom, "#1E90A8", { sw: 0 }, (data) => {
+          viewer.dataSources.add(data);
+          viewer.flyTo(data, {
+            offset: new Cesium.HeadingPitchRange(0, -45, 100),
+          });
+        });
+        loadGeoJSON(res.data.midGeom, "#ff0000", { sw: 0 }, (data) => {
+          viewer.dataSources.add(data);
+          viewer.flyTo(data, {
+            offset: new Cesium.HeadingPitchRange(0, -45, 100),
+          });
+        });
+      }
+
+      // let newArr = positions.map((item, index) => {
+      //   return (index + 1) % 3 === 0 ? data.data : item;
+      // });
+      // viewer.scene.globe.removeAllModifyRegion();
+      // viewer.scene.globe.addModifyRegion({
+      //   name: "ggg",
+      //   position: newArr,
+      // });
+
+      // this.smooth_height = data.data.toFixed(2);
+      // // let cutVolume = cutFillAnalysis.VolumeAnalysis1(threeArray, Number(height));
+      // // console.log('cutVolume: ', cutVolume);
+
+      // let newArray = [];
+      // for (let i = 0; i < positions_noHeight.length; i += 2) {
+      //   // 将每两个连续的元素组合成一个新的数组，并添加到新数组中
+      //   newArray.push([positions_noHeight[i], positions_noHeight[i + 1]]);
+      // }
+      // newArray.push(newArray[0]);
+
+      // var polygon = turf.polygon([newArray]);
+
+      // this.result_area = turf.area(polygon).toFixed(2);
+    },
+    ExportResult() {
+      let _this = this;
+      // let box = that.squarePolygon(entitys);
+      // viewer.camera.flyTo({
+      //   destination: Cesium.Rectangle.fromDegrees(
+      //     box[0][0] + 0.0002,
+      //     box[0][1] - 0.0002,
+      //     box[2][0] - 0.0002,
+      //     box[2][1] + 0.0002
+      //   ),
+      // });
+      setTimeout(function () {
+        var promise = scene.outputSceneToFile();
+        Cesium.when(promise, function (base64data) {
+          download(base64data, _this.drawLegends);
+        });
+      }, 1000);
+    },
+    /**
+     * 根据图片生成画布
+     */
+
+    // 绘制图例
+    drawLegends(canvas, ctx) {
+      let _this = this;
+      console.log("-----");
+      var legends = [...this.sdata, ...this.sdh];
+      var padding = 10; // 图例与边缘的间距
+      var lineHeight = 30; // 每行图例的高度
+      var labW = 200;
+      var x = canvas.width - padding - labW; // 图例的起始X坐标
+      var y = canvas.height - legends.length * lineHeight - padding; // 图例的起始Y坐标
+      // 绘制颜色块
+      ctx.fillStyle = "#ffffff";
+      ctx.fillRect(
+        x - padding,
+        y - padding,
+        canvas.width - x + padding,
+        canvas.height - y + padding
+      );
+      legends.forEach(function (legend, index) {
+        // 绘制文本
+        if (legend.scS) {
+          ctx.fillStyle = "black";
+          ctx.fillText(legend.scS, x, y + index * lineHeight + lineHeight / 2);
+          // 绘制颜色块
+          ctx.fillStyle = legend.fill;
+          ctx.fillRect(
+            x + (labW / 3) * 2,
+            y + index * lineHeight,
+            30,
+            lineHeight
+          );
+        } else {
+          ctx.fillStyle = "black";
+          let text = `${legend.name}:${_this.cutData[legend.prop]}${
+            legend.unit
+          }`;
+          ctx.fillText(text, x, y + index * lineHeight + lineHeight / 2);
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.cut_fill_box {
+  width: 100%;
+  height: 500px;
+  padding: 20px;
+  box-sizing: border-box;
+  position: relative;
+  .ruleForm {
+    width: 100%;
+    height: calc(100% - 120px);
+  }
+  .el-form-item {
+    margin-bottom: 0px !important;
+  }
+  .range {
+    width: 90% !important;
+  }
+  .sdatadiv {
+    text-align: left;
+    line-height: 40px;
+  }
+  .ptitle {
+    width: 100px;
+    color: #cddeeb;
+    text-align: right;
+    padding: 0 12px 0 0;
+    display: inline-block;
+  }
+  .pvalue {
+    color: #02a7f0;
+  }
+}
+.el-radio {
+  color: white;
+}
+
+.bottomBtns {
+  line-height: 30px;
+  width: 100%;
+  // background-color: rgba(255, 192, 203, 0.418);
+  display: flex;
+  justify-content: space-between;
+  text-align: center;
+  // position: absolute;
+  // bottom: 70px;
+
+  .sureBtn {
+    width: 30%;
+    background-color: #0f7ac8;
+    cursor: pointer;
+
+    &:hover {
+      font-weight: bold;
+    }
+  }
+
+  .clearBtn {
+    cursor: pointer;
+    width: 30%;
+    background-color: #3f94f53f;
+    border: 1px solid #3f93f5;
+    color: #b6e0ff;
+
+    &:hover {
+      font-weight: bold;
+    }
+  }
+}
+</style>
+<style lang="scss">
+.cut_fill_box {
+  .el-descriptions {
+    color: #fff;
+    margin-top: 20px;
+    // position: absolute;
+    // bottom: 20px;
+  }
+
+  .el-descriptions__body {
+    color: #fff;
+    background-color: #fff0;
+  }
+  .el-descriptions .is-bordered .el-descriptions-item__cell {
+    border: 1px solid rgba(15, 122, 200, 0.4);
+  }
+  .el-descriptions-item__label.is-bordered-label {
+    font-weight: 700;
+    color: #ffffff;
+    background: rgba(4, 28, 50, 0.6);
+  }
+  .el-date-editor .el-range-input {
+    background-color: rgba(4, 28, 50, 0.5);
+  }
+}
+</style>

src/components/TerrainAnalysis/TerrainCutFillAnalysis/index.js

@@ -1,2 +1,2 @@
-import TerrainCutFillAnalysis from './TerrainCutFillAnalysis';
+import TerrainCutFillAnalysis from './TerrainCutFillAnalysisNew';
 export default TerrainCutFillAnalysis;

src/components/mapView/range.vue

@@ -20,7 +20,7 @@
         <el-button size="mini" @click="clearAll">清除</el-button>
       </div>
     </div>
-    <div>
+    <div v-if="type != 'cutfill'">
       <span v-if="model.xzmj != 0">{{ model.xzmj }} 亩</span>
       <el-tooltip
         v-if="fileList.length > 0"
@@ -267,6 +267,10 @@ export default {
           // var parse = require("wellknown"); //引入wellknow
           const wktPolygon = parse.stringify(geojsonPolygon);
           // console.log("WKT Polygon:", wktPolygon);
+          if (this.$props.type == "cutfill") {
+            this.model.geom = wktPolygon;
+            return;
+          }
 
           const formdata = new FormData();
           // formdata.append("file", file.raw);

src/utils/MapHelper/help.js

@@ -1,14 +1,108 @@
 import * as turf from "@turf/turf";
+import parse from "wellknown";
 export function getCentroid(geojson, eindex) {
-    if (turf.getType(geojson) === "Feature") {
-        geojson = geojson.geometry;
-    }
-    if (turf.getType(geojson) === "Polygon") {
-        return turf.centroid(geojson).geometry.coordinates;
-    } else if (turf.getType(geojson) === "MultiPolygon") {
-        let polygon = turf.polygon(geojson.coordinates[eindex]);
-        return turf.centroid(polygon).geometry.coordinates;
-    } else {
-        throw new Error("Unsupported geometry type");
+  if (turf.getType(geojson) === "Feature") {
+    geojson = geojson.geometry;
+  }
+  if (turf.getType(geojson) === "Polygon") {
+    return turf.centroid(geojson).geometry.coordinates;
+  } else if (turf.getType(geojson) === "MultiPolygon") {
+    let polygon = turf.polygon(geojson.coordinates[eindex]);
+    return turf.centroid(polygon).geometry.coordinates;
+  } else {
+    throw new Error("Unsupported geometry type");
+  }
+}
+// 数组变二维数组方法
+export function listToMatrix(list, elementsPerSubArray) {
+  var matrix = [],
+    i,
+    k;
+  for (i = 0, k = -1; i < list.length; i++) {
+    if (i % elementsPerSubArray === 0) {
+      k++;
+      matrix[k] = [];
     }
+    matrix[k].push(list[i]);
+  }
+  return matrix;
+}
+// 加载GeoJSON数据
+export function loadGeoJSON(geom, yanse, adata, fun) {
+  let geojson = typeof geom === 'string' ? parse(geom) : geom;
+  const dataSource = new Cesium.GeoJsonDataSource();
+  dataSource
+    .load(geojson, {
+      clampToGround: true,
+      stroke: Cesium.Color.fromCssColorString(yanse),
+      fill: Cesium.Color.fromCssColorString(yanse).withAlpha(0.8), //Cesium.Color.fromCssColorString("rgba(10, 95, 152, 0.4)"), //注意：颜色必须大写，即不能为blue
+      strokeWidth: adata ? adata.sw : 2,
+    })
+    .then((data) => {
+      fun(data)
+
+    });
+}
+/**
+    * 下载图片
+    */
+export function download(base64data, fu) {
+  var image = new Image();
+  image.src = base64data;
+  image.onload = function () {
+    var canvas = convertImageToCanvas(image, fu);
+    var url = canvas.toDataURL("image/jpeg");
+    var a = document.createElement("a");
+    var event = new MouseEvent("click");
+    a.download = new Date().getTime() + ".jpg"; // 指定下载图片的名称
+    a.href = url;
+    a.dispatchEvent(event); // 触发超链接的点击事件
+  };
+}
+/**
+     * 根据图片生成画布
+     */
+function convertImageToCanvas(image, fu) {
+  var canvas = document.createElement("canvas");
+  canvas.width = image.width;
+  canvas.height = image.height;
+  var ctx = canvas.getContext("2d");
+  ctx.drawImage(image, 0, 0);
+  fu(canvas, ctx)
+  // this.drawLegends(canvas, ctx);
+  return canvas;
+}
+// 绘制图例
+function drawLegends(canvas, ctx) {
+  var legends = this.sdh;
+  var padding = 10; // 图例与边缘的间距
+  var lineHeight = 30; // 每行图例的高度
+  var labW = 120;
+  var x = canvas.width - padding - labW; // 图例的起始X坐标
+  var y = canvas.height - legends.length * lineHeight - padding; // 图例的起始Y坐标
+  // 绘制颜色块
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(
+    x - padding,
+    y - padding,
+    canvas.width - x + padding,
+    canvas.height - y + padding
+  );
+  legends.forEach(function (legend, index) {
+    // 绘制文本
+    ctx.fillStyle = "black";
+    ctx.fillText(
+      legend.scS + "小时",
+      x,
+      y + index * lineHeight + lineHeight / 2
+    );
+    // 绘制颜色块
+    ctx.fillStyle = legend.fill;
+    ctx.fillRect(
+      x + (labW / 3) * 2,
+      y + index * lineHeight,
+      30,
+      lineHeight
+    );
+  });
 }