real3d-portalsite/src/views/ConstructionApplication3D/backLineAnalysis/backLineAnalysisinfo.vue

<template>
  <div
    class="ZTGlobal"
    style="width: 100%; padding: 1rem 1rem 0rem 1rem; color: white"
  >
    <el-row :gutter="10">
      <el-col :span="24">
        <div class="titleHeader">
          <span>超建筑退线面积:{{ cczmj }}平方米。</span>
          <br />
          <span v-if="TableData.length > 0">结论：超出建筑退线范围。</span>
          <span v-else>结论：未超出建筑退线范围。</span>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-table
          ref="table"
          :data="TableData"
          :highlight-current-row="true"
          @current-change="handleCurrentChange"
          style="width: 100%"
        >
          <el-table-column label="楼号" align="center">
            <template #default="{ row }">
              {{ row.data.find((c) => c.label == "BUILDNO").value }}
            </template>
          </el-table-column>
          <el-table-column label="层数" align="center">
            <template #default="{ row }">
              {{
                row.data.find((c) => c.label == "FLOOR")
                  ? row.data.find((c) => c.label == "FLOOR").value
                  : 1
              }}
            </template>
          </el-table-column>
          <el-table-column label="超出面积（㎡）" align="center">
            <template #default="{ row }">
              {{ row.ccmj }}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-descriptions border size="mini" :column="2">
          <el-descriptions-item label="用地红线">
            <div
              style="
                width: 4.5rem;
                height: 1rem;
                overflow: hidden;
                position: relative;
              "
            >
              <div
                style="
                  position: absolute;
                  top: 50%;
                  left: 0;
                  right: 0;
                  height: 1rem; /* 实际上这里的高度被border替代了，所以可以设置为0 */
                  transform: translateY(-50%);
                  margin: 0; /* 去除可能的默认margin */
                  padding: 0; /* 去除可能的默认padding */
                "
                :style="{ borderTop: '0.3rem solid #ff0000' }"
              ></div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="建筑退线面"
            ><div
              style="width: 4.5rem; height: 100%"
              :style="{ 'background-color': '#7FFF009C' }"
            >
              &nbsp;
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="道路红线">
            <div
              style="
                width: 4.5rem;
                height: 1rem;
                overflow: hidden;
                position: relative;
              "
            >
              <div
                style="
                  position: absolute;
                  top: 50%;
                  left: 0;
                  right: 0;
                  height: 1rem; /* 实际上这里的高度被border替代了，所以可以设置为0 */
                  transform: translateY(-50%);
                  margin: 0; /* 去除可能的默认margin */
                  padding: 0; /* 去除可能的默认padding */
                "
                :style="{ borderTop: '0.3rem solid #ADFF2F' }"
              ></div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="禁止开口线">
            <div
              style="
                width: 4.5rem;
                height: 1rem;
                overflow: hidden;
                position: relative;
              "
            >
              <div
                style="
                  position: absolute;
                  top: 50%;
                  left: 0;
                  right: 0;
                  height: 1rem; /* 实际上这里的高度被border替代了，所以可以设置为0 */
                  transform: translateY(-50%);
                  margin: 0; /* 去除可能的默认margin */
                  padding: 0; /* 去除可能的默认padding */
                "
                :style="{ borderTop: '0.3rem solid #FF0000' }"
              ></div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="道路中线（现有）">
            <div
              style="
                width: 4.5rem;
                height: 1rem;
                overflow: hidden;
                position: relative;
              "
            >
              <div
                style="
                  position: absolute;
                  top: 50%;
                  left: 0;
                  right: 0;
                  height: 1rem; /* 实际上这里的高度被border替代了，所以可以设置为0 */
                  transform: translateY(-50%);
                  margin: 0; /* 去除可能的默认margin */
                  padding: 0; /* 去除可能的默认padding */
                "
                :style="{ borderTop: '0.3rem solid #00FFFF' }"
              ></div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="道路中线（规划）">
            <div
              style="
                width: 4.5rem;
                height: 1rem;
                overflow: hidden;
                position: relative;
              "
            >
              <div
                style="
                  position: absolute;
                  top: 50%;
                  left: 0;
                  right: 0;
                  height: 1rem; /* 实际上这里的高度被border替代了，所以可以设置为0 */
                  transform: translateY(-50%);
                  margin: 0; /* 去除可能的默认margin */
                  padding: 0; /* 去除可能的默认padding */
                "
                :style="{ borderTop: '0.3rem dashed #00FFFF' }"
              ></div>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  cartesian3ToWGS84,
  mapQuery,
  flatten,
  mercator2lonLat,
  undergroundMode,
} from "@/utils/MapHelper/MapHelper.js";
import {
  area,
  intersect,
  polygon,
  point,
  midpoint,
  difference,
} from "@turf/turf";
export default {
  data() {
    return {
      cczmj: 0,
      TableData: [],
    };
  },
  props: {
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
    layerid: {
      type: String,
      default: "",
    },
    lydata: {
      type: Object,
      default: () => {
        return {};
      },
    },
    lyoption: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {},
  mounted() {
    debugger;
    this.init();
  },
  methods: {
    async init() {
      //查询当前项目建筑轮廓范围
      this.cczmj = 0;
      let jzlkList = [];
      if (this.info.Minfo.dataurl && this.info.Minfo.datasourcename) {
        if (this.info.DKBM.length > 0) {
          debugger;
          let queryByGeometryParameters = {
            getFeatureMode: "SQL",
            datasetNames: [this.info.Minfo.datasourcename + ":" + "建筑轮廓"],
            queryParameter: {
              attributeFilter:
                "LANDNO in ('" + this.info.DKBM.join("','") + "')",
            },
            hasGeometry: "true",
          };
          let e = await mapQuery(
            this.info.Minfo.dataurl + "/featureResults.json?returnContent=true",
            queryByGeometryParameters
          );
          if (e && e.totalCount > 0) {
            e.features.forEach((feature) => {
              let jzlk = { data: [], geometry: feature.geometry };
              feature.fieldNames.forEach((fieldName, i) => {
                debugger;
                let Field = e.datasetInfos
                  ? e.datasetInfos[0].fieldInfos.find(
                      (c) =>
                        c.name &&
                        c.name.toUpperCase() == fieldName.toUpperCase() &&
                        c.name.toUpperCase().indexOf("SM") == -1
                    )
                  : null;
                if (Field) {
                  jzlk.data.push({
                    label: fieldName,
                    labelCN: Field ? Field.caption : fieldName,
                    value: feature.fieldValues[i],
                  });
                }
              });
              jzlkList.push(jzlk);
            });
          } else {
            console.log("wushuju");
          }
        }

        //退线区域
        this.info.JZTXlayerDataList.forEach((JZTXlayerData) => {
          //楼体信息
          jzlkList.forEach((jzlkData) => {
            let Area = this.calculateDisjointArea(
              jzlkData.geometry,
              JZTXlayerData.geometry
            );
            let FLOOR = jzlkData.data.find((c) => c.label == "FLOOR");
            if (FLOOR) FLOOR = Number(FLOOR.value);
            else {
              FLOOR = 1;
            }
            debugger;
            jzlkData.ccmj = Area * FLOOR;
            if (jzlkData.ccmj > 0) {
              this.cczmj += jzlkData.ccmj;
              this.TableData.push(jzlkData);
            }
          });
        });
      } else {
        console.log("wushuju");
      }
    },
    /**
     * // 计算不相交面积
     * @param jzlkDataGeometry 建筑轮廓范围
     * @param JZTXlayerDataGeometry 建筑退线范围
     */
    calculateDisjointArea(jzlkDataGeometry, JZTXlayerDataGeometry) {
      let jzlkDataPs = [];
      let JZTXlayerDataPs = [];
      jzlkDataGeometry.points.forEach((point) => {
        jzlkDataPs.push([point.x, point.y]);
      });
      if (jzlkDataPs.length > 0) {
        jzlkDataPs.push(jzlkDataPs[0]);
      }
      JZTXlayerDataGeometry.points.forEach((point) => {
        JZTXlayerDataPs.push([point.x, point.y]);
      });
      var polygon1 = polygon([jzlkDataPs]);

      var polygon2 = polygon([JZTXlayerDataPs]);
      //差集
      let differenceion = difference(polygon1, polygon2);
      if (differenceion) {
        const areadifference = area(differenceion) * window.earthRadius;
        return areadifference.toFixed(2);
      } else {
        return 0;
      }
    },
    //选中
    handleCurrentChange(row) {
      var center = Cesium.Cartesian3.fromDegrees(
        row.geometry.position.x,
        row.geometry.position.y
      ); //camera视野中心点坐标
      var heading = Cesium.Math.toRadians(0.0);
      var pitch = Cesium.Math.toRadians(-55.0);
      var range = row.geometry.boundingBox.upper.z + 300;
      viewer.camera.lookAt(
        center,
        new Cesium.HeadingPitchRange(heading, pitch, range)
      );
      viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    },
  },

  beforeDestroy() {},
};
</script>
<style lang="scss">
@import "@/../../zt.scss";
</style>
<style lang="scss" scoped>
.el-card {
  border: 0px solid #02a7f0;
}
.el-form-item {
  margin-bottom: 0;
}
</style>