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

<template>
  <div class="ZTGlobal" style="height: 100%; padding: 10px; color: white">
    <el-row>
      <span>模型名称：</span
      ><el-input
        size="mini"
        type="text"
        placeholder="请输入模型名称"
        v-model="billboardModel.billboardName"
      ></el-input>
    </el-row>
    <el-row>
      <el-col :span="9"> <span>广告类型：</span></el-col>
      <el-col :span="15">
        <el-cascader
          size="mini"
          placeholder="请选择广告类型"
          v-model="billboardModel.billboardType"
          :options="options"
          :show-all-levels="false"
          :props="{
            value: 'billboardType',
            label: 'billboardType',
            children: 'children',
            emitPath: false,
          }"
        ></el-cascader>
        <!-- <el-select
          placeholder="请选择广告类型"
          v-model="billboardModel.billboardType"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :value="item.value"
            :label="item.label"
            >{{ item.label }}</el-option
          >
        </el-select> -->
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="9"><span>X坐标(度) </span></el-col>
      <el-col :span="15">
        <el-input-number
          name="x"
          v-model="billboardModel.x"
          size="mini"
          precision="6"
          :min="108.6"
          :max="110.5"
          @change="handleChange"
          step="0.000001"
          label="X坐标(度)"
        ></el-input-number
      ></el-col>
    </el-row>
    <el-row>
      <el-col :span="9"><span>Y坐标(度)：</span></el-col>
      <el-col :span="15">
        <el-input-number
          name="y"
          v-model="billboardModel.y"
          size="mini"
          precision="6"
          :min="18.16"
          :max="18.7"
          @change="handleChange"
          step="0.000001"
          label="Y坐标(度)"
        ></el-input-number>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="9"> <span>Z坐标(米)：</span></el-col>
      <el-col :span="15">
        <el-input-number
          name="z"
          v-model="billboardModel.z"
          size="mini"
          precision="2"
          :min="0"
          :max="100"
          step="0.1"
          @change="handleChange"
          label="Z坐标(米)"
        ></el-input-number>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="9"> <span>长(米)：</span></el-col>
      <el-col :span="15">
        <el-input-number
          name="xL"
          v-model="billboardModel.xL"
          size="mini"
          precision="2"
          :min="0"
          :max="100"
          step="0.01"
          @change="handleChange"
          label="长(米)"
        ></el-input-number>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="9"> <span>宽/高(米)：</span></el-col>
      <el-col :span="15">
        <el-input-number
          name="yL"
          v-model="billboardModel.yL"
          size="mini"
          precision="2"
          :min="0"
          :max="50"
          step="0.01"
          @change="handleChange"
          label=""
          >宽/高(米)</el-input-number
        >
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="9"><span>厚度(米)：</span></el-col>
      <el-col :span="15">
        <el-input-number
          name="zL"
          v-model="billboardModel.zL"
          size="mini"
          precision="2"
          :min="0"
          :max="100"
          step="0.01"
          @change="handleChange"
          label="厚度(米)"
        ></el-input-number>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="9"><span>X轴旋转角(度)：</span></el-col>
      <el-col :span="15">
        <el-input-number
          name="rotateX"
          v-model="billboardModel.rotateX"
          size="mini"
          precision="1"
          :min="0"
          :max="360"
          step="0.1"
          @change="handleChange"
          label="X轴旋转角(度)"
        ></el-input-number
      ></el-col>
    </el-row>
    <el-row>
      <el-col :span="9"><span>Y轴旋转角(度)：</span></el-col>
      <el-col :span="15">
        <el-input-number
          name="rotateY"
          v-model="billboardModel.rotateY"
          size="mini"
          precision="1"
          :min="0"
          :max="360"
          step="0.1"
          @change="handleChange"
          label="Y轴旋转角(度)"
        ></el-input-number
      ></el-col>
    </el-row>
    <el-row>
      <el-col :span="9"><span>Z轴旋转角(度)：</span></el-col>
      <el-col :span="15">
        <el-input-number
          name="rotateZ"
          v-model="billboardModel.rotateZ"
          size="mini"
          precision="1"
          :min="0"
          :max="360"
          step="0.1"
          @change="handleChange"
          label="Z轴旋转角(度)"
        ></el-input-number
      ></el-col>
    </el-row>
    <el-row>
      <el-col :span="9"><span>是否添加模型：</span></el-col>
      <el-col :span="8">
        <el-switch
          size="mini"
          v-model="billboardModel.isAddModel"
          active-text="是"
          inactive-text="否"
        >
        </el-switch>
      </el-col>
      <el-col :span="6">
        <el-button
          size="mini"
          v-show="billboardModel.isAddModel"
          type="primary"
          @click="addModel()"
          >添加广告牌</el-button
        >
      </el-col>
    </el-row>
    <el-row>
      <div style="display: inline-flex">
        <el-button size="mini" type="primary" @click="saveMode()"
          >保存</el-button
        >
        <el-button size="mini" @click="cancle()">取消</el-button>
      </div>
    </el-row>
  </div>
