real3d-portalsite/src/views/ConstructionApplication3D/BuildingStretchingAnalysis/BuildingStretchingAnalysis.vue

<template>
  <div
    class="ZTGlobal"
    style="width: 100%; padding: 1rem 1rem 0rem 1rem; color: white"
  >
    <el-row :gutter="10">
      <el-col :span="24">
        <el-row :gutter="10">
          <el-col :span="12" style="text-align: center">
            楼体高度:
            <el-input-number
              size="mini"
              step="1"
              :min="1"
              v-model="form.BuildingHeight"
              @change="XYChange"
            ></el-input-number>
          </el-col>
          <el-col :span="12" style="text-align: center">
            层高:
            <el-input-number
              size="mini"
              step="0.1"
              :min="1"
              v-model="form.FLOORH"
              @change="XYChange"
            ></el-input-number>
          </el-col>
        </el-row>

        <div class="SaveCenter">
          <el-button size="mini" type="primary" @click="onSubmit"
            >开始调整</el-button
          >
          <el-button size="mini" @click="removeEntities">清除</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import {
  cartesian3ToWGS84,
  mapQuery,
  flatten,
  mercator2lonLat,
  undergroundMode,
} from "@/utils/MapHelper/MapHelper.js";
import {
  point,
  buffer,
  bboxPolygon,
  square,
  destination,
  polygon,
  booleanPointInPolygon,
} from "@turf/turf";
let polygonids = [];
export default {
  data() {
    return {
      form: { FLOORH: 3, BuildingHeight: 0 },
      loutiInfo: null,
    };
  },
  props: {
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
    layerid: {
      type: String,
      default: "",
    },
    lydata: {
      type: Object,
      default: () => {
        return {};
      },
    },
    lyoption: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      debugger;

      let that = this;
      var pt = point([that.info.xyz.lng, that.info.xyz.lat]);
      this.info.layerDataList.forEach((element) => {
        let ps = [];
        element.geometry.points.forEach((points) => {
          ps.push([points.x, points.y]);
        });
        var poly = polygon([ps]);
        let isInclude = booleanPointInPolygon(pt, poly);
        if (isInclude) {
          debugger;
          that.loutiInfo = element;
          let FLOORH = element.data.find((c) => c.label == "FLOORH");
          if (FLOORH && FLOORH.value) {
            that.form.FLOORH = Number(FLOORH.value);
          }
        }
      });

      that.removeEntities();
      debugger;
      if (!that.loutiInfo) {
        that.$message({
          message: "未查询到模型数据，请重试加载模型",
          type: "warning",
        });
        return;
      }

      const element = that.loutiInfo;

      //基础高度（地形高度）加入地形后可删除
      let jcgd = 0;
      let bm = element.data.find((c) => c.label == "LANDNO");
      if (bm && bm.value) {
        //获取模型信息
        let queryBySQLParameters = {
          getFeatureMode: "SQL",
          datasetNames: [that.info.Minfo.datasourcename + ":项目范围"],
          queryParameter: {
            attributeFilter: " DKBM = '" + bm.value + "'",
          },
          hasGeometry: true,
        };
        let e = await mapQuery(
          that.info.Minfo.dataurl + "/featureResults.json?returnContent=true",
          queryBySQLParameters
        );

        debugger;
        if (e && e.totalCount > 0) {
          e.features.forEach((feature) => {
            feature.fieldNames.forEach((fieldName, i) => {
              if (
                fieldName == "BASEH" &&
                Number(feature.fieldValues[i]) >= jcgd
              ) {
                jcgd = Number(feature.fieldValues[i]);
              }
            });
          });
        }
      } else {
        that.$message({
          message: "未找到模型基础高度，默认高程为0",
          type: "warning",
        });
      }

      let HEIGHT = element.data.find((c) => c.label == "HEIGHT");
      if (HEIGHT && HEIGHT.value) {
        HEIGHT = HEIGHT.value;
      }
      that.form.BuildingHeight = HEIGHT;

      //顶部高度，底部高度
      let maxH = jcgd,
        minH = jcgd;
      for (
        let FLOORindex = 1;
        FLOORindex <= Math.ceil(that.form.BuildingHeight / that.form.FLOORH);
        FLOORindex++
      ) {
        debugger;
        maxH += that.form.FLOORH;
        minH = maxH - that.form.FLOORH;
        // console.log("maxH:" + maxH + "----minH:" + minH);
        let ps = [];
        for (let index = 0; index < element.geometry.points.length; index++) {
          const point = element.geometry.points[index];
          ps.push(point.x);
          ps.push(point.y);
          // ps.push(minH);
        }
        // let id = uuidv4();

        // 定义多边形的顶点（经纬度）
        var polygonHierarchy = new Cesium.PolygonHierarchy(
          Cesium.Cartesian3.fromDegreesArray(ps)
        );

        // 创建带有高度的多边形
        var extrudedPolygon = new Cesium.GeometryInstance({
          geometry: new Cesium.PolygonGeometry({
            polygonHierarchy: polygonHierarchy,
            height: minH, // 多边形底面的高度
            extrudedHeight: maxH, // 拉伸到的高度
          }),
          attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(
              Cesium.Color.CHARTREUSE.withAlpha(0.1)
            ),
          },
        });

        // 添加到场景中
        let Primitive = new Cesium.Primitive({
          geometryInstances: [extrudedPolygon],
          appearance: new Cesium.PerInstanceColorAppearance({
            flat: true,
          }),
          shadows: Cesium.ShadowMode.ENABLED, // 开启阴影
        });
        viewer.scene.primitives.add(Primitive);
        polygonids.push(Primitive);
        // 创建多边形的边界线

        let pss = [];
        for (let index = 0; index < element.geometry.points.length; index++) {
          const point = element.geometry.points[index];
          pss.push(point.x);
          pss.push(point.y);
          pss.push(maxH);
        }
        var boundaryPolyline = new Cesium.GeometryInstance({
          geometry: new Cesium.PolylineGeometry({
            positions: Cesium.Cartesian3.fromDegreesArrayHeights(pss), // 注意这里需要处理高度为0的情况，因为边界线通常在地表
            width: 1, // 边界线的宽度
          }),
          attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(
              Cesium.Color.CHARTREUSE.withAlpha(0.8)
            ),
          },
        });
        let boundaryPolylinePrimitive = new Cesium.Primitive({
          geometryInstances: [boundaryPolyline],
          appearance: new Cesium.PolylineColorAppearance({
            edgeWidth: 1,
            // vertexFormat: Cesium.PolylineVertexFormat.POSITION_AND_COLOR,
            vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
          }),
        });
        viewer.scene.primitives.add(boundaryPolylinePrimitive);
        polygonids.push(boundaryPolylinePrimitive);
        // viewer.entities.add({
        //   id: id,
        //   polygon: {
        //     hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(ps),
        //     extrudedHeight: Number(maxH),
        //     perPositionHeight: true,
        //     material: Cesium.Color.CHARTREUSE.withAlpha(0.1),
        //     outline: true,
        //     outlineColor: Cesium.Color.MEDIUMSPRINGGREEN,
        //     outlineWidth: 1.0,
        //     shadows: Cesium.ShadowMode.ENABLED,
        //   },
        // });
      }
    },
    async onSubmit() {
      let that = this;
      that.removeEntities();
      if (!that.loutiInfo) {
        that.$message({
          message: "未查询到模型数据，请重试加载模型",
          type: "warning",
        });
        return;
      }
      const element = that.loutiInfo;
      //基础高度（地形高度）加入地形后可删除
      let jcgd = 0;
      //地块编码
      let bm = element.data.find((c) => c.label == "LANDNO");
      if (bm && bm.value) {
        //获取模型信息
        let queryBySQLParameters = {
          getFeatureMode: "SQL",
          datasetNames: [that.info.Minfo.datasourcename + ":项目范围"],
          queryParameter: {
            attributeFilter: " DKBM = '" + bm.value + "'",
          },
          hasGeometry: true,
        };
        let e = await mapQuery(
          that.info.Minfo.dataurl + "/featureResults.json?returnContent=true",
          queryBySQLParameters
        );

        debugger;
        if (e && e.totalCount > 0) {
          e.features.forEach((feature) => {
            feature.fieldNames.forEach((fieldName, i) => {
              if (
                fieldName == "BASEH" &&
                Number(feature.fieldValues[i]) > jcgd
              ) {
                jcgd = Number(feature.fieldValues[i]);
              }
            });
          });
        }
      } else {
        that.$message({
          message: "未找到模型基础高度，默认高程为0",
          type: "warning",
        });
      }

      //顶部高度，底部高度
      let maxH = jcgd,
        minH = jcgd;
      for (
        let FLOORindex = 1;
        FLOORindex <= Math.ceil(that.form.BuildingHeight / that.form.FLOORH);
        FLOORindex++
      ) {
        debugger;
        maxH += that.form.FLOORH;
        minH = maxH - that.form.FLOORH;
        // console.log("maxH:" + maxH + "----minH:" + minH);
        let ps = [];
        for (let index = 0; index < element.geometry.points.length; index++) {
          const point = element.geometry.points[index];
          ps.push(point.x);
          ps.push(point.y);
          // ps.push(minH);
        }
        // let id = uuidv4();

        // 定义多边形的顶点（经纬度）
        var polygonHierarchy = new Cesium.PolygonHierarchy(
          Cesium.Cartesian3.fromDegreesArray(ps)
        );

        // 创建带有高度的多边形
        var extrudedPolygon = new Cesium.GeometryInstance({
          geometry: new Cesium.PolygonGeometry({
            polygonHierarchy: polygonHierarchy,
            height: minH, // 多边形底面的高度
            extrudedHeight: maxH, // 拉伸到的高度
          }),
          attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(
              Cesium.Color.CHARTREUSE.withAlpha(0.1)
            ),
          },
        });

        // 添加到场景中
        let Primitive = new Cesium.Primitive({
          geometryInstances: [extrudedPolygon],
          appearance: new Cesium.PerInstanceColorAppearance({
            flat: true,
          }),
          shadows: Cesium.ShadowMode.ENABLED, // 开启阴影
        });
        viewer.scene.primitives.add(Primitive);
        polygonids.push(Primitive);

        // 创建多边形的边界线

        let pss = [];
        for (let index = 0; index < element.geometry.points.length; index++) {
          const point = element.geometry.points[index];
          pss.push(point.x);
          pss.push(point.y);
          pss.push(maxH);
        }
        var boundaryPolyline = new Cesium.GeometryInstance({
          geometry: new Cesium.PolylineGeometry({
            positions: Cesium.Cartesian3.fromDegreesArrayHeights(pss), // 注意这里需要处理高度为0的情况，因为边界线通常在地表
            width: 1, // 边界线的宽度
          }),
          attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(
              Cesium.Color.CHARTREUSE.withAlpha(0.8)
            ),
          },
        });
        let boundaryPolylinePrimitive = new Cesium.Primitive({
          geometryInstances: [boundaryPolyline],
          appearance: new Cesium.PolylineColorAppearance({
            edgeWidth: 1,
            // vertexFormat: Cesium.PolylineVertexFormat.POSITION_AND_COLOR,
            vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
          }),
        });
        viewer.scene.primitives.add(boundaryPolylinePrimitive);
        polygonids.push(boundaryPolylinePrimitive);
        // viewer.entities.add({
        //   id: id,
        //   polygon: {
        //     hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(ps),
        //     extrudedHeight: Number(maxH),
        //     perPositionHeight: true,
        //     material: Cesium.Color.CHARTREUSE.withAlpha(0.1),
        //     outline: true,
        //     outlineColor: Cesium.Color.MEDIUMSPRINGGREEN,
        //     outlineWidth: 1.0,
        //     shadows: Cesium.ShadowMode.ENABLED,
        //   },
        // });
      }
    },
    removeEntities() {
      for (let index = 0; index < polygonids.length; index++) {
        const element = polygonids[index];
        viewer.scene.primitives.remove(element);
        // viewer.entities.removeById(element);
      }

      polygonids = [];
    },
  },

  beforeDestroy() {
    this.removeEntities();
  },
};
</script>
<style lang="scss">
@import "@/../../zt.scss";
</style>
<style lang="scss" scoped>
.el-card {
  border: 0px solid #02a7f0;
}
.el-form-item {
  margin-bottom: 0;
}
.grid-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>