jihongshun
7 天以前 0b906280ec163a3e80364e091550d8462db6b9f9
src/utils/components/init-map.vue
@@ -45,7 +45,7 @@
      <div class="cesiumContent">
        <div class="flyAction">
          <div class="actionName">{{currentAction ?currentAction.type :'' }}</div>
          <i class="el-icon-delete" />
          <i class="el-icon-delete" @click="deleteAction(chooseItem)" />
        </div>
        <div class="flayDataAll">
          <div class="flyData">
@@ -115,11 +115,7 @@
        </div>
        
      </div>
      <div class="cesiumButtonGroup">
        <el-button id="groundPoi" @click="addGroundPoi()" type="primary">地面点</el-button>
        <el-input v-model="mergeNumber" placeholder="请输入合并范围" type="number" style="width: 150px;"></el-input>
        <el-button  @click="mergePoint()" type="success">合并</el-button>
      </div>
      <!-- <div class="key-container">
        <div class="arrow-row">
          <div
@@ -172,7 +168,11 @@
          </div>
      </div> -->
    </div>
    <el-button id="groundPoi" class="groundPoi" @click="addGroundPoi()" type="info" plain >地面点</el-button>
    <div class="cesiumButtonGroup">
      <el-input v-model="mergeNumber" placeholder="合并范围" type="number" style="width: 120px;"></el-input>
      <el-button  @click="mergePoint()" type="success">合并</el-button>
    </div>
    <!-- 动态坐标、动态相机参数显示 -->
    <!-- <div id="moveResult" class="moveResult">
      <div id="moveResultCon" class="moveResultCon"></div>