</template>
<script>
import { Image } from "element-ui";
import { watch } from "vue";
import { v4 as uuidv4 } from "uuid";
/**
 * 添加的模型集合
 */
let modelList = [];
export default {
  props: {
    layerid: {
      type: String,
      default: "",
    },
    projectId: {
      type: String,
      default: "",
    },
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
    lydata: {
      type: Object,
      default: () => {
        return {};
      },
    },
    lyoption: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      billboardModel: {
        id: "",
        billboardInfoId: "",
        billboardName: "",
        billboardType: "",
        x: 109.56047,
        y: 18.36254,
        z: 3,
        xL: 1,
        yL: 1,
        zL: 0.1, //厚度
        rotateX: 90,
        rotateY: 0,
        rotateZ: 0,
        ReviewStatus: "",
        ReviewComments: "",
        isAddModel: false,
      },
      options: window.billboardReviewList,
      /**
       * 编辑句柄
       */
      handlerPoint: null,
      /**
       * 当前编辑模型
       */
      currentEntity: null,

      point3D: null,
      GUID: "",
    };
  },
  watch: {
    // point3D() {
    //     this.billboardModel.x = parseFloat(this.point3D.longitude).toFixed(5);
    //     this.billboardModel.y = parseFloat(this.point3D.latitude).toFixed(5);
    //     this.billboardModel.z = parseFloat(this.point3D.height).toFixed(2);
    //     this.billboardModel.xL = parseFloat(this.point3D.height).toFixed(2);
    // }
    // "billboardModel"(value) {
    //     console.log(343)
    //     this.currentEntity.box.dimensions = new Cesium.Cartesian3(
    //         value.xL,
    //         value.yL,
    //         value.zL
    //     );
    //     this.currentEntity.orientation = Cesium.Transforms.headingPitchRollQuaternion(this.currentEntity.position,
    //         new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(value.rotateX),
    //             Cesium.Math.toRadians(0), Cesium.Math.toRadians(0)));
    // }
  },
  methods: {
    /**
     * 点击添加位置
     */
    addModel() {
      var that = this;
      if (modelList.length > 0) {
        for (let index = 0; index < modelList.length; index++) {
          const element = modelList[index];
          viewer.entities.removeById(element.id);
        }

        modelList = [];
      }

      viewer._container.style.cursor = "pointer";
      that.GUID = new Date().getTime().toString();
      that.handlerPoint = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
      //todo：在显示地形情况下点击创建点
      var imageurl = "../../../../static/images/cesiumStyleImages/1.jpg";
      var modelurl = "../../../../static/ModelData/billboard/box.gltf";
      that.handlerPoint.setInputAction(function (event) {
        // // 使用场景的pick方法获取点击位置的实体
        // var pickedObject = viewer.scene.pick(event.position);
        // // 检查是否点击到了实体
        // if (
        //   scene.pickPositionSupported &&
        //   Cesium.defined(pickedObject) &&
        //   pickedObject.primitive
        // ) {
        //   debugger;

        // }

        var newposition = viewer.scene.pickPosition(event.position); //获取到地形图上面的坐标

        var orientation = Cesium.Transforms.headingPitchRollQuaternion(
          newposition,
          new Cesium.HeadingPitchRoll(
            Cesium.Math.toRadians(that.billboardModel.rotateX),
            Cesium.Math.toRadians(0),
            Cesium.Math.toRadians(0)
          )
        );

        var coordinate = Cesium.Cartographic.fromCartesian(newposition);
        var longitude = Cesium.Math.toDegrees(coordinate.longitude);
        var latitude = Cesium.Math.toDegrees(coordinate.latitude);
        var height = coordinate.height;
        that.billboardModel.x = longitude;
        that.billboardModel.y = latitude;
        that.billboardModel.z = height;
        // var newPosition = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
        var entity = viewer.entities.add({
          id: "billboard_" + that.GUID,
          name: "gltf",
          show: true,
          position: newposition,
          /**
           * 长方体
           */
          box: {
            dimensions: new Cesium.Cartesian3(
              that.billboardModel.xL,
              that.billboardModel.zL,
              that.billboardModel.yL
            ),
            show: true,
            material: Cesium.Color.LIGHTGREEN,
            // outline: false,
            // outlineColor: Cesium.Color.SPRINGGREEN,
            // outlineWidth: 1,
          },
          /**
           * 模型
           */
          // model: {
          //   uri: modelurl,
          //   scale: that.billboardModel.xL,
          // },
          /**
           * 广告牌
           */
          // billboard: {
          //     image: imageurl,
          //     width: that.billboardModel.xL,
          //     height: that.billboardModel.zL,
          //     rotation: 0,
          // },
          orientation: orientation,
        });
        debugger;
        modelList.push(entity);
        if (that.handlerPoint)
          that.handlerPoint.removeInputAction(
            Cesium.ScreenSpaceEventType.LEFT_CLICK
          );
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      // var colorStr = color.toCssColorString();
      // viewModel.boxMaterial = colorStr;
    },
    /**
     * 动态调整模型
     */
    handleChange() {
      var that = this;
      var currentEntity = viewer.entities.getById("billboard_" + that.GUID);
      /**
       * box
       */
      currentEntity.box.dimensions = new Cesium.Cartesian3(
        that.billboardModel.xL,
        that.billboardModel.zL,
        that.billboardModel.yL
      );

      /**
       * model
       */
      // currentEntity.model.scale = that.billboardModel.xL;

      /**
       * billoard
       */
      //   debugger
      //     that.currentEntity.billboard.width = that.billboardModel.x;
      //     that.currentEntity.billboard.height = that.billboardModel.y;
      //     that.currentEntity.billboard.rotation =that.billboardModel.rotateX
      /**
       * 更新位置
       */
      var newposition = Cesium.Cartesian3.fromDegrees(
        parseFloat(that.billboardModel.x),
        parseFloat(that.billboardModel.y),
        parseFloat(that.billboardModel.z)
      );
      currentEntity.position = newposition;
      /**
       *  旋转
       */
      var heading = Cesium.Math.toRadians(that.billboardModel.rotateX);
      var pitch = Cesium.Math.toRadians(that.billboardModel.rotateY);
      var roll = Cesium.Math.toRadians(that.billboardModel.rotateZ);
      var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
      var neworientation = Cesium.Transforms.headingPitchRollQuaternion(
        newposition,
        hpr
      );
      currentEntity.orientation = neworientation;
    },
    /**
     *实时更新位置
     */
    getPostions() {
      console.log("更新位置");
      var position = Cesium.Cartesian3.fromDegrees(
        parseFloat(this.billboardModel.x),
        parseFloat(this.billboardModel.y),
        parseFloat(this.billboardModel.z)
      );
      var property = new Cesium.SampledPositionProperty();

      // let time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
      var time = Cesium.JulianDate.now();
      // 添加位置，和时间对应
      property.addSample(time, position);
      return property;
    },
    /**
     * 实时更新角度
     */
    getOrientation() {
      var that = this;
      //     var rotate = Cesium.Math.toRadians(that.billboardModel.rotateX);
      //     var hpr = new Cesium.HeadingPitchRoll(rotate, 0, 0);
      var position = Cesium.Cartesian3.fromDegrees(
        parseFloat(that.billboardModel.x),
        parseFloat(that.billboardModel.y),
        parseFloat(that.billboardModel.z)
      );
      //     var neworientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);
      //  console.log("更新角度")
      //     return neworientation;

      // 取样位置 相当于一个集合
      let property = new Cesium.SampledPositionProperty();

      // let time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
      var time = Cesium.JulianDate.now();
      // 添加位置，和时间对应
      property.addSample(time, position);

      return property;
    },
    /**
     * 保存编辑
     */
    saveMode() {
      debugger;
      let that = this;
      if (
        that.billboardModel.billboardName == "" ||
        that.billboardModel.billboardName == null
      ) {
        this.$message.error("请添加模型名称");
        return;
      }

      if (that.billboardModel.isAddModel && modelList.length == 0) {
        this.$message.error("请先完成[添加广告牌]，再保存");
        return;
      }
      that.billboardModel.id = uuidv4();
      that.billboardModel.billboardInfoId = that.projectId;
      window.billboardModelList.push(that.billboardModel);
      this.$message({
        message: "添加成功",
        type: "success",
      });
      viewer.entities.removeAll();
      // that.lyoption.cancel();
      that.$layer.close(that.layerid);
    },
    //取消
    cancle() {
      if (this.handlerPoint)
        this.handlerPoint.removeInputAction(
          Cesium.ScreenSpaceEventType.LEFT_CLICK
        );
      modelList = [];
      viewer.entities.removeAll();

      this.$layer.close(this.layerid);
    },
  },
  components: { Image },
};
</script>
<style lang="scss">
@import "@/../../zt.scss";
</style>