real3d-portalsite/src/views/ConstructionApplication3D/billboard/billboardDesign.vue

<template>
  <div
    class="ZTGlobal"
    style="width: 100%; padding: 1rem 1rem 0rem 1rem; color: white"
  >
    <el-row :gutter="10">
      <el-col :span="18">
        <el-input
          clearable
          size="mini"
          placeholder="请输入内容"
          v-model="input3"
          class="input-with-select"
          @change="getZtBillboardInfoList()"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="getZtBillboardInfoList()"
          ></el-button>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-button size="mini" type="primary" plain @click="addProjectInfo"
          >新建项目</el-button
        >
      </el-col>
    </el-row>
    <el-row>
      <div style="height: 90%">
        <el-row v-for="item in projects" :key="item.id">
          <el-card class="box-card card_body_style">
            <el-row>
              <span>{{ item.projectname }}</span></el-row
            >
            <el-row>
              <span>{{ item.checkDate }}</span></el-row
            >
            <el-row style="display: flex">
              <el-col class="con-col hover_style" style="cursor: pointer">
                <i
                  style="font-size: 2rem"
                  class="el-icon-s-operation"
                  @click="billboarddetial(item)"
                ></i>
                <a @click="billboarddetial(item)">详情</a>
              </el-col>
              <el-col
                class="con-col hover_style"
                v-if="!item.dataurl"
                style="cursor: pointer"
              >
                <i
                  style="font-size: 2rem"
                  class="el-icon-folder-add"
                  @click="importModel(item)"
                ></i>
                <a @click="importModel(item)">导入模型</a>
              </el-col>
              <el-col class="con-col hover_style" style="cursor: pointer">
                <i
                  style="font-size: 2rem"
                  class="el-icon-location-outline"
                  @click="locationModel(item)"
                ></i>
                <a @click="locationModel(item)">定位</a>
              </el-col>
              <el-col class="con-col hover_style" style="cursor: pointer">
                <i
                  style="font-size: 2rem"
                  class="el-icon-tickets"
                  @click="checkModel(item)"
                ></i>
                <a @click="checkModel(item)">审查</a>
              </el-col>
              <el-col class="con-col hover_style" style="cursor: pointer">
                <i
                  style="font-size: 2rem"
                  class="el-icon-delete"
                  @click="deleteBillard(item)"
                ></i>
                <a @click="deleteBillard(item)">删除</a>
              </el-col>
            </el-row>
          </el-card>
        </el-row>
      </div>
    </el-row>
    <el-row>
      <el-pagination
        :hide-on-single-page="true"
        style="color: white"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="queryParams.pageSize"
        layout="prev, pager, next"
        :total="queryParams.total"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import addbillboardProject from "@/views/ConstructionApplication3D/billboard/addBillboardPoject.vue";