@@ -198,7 +198,7 @@
let  pois = [globalon, globalat,0] 
let cameraVideo 
let ScopeElement; //光轴、视频
let preVideoScopePrimitiveArrTie = [];
// let preVideoScopePrimitiveArrTie = [];
let scratchSetViewMatrix3 = new Cesium.Matrix3();
let chooseId
// let  pois = [0, 0,0] 
@@ -262,14 +262,15 @@
        pointFly: { lon: 0, lat: 0, height: 0 },
        rowData:null,
        time: 10,
        takePhoto: '111',  // 初始数据
        takePhoto: '默认名称',  // 初始数据
        newTakePhoto: '',  // 编辑时的新数据
        isEditingPhoto: false,  // 控制是否处于编辑状态
        takeVideo: '111',  // 初始数据
        takeVideo: '默认名称',  // 初始数据
        newTakeVideo: '',  // 编辑时的新数据
        isEditingVideo: false,  // 控制是否处于编辑状态
        actionCounter:0,
        currentAction:null
        currentAction:null,
        preVideoScopePrimitiveArrTie:[]
    }
  },
  mounted(){
@@ -941,6 +942,7 @@
        }
      })
      const result = Object.keys(grouped).map((key, idx) => {
        console.log(group)
        const group = grouped[key];
        const positionGround = group.groundPoiId.getValue(Cesium.JulianDate.now())
        const positionAerialPo = group.aerialPoiId.getValue(Cesium.JulianDate.now())
@@ -1063,8 +1065,8 @@
        pmObj.name = data.name;
        pmObj.primitive = cameraVideo;
        viewerM.scene.primitives.add(cameraVideo);
        preVideoScopePrimitiveArrTie.push(pmObj);
        preVideoScopePrimitiveArrTie.map((item)=>{
        this.preVideoScopePrimitiveArrTie.push(pmObj);
        this.preVideoScopePrimitiveArrTie.map((item)=>{
          if(item.id != chooseId){
            item.primitive.show = false
          }
@@ -1157,7 +1159,7 @@
      document.getElementById('cammoveResultCon').innerHTML = camResult;
      // 计算距离(单位:米)
      const distanceBetween = Cesium.Cartesian3.distance(point1, point2)
      preVideoScopePrimitiveArrTie.map((item)=>{
      this.preVideoScopePrimitiveArrTie.map((item)=>{
        if(item.id == chooseId){
          let obj = this.updateSZScope(Cesium.Math.toDegrees(position.longitude),Cesium.Math.toDegrees(position.latitude),position.height,heading,pitch,roll,this.zoomRatio,distanceBetween)
          item.primitive.inverseViewMatrix = obj.M
@@ -1241,18 +1243,19 @@
    DealVisualCone(data,node){
      this.rowData = data
      console.log(data)
      this.pointGround = {
      console.log(this.preVideoScopePrimitiveArrTie)
      this.pointFly = {
        lon:data.children[0].longitude,
        lat:data.children[0].latitude,
        height:data.children[0].height
      }
      this.pointFly = {
      this.pointGround = {
        lon:data.longitude,
        lat:data.latitude,
        height:data.height
      }
      if(data.children && data.children?.length > 0) {
        preVideoScopePrimitiveArrTie.map((item)=>{
        this.preVideoScopePrimitiveArrTie.map((item)=>{
          if(item.name != data.children[0].label){
            item.primitive.show = false
          }else{
@@ -1260,7 +1263,7 @@
          }
        })
      }else {
        preVideoScopePrimitiveArrTie.map((item)=>{
        this.preVideoScopePrimitiveArrTie.map((item)=>{
          if(item.name != data.label){
            item.primitive.show = false
          }else {
@@ -1272,15 +1275,31 @@
    editAction(action){
      // 点击左侧小图标,右侧切换到该 action
      this.currentAction = action;
      console.log(action)
      console.log(this.currentAction)
      if(action.type == '悬停') {
          this.time = action.extra.value
      } else if(action.type == '拍照'){
          this.newTakePhoto = action.extra.value
          this.takePhoto = action.extra.value
      }else if(action.type == '开始录像'){
          this.newTakeVideo = action.extra.value
          this.takeVideo = action.extra.value
      }else if(action.type == '结束录像'){
      }
    },
    deleteAction(item){
      console.log(item.children[0].actions)
      if(!this.currentAction) return;
      console.log(this.currentAction)
      const point = this.currentAction.point;
      // 从 point.actions 中删除
      const index = item.children[0].actions.findIndex(a => a.id === this.currentAction.id);
      if(index !== -1){
        item.children[0].actions.splice(index, 1);
      }
      this.$message.success("已删除操作");
      this.currentAction = null;
      this.$emit('dealAction',item)
    },
    changeTime(val) {
      this.time += val;
@@ -1301,26 +1320,37 @@
      console.log(this.newTakePhoto)
      this.takePhoto = this.newTakePhoto;  // 点击对号时,更新数据
      this.isEditingPhoto = false;  // 结束编辑
      this.currentAction.extra.value = this.takePhoto
      this.currentAction.extra.value = this.newTakePhoto
      window.addEventListener("keydown", this.onKeyDown);
      window.addEventListener("keyup", this.onKeyUp);
    },
    cancelEditing() {
      this.newTakePhoto = this.takePhoto;  // 点击取消时,恢复原数据
      this.isEditingPhoto = false;  // 结束编辑
      window.addEventListener("keydown", this.onKeyDown);
      window.addEventListener("keyup", this.onKeyUp);
    },
    startEditingVideo() {
      this.newTakeVideo = this.takeVideo;  // 进入编辑时,保存当前的值
      this.isEditingVideo = true;
      window.removeEventListener("keydown", this.onKeyDown);
      window.removeEventListener("keyup", this.onKeyUp);
    },
    validateVideoInput() {
      this.takeVideo = this.newTakeVideo;  // 点击对号时,更新数据
      this.isEditingVideo = false;  // 结束编辑
      this.currentAction.extra.value = this.takeVideo
      this.currentAction.extra.value = this.newTakeVideo
      window.addEventListener("keydown", this.onKeyDown);
      window.addEventListener("keyup", this.onKeyUp);
    },
    cancelVideoEditing() {
      this.newTakeVideo = this.takeVideo;  // 点击取消时,恢复原数据
      this.isEditingVideo = false;  // 结束编辑
      window.addEventListener("keydown", this.onKeyDown);
      window.addEventListener("keyup", this.onKeyUp);
    },
    doAction(point, type){
      console.log(point)
      this.actionCounter++;
      let action = { 
        id: this.actionCounter, 
@@ -1337,14 +1367,14 @@
          action.extra.value = 'stopVideo'
      }
      console.log(action)
      point.actions.push(action);
      point.children[0].actions.push(action);
      console.log(point)
      this.$emit('dealAction',point)
      this.time = 10
      this.newTakePhoto = '111'
      this.newTakeVideo = '111'
      this.takeVideo = '111'
      this.takePhoto = '111'
      this.newTakePhoto = '默认名称'
      this.newTakeVideo = '默认名称'
      this.takeVideo = '默认名称'
      this.takePhoto = '默认名称'
      // 切换到右侧
      this.currentAction = action;
    },
@@ -1354,8 +1384,10 @@
<style scoped>
.cesium-example{
  height: calc(100vh - 185px);
  /* height: calc(100vh - 185px); */
  height: 100%;
}
#cesiumContainer {
    margin: 0;
@@ -1370,7 +1402,7 @@
    /* padding: 0 5px; */
    right: 10px;
    /* top: 0px; */
    bottom: 80px;
    bottom: 30px;
    margin: 0;
    width: 400px;
    height: 300px;
@@ -1436,20 +1468,29 @@
}
.flayDataAll {
  background-color:#232323;
  height: calc(100% - 55px);
  /* height: calc(100% - 55px); */
  height: calc(100% - 5px);
  height: calc(100% +  15px);
  width: 100%;
}
.flyData{
  width: calc(100% - 32px);
  height: calc(100% - 55px);
  /* height: calc(100% - 55px); */
  height: calc(100% - 5px);
  margin: auto;
  color: white;
}
.cesiumButtonGroup{
  position: absolute;
  bottom: 0;
  top: 15px;
  left: 100px;
  /* margin-top: 10px;
  margin-left: 10px; */
}
.groundPoi {
  position: absolute;
  top: 15px;
  left: 340px;
}
.moveResult{position:absolute;z-index:2;background-color:rgba(47,53,60,1);padding:0 5px;right:50%;bottom:30px;
    border:1px solid rgba(255,255,255,.1);box-sizing:content-box;width:220px;height:30px;font-size:14px;text-align:center}
@@ -1518,7 +1559,7 @@
  height: 300px;
  position: absolute;
  right: 10px;
  bottom:80px;
  bottom:30px;
  /* background-color: red; */
  z-index: 9;