import billboarddetail from "@/views/ConstructionApplication3D/billboard/billboarddetail.vue";
import billboardCheck from "@/views/ConstructionApplication3D/billboard/billboardCheckList.vue";
import addBiillboardModel from "@/views/ConstructionApplication3D/billboard/addBiillboardModel.vue";
import billboarddetailInfo from "@/views/ConstructionApplication3D/billboard/billboarddetailInfo.vue";
import {
  cartesian3ToWGS84,
  mapQuery,
  flatten,
  mercator2lonLat,
  undergroundMode,
} from "@/utils/MapHelper/MapHelper.js";
import lodash from "lodash-es";
import { v4 as uuidv4 } from "uuid";
import {
  listZtBillboardInfoList,
  listBillboardModelList,
  delZtBillboardInfoList,
  getBillboardModelList,
} from "@/api/zt/ztApi.js";
let entityList = [];
export default {
  data() {
    return {
      input3: "",
      thislayers: [],
      // projects: window.billboardInfoList,
      projects: [],
      deltailLayerId: null,
      checklLayerId: null,
      addlLayerId: null,
      // entityList: [],
      //点查entities事件
      getEntitiesHandler: null,
      selectBillardId: "",
      queryParams: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  computed: {},
  mounted() {
    this.initEntitiesHandler();
    // this.init();
    this.getZtBillboardInfoList();
  },
  methods: {
    //页大小触发
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.queryParams.pageNum = 1;
      this.getZtBillboardInfoList();
    },
    //跳转页触发
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getZtBillboardInfoList();
    },

    /**
     * 获取广告项目信息
     */
    async getZtBillboardInfoList() {
      debugger;
      let BenchmarkLandPrices = await listZtBillboardInfoList({
        projectname: this.input3,
        ...this.queryParams,
      });
      this.queryParams.total = BenchmarkLandPrices.total;
      this.projects = BenchmarkLandPrices.rows;
      // this.BenchmarkLandPriceList = window.BenchmarkLandPriceList;
    },

    // 新增项目
    addProjectInfo() {
      this.$layer.iframe({
        id: "addXM",
        content: {
          content: addbillboardProject, //传递的组件对象
          parent: this, //当前的vue对象
          data: {}, //props
        },
        offset: ["650", "300"], //left top  左上角(left=430px/2;top=（800px+header高）/2)
        area: ["400px", "450px"], //宽 高
        title: "新增项目",
        maxmin: false,
        shade: false, //是否显示遮罩
        shadeClose: false, //点击遮罩是否关闭
        cancel: async () => {
          //关闭事件
          // alert("关闭iframe");
          // this.projects = window.billboardInfoList;
          await this.getZtBillboardInfoList();
        },
      });
    },

    /**
     * 渲染，定位
     * @param item
     * @param isPosition 默认定位
     */
    async locationModel(item, isPosition) {
      debugger;
      this.intoModel(item, isPosition);
      this.removeAllentities();
      //渲染范围
      // this.DrawProjectScope(item);
      //渲染单个广告牌
      // window.billboardModelList.forEach((billboardModel) => {
      //   if (billboardModel.billboardInfoId == item.id) {
      //     this.DrawBillboard(billboardModel);
      //   }
      // });

      let data = await listBillboardModelList({
        billboardInfoId: item.id,
      });
      data.rows.forEach((element) => {
        this.DrawBillboard(element);
      });
      if (isPosition != false) {
        window.viewer.flyTo(entityList);
      }
    },

    /**
     * 定位到某个模型
     * @param Mitem 模型实体
     */
    locationSingleModel(Mitem) {
      if (Mitem.isAddModel) {
        if (Mitem.viewing_angle) {
          viewer.camera.setView(JSON.parse(Mitem.viewing_angle));
        } else {
          let entitie = viewer.entities.getById("point_Billboard_" + Mitem.id);
          if (!entitie) {
            //渲染单个广告牌
            // if (billboardModel.id == Mitem.id) {
            this.DrawBillboard(Mitem);
            // viewer.flyTo(entitie);
            // }
          }
          viewer.flyTo(entitie);
        }
      }
    },
    /**
     *查看详情
     */

    async billboarddetial(item) {
      await this.locationModel(item, false);
      this.$layer.iframe({
        id: "billboarddetail",
        content: {
          content: billboarddetail, //传递的组件对象
          parent: this, //当前的vue对象
          data: { info: { projectInfo: item } }, //props
        },
        offset: [720, 400], //left top  左上角(left=430px/2;top=（800px+header高）/2)
        area: ["300px", "400px"],
        title: "项目详情",
        maxmin: false,
        shade: false, //是否显示遮罩
        shadeClose: false, //点击遮罩是否关闭
        cancel: () => {
          //关闭事件
          // alert("关闭iframe");
        },
      });
    },
    /**
     *模型审查
     *
     */

    async checkModel(item) {
      await this.locationModel(item, false);
      var width = 400;
      var top = 250;
      var left = Math.floor(document.body.clientWidth - width / 2);
      var height = 400;

      this.$layer.iframe({
        id: "MXSCList",
        content: {
          content: billboardCheck, //传递的组件对象
          parent: this, //当前的vue对象
          data: { info: item }, //props
        },
        offset: [left.toString(), top.toString()], //left top  左上角(left=430px/2;top=（800px+header高）/2)
        area: [width.toString() + "px", height.toString() + "px"],
        title: "模型审查列表",
        maxmin: true,
        shade: false, //是否显示遮罩
        shadeClose: false, //点击遮罩是否关闭
        cancel: () => {
          //关闭事件
          // alert("关闭iframe");
        },
      });
    },
    /*
     *删除广告牌
     */
    deleteBillard(model) {
      debugger;
      var that = this;
      //  that.$layer.confirm("确定要删除当前广告吗？", {
      //     btn: ['确定', '取消']     //按钮
      //   }, function (layerid) {
      //     that.$layer.close(layerid);
      //     that.$layer.msg('已删除');
      //   },
      //     function (layerid) {
      //       that.$layer.close(layerid);
      //       that.$layer.msg('已取消');
      //     });
      // options，yes和cancel可以省略， 如果您不愿意写options，则可以直接写确定按钮的函数，即yes，或者覆盖默认的cancel方法。PS：yes和cancel方法不能互换
      //content 可以为html
      //yes,cancel如果是个function，这会自动添加参数layerid，
      this.$confirm("确定要删除当前广告吗？, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          debugger;
          let result = await delZtBillboardInfoList(model.id);
          debugger;
          if (result.code == 200) {
            that.getZtBillboardInfoList();
            viewer.entities.removeAll();
            // that.lyoption.cancel();
            that.$layer.close(that.layerid);
            that.$message({
              message: "删除成功",
              type: "success",
            });
          }
        })
        .catch(() => {
          debugger;
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /**
     * 导入模型（添加广告牌模型）
     */
    importModel(project) {
      this.intoModel(project);
      // this.locationModel(project);
      var width = 600;
      var top = 420;
      var left = Math.floor(document.body.clientWidth - width / 2 + 130);
      var height = 350;
      this.$layer.iframe({
        id: "addMX",
        content: {
          content: addBiillboardModel, //传递的组件对象
          parent: this, //当前的vue对象
          data: { layerId: "addMX", projectId: project.id }, //props
        },
        offset: [left.toString(), top.toString()], //left top  左上角(left=430px/2;top=（800px+header高）/2)
        area: ["350px", "720px"],
        title: "添加广告牌",
        maxmin: false,
        shade: false, //是否显示遮罩
        shadeClose: false, //点击遮罩是否关闭
        cancel: () => {
          //关闭事件
          this.locationModel(project, false);
        },
      });
    },

    /**
     * 绘制广告位项目范围
     */
    DrawProjectScope(item) {
      this.removeProjectScope(item);
      let ps = [];
      for (let index = 0; index < item.ProjectScope.length; index++) {
        const element = item.ProjectScope[index];
        ps.push(element.x);
        ps.push(element.y);
      }
      const line = viewer.entities.add({
        id: "ggwxmfw-" + item.id,
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArray(ps),
          width: 5,
          material: Cesium.Color.RED,
          clampToGround: true,
        },
      });
      entityList.push(line);
    },
    /**
     * 绘制广告牌
     */
    DrawBillboard(billboardModel) {
      if (billboardModel.isAddModel) {
        if (billboardModel.template) {
          if (typeof billboardModel.template === "string") {
            billboardModel.template = JSON.parse(billboardModel.template);
          }
        } else {
          billboardModel.template = {};
        }

        if (billboardModel.templateBottom) {
          if (typeof billboardModel.templateBottom === "string") {
            billboardModel.templateBottom = JSON.parse(
              billboardModel.templateBottom
            );
          }
        } else {
          billboardModel.templateBottom = {};
        }
        if (billboardModel.templateCentre) {
          if (typeof billboardModel.templateCentre === "string") {
            billboardModel.templateCentre = JSON.parse(
              billboardModel.templateCentre
            );
          }
        } else {
          billboardModel.templateCentre = {};
        }
        if (billboardModel.templateTop) {
          if (typeof billboardModel.templateTop === "string") {
            billboardModel.templateTop = JSON.parse(billboardModel.templateTop);
          }
        } else {
          billboardModel.templateTop = {};
        }

        debugger;
        var newposition = Cesium.Cartesian3.fromDegrees(
          billboardModel.x,
          billboardModel.y,
          billboardModel.z
        );

        if (billboardModel.template) {
          var imageurl = "../../../../static/ModelData/billboard/1.jpg";
          var modelurl = "../../../../static/ModelData/billboard/box.gltf";
          switch (billboardModel.template.ModelType) {
            //矩形广告
            case "rectangleBillboard":
              var orientation = Cesium.Transforms.headingPitchRollQuaternion(
                newposition,
                new Cesium.HeadingPitchRoll(
                  Cesium.Math.toRadians(billboardModel.rotateZ),
                  Cesium.Math.toRadians(billboardModel.rotateY),
                  Cesium.Math.toRadians(billboardModel.rotateX)
                )
              );
              //计算当前实体的xyz
              var p = Cesium.Cartesian3.fromDegrees(
                Number(billboardModel.templateTop.x),
                Number(billboardModel.templateTop.y),
                Number(billboardModel.templateTop.z)
              );
              var topentity = viewer.entities.add({
                id: "top_billboard_" + billboardModel.id,
                name: "gltf",
                show: true,
                position: p,
                /**
                 * 长方体
                 */
                box: {
                  dimensions: new Cesium.Cartesian3(
                    Number(billboardModel.templateTop.xL),
                    Number(billboardModel.templateTop.zL),
                    Number(billboardModel.templateTop.yL)
                  ),
                  show: true,
                  material: Cesium.Color.LIGHTGREEN,
                },
                orientation: orientation,
              });
              entityList.push(topentity);

              break;
            // 立杆型广告
            case "postsBillboard":
              var orientation = Cesium.Transforms.headingPitchRollQuaternion(
                newposition,
                new Cesium.HeadingPitchRoll(
                  Cesium.Math.toRadians(billboardModel.rotateZ),
                  Cesium.Math.toRadians(billboardModel.rotateY),
                  Cesium.Math.toRadians(billboardModel.rotateX)
                )
              );
              var c_p = Cesium.Cartesian3.fromDegrees(
                billboardModel.templateCentre.x,
                billboardModel.templateCentre.y,
                billboardModel.templateCentre.z
              );
              var Centreentity = viewer.entities.add({
                id: "Centre_billboard_" + billboardModel.id,
                name: "gltf",
                show: true,
                position: c_p,
                /**
                 * 圆柱
                 */
                cylinder: {
                  length: billboardModel.templateCentre.yL, //圆柱体长度
                  topRadius: billboardModel.templateCentre.rL, //圆柱顶部半径
                  bottomRadius: billboardModel.templateCentre.rL, //圆柱体底部半径
                  material: Cesium.Color.LIGHTGREEN,
                  shadows: Cesium.ShadowMode.DISABLED, //指定圆柱体是否从每个光源投射或接收阴影
                },
                orientation: Cesium.Transforms.headingPitchRollQuaternion(
                  newposition,
                  new Cesium.HeadingPitchRoll(
                    Cesium.Math.toRadians(billboardModel.rotateZ),
                    Cesium.Math.toRadians(0),
                    Cesium.Math.toRadians(0)
                  )
                ),
              });
              entityList.push(Centreentity);

              //计算当前实体的xyz

              var t_p = Cesium.Cartesian3.fromDegrees(
                Number(billboardModel.templateTop.x),
                Number(billboardModel.templateTop.y),
                Number(billboardModel.templateTop.z)
              );
              var topentity = viewer.entities.add({
                id: "top_billboard_" + billboardModel.id,
                name: "gltf",
                show: true,
                position: t_p,
                /**
                 * 矩形
                 */
                box: {
                  dimensions: new Cesium.Cartesian3(
                    Number(billboardModel.templateTop.xL),
                    Number(billboardModel.templateTop.zL),
                    Number(billboardModel.templateTop.yL)
                  ),
                  material: Cesium.Color.LIGHTGREEN,
                  // outline: false,
                  // outlineColor: Cesium.Color.SPRINGGREEN,
                  // outlineWidth: 1,
                },
                orientation: orientation,
              });
              entityList.push(topentity);

              break;
            //底座型立杆广告
            case "ColumnWithaseBillboard":
              var orientation = Cesium.Transforms.headingPitchRollQuaternion(
                newposition,
                new Cesium.HeadingPitchRoll(
                  Cesium.Math.toRadians(billboardModel.rotateZ),
                  Cesium.Math.toRadians(billboardModel.rotateY),
                  Cesium.Math.toRadians(billboardModel.rotateX)
                )
              );
              var b_p = Cesium.Cartesian3.fromDegrees(
                billboardModel.templateBottom.x,
                billboardModel.templateBottom.y,
                billboardModel.templateBottom.z
              );
              var bottomentity = viewer.entities.add({
                id: "bottom_billboard_" + billboardModel.id,
                name: "gltf",
                show: true,
                position: b_p,
                /**
                 * 矩形
                 */
                box: {
                  dimensions: new Cesium.Cartesian3(
                    billboardModel.templateBottom.xL,
                    billboardModel.templateBottom.zL,
                    billboardModel.templateBottom.yL
                  ),
                  material: Cesium.Color.LIGHTGREEN,
                  // outline: false,
                  // outlineColor: Cesium.Color.SPRINGGREEN,
                  // outlineWidth: 1,
                },
                orientation: Cesium.Transforms.headingPitchRollQuaternion(
                  newposition,
                  new Cesium.HeadingPitchRoll(
                    Cesium.Math.toRadians(billboardModel.rotateZ),
                    Cesium.Math.toRadians(0),
                    Cesium.Math.toRadians(0)
                  )
                ),
              });
              entityList.push(bottomentity);

              var c_p = Cesium.Cartesian3.fromDegrees(
                billboardModel.templateCentre.x,
                billboardModel.templateCentre.y,
                billboardModel.templateCentre.z
              );
              var Centreentity = viewer.entities.add({
                id: "Centre_billboard_" + billboardModel.id,
                name: "gltf",
                show: true,
                position: c_p,
                /**
                 * 圆柱
                 */
                cylinder: {
                  length: billboardModel.templateCentre.yL, //圆柱体长度
                  topRadius: billboardModel.templateCentre.rL, //圆柱顶部半径
                  bottomRadius: billboardModel.templateCentre.rL, //圆柱体底部半径
                  material: Cesium.Color.LIGHTGREEN,
                  shadows: Cesium.ShadowMode.DISABLED, //指定圆柱体是否从每个光源投射或接收阴影
                },
                orientation: Cesium.Transforms.headingPitchRollQuaternion(
                  newposition,
                  new Cesium.HeadingPitchRoll(
                    Cesium.Math.toRadians(billboardModel.rotateZ),
                    Cesium.Math.toRadians(0),
                    Cesium.Math.toRadians(0)
                  )
                ),
              });
              entityList.push(Centreentity);

              var t_p = Cesium.Cartesian3.fromDegrees(
                Number(billboardModel.templateTop.x),
                Number(billboardModel.templateTop.y),
                Number(billboardModel.templateTop.z)
              );

              var topentity = viewer.entities.add({
                id: "top_billboard_" + billboardModel.id,
                name: "gltf",
                show: true,
                position: t_p,
                /**
                 * 矩形
                 */
                box: {
                  dimensions: new Cesium.Cartesian3(
                    Number(billboardModel.templateTop.xL),
                    Number(billboardModel.templateTop.zL),
                    Number(billboardModel.templateTop.yL)
                  ),
                  material: Cesium.Color.LIGHTGREEN,
                  // outline: false,
                  // outlineColor: Cesium.Color.SPRINGGREEN,
                  // outlineWidth: 1,
                },
                orientation: orientation,
              });
              entityList.push(topentity);

              break;
            //实物型广告（模型型）
            case "ModelBillboard":
              var orientation = Cesium.Transforms.headingPitchRollQuaternion(
                newposition,
                new Cesium.HeadingPitchRoll(
                  Cesium.Math.toRadians(billboardModel.rotateZ),
                  Cesium.Math.toRadians(billboardModel.rotateY),
                  Cesium.Math.toRadians(billboardModel.rotateX)
                )
              );
              var p = Cesium.Cartesian3.fromDegrees(
                Number(billboardModel.templateTop.x),
                Number(billboardModel.templateTop.y),
                Number(billboardModel.templateTop.z)
              );
              var url = billboardModel.template.templateTopUrl || modelurl;
              var entity = viewer.entities.add({
                id: "top_billboard_" + billboardModel.id,
                name: "gltf",
                show: true,
                position: p,
                /**
                 * 模型
                 */
                model: {
                  uri: url,
                  scale: billboardModel.templateTop.scaleL,
                },
                orientation: orientation,
              });
              entityList.push(entity);
              break;
            //图片型广告
            case "imgBillboard":
              var orientation = Cesium.Transforms.headingPitchRollQuaternion(
                newposition,
                new Cesium.HeadingPitchRoll(
                  Cesium.Math.toRadians(billboardModel.rotateZ),
                  Cesium.Math.toRadians(billboardModel.rotateY),
                  Cesium.Math.toRadians(billboardModel.rotateX)
                )
              );
              var p = Cesium.Cartesian3.fromDegrees(
                Number(billboardModel.templateTop.x),
                Number(billboardModel.templateTop.y),
                Number(billboardModel.templateTop.z)
              );
              var url = billboardModel.template.templateTopUrl || imageurl;
              var entity = viewer.entities.add({
                id: "top_billboard_" + billboardModel.id,
                name: "gltf",
                show: true,
                position: p,
                /**
                 * 广告牌
                 */
                billboard: {
                  image: url,
                  width: Number(billboardModel.templateTop.xL),
                  height: Number(billboardModel.templateTop.yL),
                  rotation: Number(billboardModel.rotateX),
                  sizeInMeters: true,
                },
                orientation: orientation,
              });
              entityList.push(entity);
              break;
          }

          var h = 0;
          if (billboardModel.templateTop.yL) {
            h = Number(billboardModel.templateTop.yL) / 2;
          }
          viewer.entities.removeById("point_Billboard_" + billboardModel.id);
          lodash.remove(
            entityList,
            (entity) => entity.id === "point_Billboard_" + billboardModel.id
          );
          const point = viewer.entities.add({
            id: "point_Billboard_" + billboardModel.id,
            //点
            position: Cesium.Cartesian3.fromDegrees(
              Number(billboardModel.templateTop.x),
              Number(billboardModel.templateTop.y),
              Number(billboardModel.templateTop.z) + h
            ),
            label: {
              text: billboardModel.billboardName, //描述内容
              font: "20px Sans-Serif", //字体大小 类型
              fillColor: Cesium.Color.RED, //颜色
              outlineColor: Cesium.Color.GOLD,
              style: Cesium.LabelStyle.CENTER_LABEL,
              // 垂直位置
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              // 中心位置
              pixelOffset: new Cesium.Cartesian2(0, -10),
              //设置背景颜色透明
              backgroundColor: new Cesium.Color(0.0, 0.0, 0.0, 0.0),
              //打开背景  打开背景 （不会被线段覆盖）
              showBackground: true,
              // heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
              // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
              //   0.0,
              //   1800.0
              // ),
              // heightReference: Cesium.HeightReference.NONE,
              disableDepthTestDistance: Number.POSITIVE_INFINITY,
            },
          });
          entityList.push(point);
        }
      }

      // if (billboardModel.isAddModel) {
      //   this.removeBillboard(billboardModel);
      //   var modelurl = "../../../../static/ModelData/billboard/box.gltf";
      //   let newposition = Cesium.Cartesian3.fromDegrees(
      //     billboardModel.x,
      //     billboardModel.y,
      //     billboardModel.z
      //   );
      //   var orientation = Cesium.Transforms.headingPitchRollQuaternion(
      //     newposition,
      //     new Cesium.HeadingPitchRoll(
      //       Cesium.Math.toRadians(billboardModel.rotateX),
      //       Cesium.Math.toRadians(billboardModel.rotateY),
      //       Cesium.Math.toRadians(billboardModel.rotateZ)
      //     )
      //   );
      //   var entity = viewer.entities.add({
      //     id: "billboard_" + billboardModel.id,
      //     name: "gltf",
      //     show: true,
      //     position: newposition,

      //     /**
      //      * 长方体
      //      */
      //     box: {
      //       dimensions: new Cesium.Cartesian3(
      //         billboardModel.xL,
      //         billboardModel.zL,
      //         billboardModel.yL
      //       ),
      //       show: true,
      //       material: Cesium.Color.LIGHTGREEN,
      //       // outline: true,
      //       // outlineColor: Cesium.Color.SPRINGGREEN,
      //       // outlineWidth: 1,
      //     },
      //     /**
      //      * 模型
      //      */
      //     // model: {
      //     //   uri: modelurl,
      //     //   scale: billboardModel.xL,
      //     // },
      //     /**
      //      * 广告牌
      //      */
      //     // billboard: {
      //     //     image: imageurl,
      //     //     width: billboardModel.xL,
      //     //     height: billboardModel.zL,
      //     //     rotation: 0,
      //     // },
      //     orientation: orientation,
      //   });
      //   entityList.push(entity);
      //   const point = viewer.entities.add({
      //     id: "point_Billboard_" + billboardModel.id,
      //     //点
      //     position: Cesium.Cartesian3.fromDegrees(
      //       billboardModel.x,
      //       billboardModel.y,
      //       billboardModel.z + billboardModel.yL / 2
      //     ),
      //     label: {
      //       text: billboardModel.billboardName, //描述内容
      //       font: "20px Sans-Serif", //字体大小 类型
      //       fillColor: Cesium.Color.RED, //颜色
      //       outlineColor: Cesium.Color.GOLD,
      //       style: Cesium.LabelStyle.CENTER_LABEL,
      //       // 垂直位置
      //       verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      //       // 中心位置
      //       pixelOffset: new Cesium.Cartesian2(0, -10),
      //       //设置背景颜色透明
      //       backgroundColor: new Cesium.Color(0.0, 0.0, 0.0, 0.0),
      //       //打开背景  打开背景 （不会被线段覆盖）
      //       showBackground: true,
      //       // heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
      //       distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
      //         0.0,
      //         300.0
      //       ),
      //       heightReference: Cesium.HeightReference.NONE,
      //     },
      //   });
      // }
    },

    initEntitiesHandler() {
      let that = this;
      this.getEntitiesHandler = new Cesium.ScreenSpaceEventHandler(
        scene.canvas
      );
      this.getEntitiesHandler.setInputAction(async function (click) {
        var pick = viewer.scene.pick(click.position);
        debugger;
        //广告牌信息弹窗
        if (pick && pick.id.id && pick.id.id.indexOf("_") !== -1) {
          let id = pick.id.id.split("_")[2];
          // let info = window.billboardModelList.find((c) => c.id == id);
          let info = await getBillboardModelList(id);
          that.openOBJInfo("广告牌信息详情", info.data);
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    //打开广告牌信息弹窗
    openOBJInfo(title, info) {
      let w = document.body.offsetWidth;
      let h = document.body.offsetHeight;
      //左上角(left=弹窗宽/2;top=弹窗高/2+header高)
      //右上角 (left=w-弹窗宽+(弹窗宽/2);top=弹窗高/2+header高);
      let left = 430 / 2 + 556;
      let top = 430 / 2 + 60;
      this.OBJInfolayerid = this.$layer.iframe({
        id: "GGPMXXQ",
        content: {
          content: billboarddetailInfo, //传递的组件对象
          parent: this, //当前的vue对象
          data: { info }, //props
        },
        offset: [left, top], //left top
        area: ["430px", "430px"], //宽 高
        title: title,
        maxmin: false,
        shade: false, //是否显示遮罩
        shadeClose: false, //点击遮罩是否关闭
        cancel: () => {
          //关闭事件
          // alert("关闭iframe");
        },
      });
    },
    //删除一个广告范围
    removeProjectScope(item) {
      if (item) {
        viewer.entities.removeById("ggwxmfw-" + item.id);
        lodash.remove(
          entityList,
          (entity) => entity.id === "ggwxmfw-" + item.id
        );
      }
    },
    //删除一个广告牌
    removeBillboard(item) {
      if (item) {
        viewer.entities.removeById("billboard_" + item.id);
        lodash.remove(
          entityList,
          (entity) => entity.id === "billboard_" + item.id
        );
        viewer.entities.removeById("point_Billboard_" + item.id);
        lodash.remove(
          entityList,
          (entity) => entity.id === "point_Billboard_" + item.id
        );
      }
    },
    removeAllentities() {
      viewer.entities.removeAll();
      entityList = [];
    },

    /**
     * 加载报建模型
     * @param info
     * @param isPosition
     */
    intoModel(info, isPosition) {
      let that = this;
      if (info.url && this.selectBillardId != info.id) {
        this.selectBillardId = info.id;
        this.thislayers.forEach((element) => {
          scene.layers.remove(element);
        });
        this.thislayers = [];
        setTimeout(function () {
          try {
            var dingwei = isPosition;
            if (isPosition != false) {
              dingwei = true;
            }
            var promisse11w = scene.open(info.url, undefined, {
              autoSetView: dingwei,
            });
            Cesium.when(promisse11w, function (layers) {
              debugger;
              layers.forEach((element) => {
                that.thislayers.push(element.name);
                // window.viewer.flyTo(element);
              });
            });
            that.yp(info);
          } catch (error) {
            console.log(error);
          }
        }, 1000);
      }
    },

    /**
     * 压平
     * @param Minfos 模型信息
     */
    async yp(info) {
      this.qxyp();
      const Minfo = info;

      //获取模型信息
      let queryBySQLParameters = {
        getFeatureMode: "SQL",
        datasetNames: [Minfo.datasourcename + ":项目范围"],
        queryParameter: {
          attributeFilter: "1=1",
        },
        hasGeometry: true,
      };
      let e = await mapQuery(
        Minfo.dataurl + "/featureResults.json?returnContent=true",
        queryBySQLParameters
      );

      if (e && e.totalCount > 0) {
        e.features.forEach((element) => {
          let flatPoints = element.geometry.points
            .map((item) => [item.x, item.y, 6.5])
            .flat();
          viewer.scene.layers.layerQueue.forEach((layer) => {
            let name = "flatten" + Math.random();
            let istrue = layer.addFlattenRegion({
              position: flatPoints,
              name: name,
            });
          });
        });
      }
    },
    qxyp() {
      viewer.scene.layers.layerQueue.forEach((layer) => {
        layer.removeAllFlattenRegion();
      });
    },
  },
  beforeDestroy() {
    this.$layer.close("MXSCList");
    this.$layer.close("addXM");
    this.$layer.close("GGPMXXQ");
    this.$layer.close("addMX");
    this.$layer.close("billboarddetail");

    if (this.getEntitiesHandler) {
      this.getEntitiesHandler.removeInputAction(
        Cesium.ScreenSpaceEventType.LEFT_CLICK
      );
    }
    this.qxyp();
    this.removeAllentities();
    debugger;
    this.thislayers.forEach((element) => {
      scene.layers.remove(element);
    });
  },
};
</script>

<style lang="scss">
@import "@/../../zt.scss";
</style>
<style lang="scss" scoped>
.card_body_style {
  border: 1px dashed #02a7f0;
}

.hover_style:hover {
  border: 1px solid #02a7f0;
}

.checkedState {
  position: relative;

  .status {
    position: absolute;
    right: 0;
    top: 0;
    // z-index: 2;
    overflow: hidden;
    // border-radius: 6px;
  }

  .icon {
    position: absolute;
    right: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    border: 8px;
    background: #ffff80;
    -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
  }

  .txts {
    line-height: 2.6rem;
    text-align: center;
    transform: rotate(45deg);
    transform-origin: center center;
    color: #ec808c;
    // font-size: 18px;
  }

  /* 带圆角的话这个status 和 txts的宽度/宽度 是要比icon的宽度/高度小的,效果可以自己慢慢调 */
  .ce {
    width: 4rem;
    height: 4rem;
  }
}
.con-col {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}
</style>