航线模拟 差视锥体的head值和时间轴

jihongshun

2025-09-11 bcb67f336c2b352177884b8db6decc3fcf382bb0

 src/views/system/shootPoint/components/shootPointDialog.vue

@@ -45,7 +45,7 @@
                        <!-- 航点列表 -->
                        <div class="waypoints">
                          <div 
                            v-for="(wp, index) in waypoints" 
                            v-for="(wp, index) in treeData" 
                            :key="index" 
                            class="waypoint-item"
                            :class="{ active: selectedIndex === index }"
@@ -55,18 +55,22 @@
                              <i 
                                class="el-icon-success" 
                              ></i>
                              <i 
                                class="el-icon-delete" 
                                @click.stop="deleteItem(wp)"
                              ></i>
                              <div class="waypoint-contnet">
                                <span class="waypoint-index">{{ wp.label }}</span>
                                <span v-for="(action, aIndex) in wp.actions" 
                                <span class="waypoint-index">{{ wp.label +'----'  +wp.children[0].label }}</span>
                                <span v-for="(action, aIndex) in wp.children[0].actions" 
                                      :key="action.id" 
                                      class="action-icon"
                                      @click.stop="clickItem(action)">
                  
                                  <img src="@/assets/images/xuanting.svg" alt="svg图片" v-if="action.type==='悬停'" />
                                  <img src="@/assets/images/photo.svg" alt="svg图片" v-if="action.type==='拍照'" />
                                  <img src="@/assets/images/startVideo.svg" alt="svg图片" v-if="action.type==='开始录像'" />
                                  <img src="@/assets/images/stopVideo.svg" alt="svg图片" v-if="action.type==='结束录像'" />
                                  <img src="@/assets/images/zoom.svg" alt="svg图片" v-if="action.type==='变焦'" />
                                  <img src="@/assets/images/xuanting.svg" alt="svg图片" v-if="action.type==='悬停'" title="悬停"/>
                                  <img src="@/assets/images/photo.svg" alt="svg图片" v-if="action.type==='拍照'" title="拍照"/>
                                  <img src="@/assets/images/startVideo.svg" alt="svg图片" v-if="action.type==='开始录像'" title="开始录像"/>
                                  <img src="@/assets/images/stopVideo.svg" alt="svg图片" v-if="action.type==='结束录像'" title="结束录像"/>
                                  <img src="@/assets/images/zoom.svg" alt="svg图片" v-if="action.type==='变焦'" title="变焦"/>
                                  <!-- <i v-if="action.type==='拍照'" class="el-icon-video-camera"></i> -->
                                </span>
                              </div>
@@ -102,6 +106,14 @@
let towerHeight = 45
//塔的朝向算法所用到的 旋转度数
let rotationAngle = Cesium.Math.toRadians(0)
const typeDictionary = {
  "拍照": "01",
  "变倍": "02",
  "开始录像": "03",
  '结束录像':'04',
  "悬停": "05",

}
export default{
  name:'shootPointDialog',
   components: {
@@ -136,10 +148,6 @@
        form:{},
        deviceData:null,
        activeName: 'first',
        totalDistance: 3054.9,
        totalTime: '5m 56s',
        totalPoints: 11,
        totalPhotos: 3,
        waypoints:[],
        selectedIndex:null,
        chooseItem: null,
@@ -155,6 +163,7 @@
          console.log(res.data)
          this.getRowData(res.data)
          let drawArr = this.convertToTree(res.data.ardListWayPointsLS)
          console.log(drawArr)
          setTimeout(() => {
            //渲染时间问题 加个延时器
            this.drawLines(drawArr)
@@ -164,24 +173,27 @@
    }
  },  
  methods:{
    toggleSelect(wq,index) {
      this.chooseItem = wq
    toggleSelect(data,index) {
      this.chooseItem = data
      console.log(this.treeData)
      console.log(wq)
      console.log(data)
      // 如果点击的是当前行，则取消选中
      if (this.selectedIndex === index) {
        this.selectedIndex = null
      } else {
        this.selectedIndex = index
      }
      const result = this.treeData.filter(item =>
          item.children && item.children.some(child => child.label === wq.label)
      );
      const dataObj = result[0]
      const from = [dataObj.children[0]?.longitude,dataObj.children[0]?.latitude, dataObj.children[0]?.height]; 
      const to = [dataObj.longitude,dataObj.latitude, dataObj.height]; 
      // const result = this.treeData.filter(item =>
      //     item.children && item.children.some(child => child.label === data.label)
      // );
      // const dataObj = result[0]
      // const from = [dataObj.children[0]?.longitude,dataObj.children[0]?.latitude, dataObj.children[0]?.height]; 
      // const to = [dataObj.longitude,dataObj.latitude, dataObj.height]; 
       const from = [data.children[0].longitude,data.children[0].latitude, data.children[0].height];
        const to = [data.longitude,data.latitude, data.height];      
        // this.flyToAndLookAt(from, to);
      this.flyToAndLookAt(from, to);
      this.$refs.initMap.DealVisualCone(dataObj)
      this.$refs.initMap.DealVisualCone(data)
    },
   // 计算 heading（偏航角）
    computeHeading(fromCartesian, toCartesian) {
@@ -212,7 +224,7 @@
        Cesium.Matrix4.inverseTransformation(transform, new Cesium.Matrix4()),
        direction,
        new Cesium.Cartesian3()
      );
      ); 
      Cesium.Cartesian3.normalize(directionLocal, directionLocal);
      return Math.asin(directionLocal.z); // z轴向上
    },
@@ -251,12 +263,30 @@
    },
    dealTreeData(arrList){
      console.log(arrList)
      console.log(this.treeData)
      console.log(this.lastTableArr)
      this.treeData = arrList
      const childrenArr = arrList
        .filter(item => Array.isArray(item.children))
        .map(item => item.children)
        .reduce((acc, cur) => acc.concat(cur), []);

        //通过右点击 对比之前的动作的数组 把之前动作数组缓存 然后反赋值给新数据
      if(this.lastTableArr?.length >0){
        this.treeData = this.treeData.map(item2 => {
        const matchingItem1 = this.lastTableArr.find(item1 => item1.label === item2.label);
          if (matchingItem1) {
            item2.children = item2.children.map(child2 => {
              const matchingChild1 = matchingItem1.children.find(child1 => child1.label === child2.label);
              if (matchingChild1) {
                // 将 actions 从 array1 复制到 this.treeData
                child2.actions = [...matchingChild1.actions];
              }
              return child2;
            });
          }
          return item2;
        })
      }
      childrenArr?.forEach((ele)=>{
        if(ele.actions) {
        }else {
@@ -315,19 +345,43 @@
      // 2. 每个空中点与地面点用蓝色虚线连接
      treeData.forEach(point => {
        const airPos = Cesium.Cartesian3.fromDegrees(point.longitude, point.latitude, point.height);
        this.addLabel(point)
        point.children.forEach(child => {
          const groundPos = Cesium.Cartesian3.fromDegrees(child.longitude, child.latitude, child.height);
          this.addLabel(child)
          viewer.entities.add({
            polyline: {
              positions: [airPos, groundPos],
              width: 1,
              material: new Cesium.PolylineDashMaterialProperty({
                color: Cesium.Color.BLUE,
                color: Cesium.Color.RED,
                dashLength: 8
              })
            }
          });
        });
      });
    },
    addLabel(point) {
      const position = Cesium.Cartesian3.fromDegrees(
        point.longitude,
        point.latitude,
        point.height
      );
      let viewer = window.viewerM
      // Create a label entity
      viewer.entities.add({
        position: position,
        label: {
          text: point.label,
          font: "14px sans-serif",
          fillColor: Cesium.Color.WHITE,
          backgroundColor: Cesium.Color.BLACK,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          outlineWidth: 2,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM
        }
      });
    },
    addPoint(viewer, position, color, label) {
@@ -410,7 +464,10 @@
    },
    //合并逻辑  将附近n米范围内的点合并 并且处理成数据
    mergePoint(arr,mergeNumber,viewer){
      this.treeData = arr
      console.log(arr)
      console.log(this.treeData)
      // this.treeData = arr
      this.treeData = this.lastTableArr
      const result = this.replaceCloseChildrenWithHighestPoint(this.treeData,mergeNumber);
      // const updated = this.insertRaisedPoints(result, 0,0, 236, 130);
      const updated = this.insertRaisedPoints(result, globalon, globalat, towerHeight);
@@ -450,7 +507,7 @@
      console.log(this.treeData)
    },
    //数组 塔的精度 塔的纬度  塔的高度  半径
    insertRaisedPoints(data, centerLon, centerLat, centerHeight, radius = 10) {
    insertRaisedPoints(data, centerLon, centerLat, centerHeight, radius = 15) {
      const center = Cesium.Cartesian3.fromDegrees(centerLon, centerLat, centerHeight);
      const result = JSON.parse(JSON.stringify(data)); // 深拷贝避免污染原数据
      const inserts = []; // 用于存储插入项及其目标位置
@@ -463,7 +520,8 @@

        const cartA = Cesium.Cartesian3.fromDegrees(pointA.longitude, pointA.latitude, pointA.height);
        const cartB = Cesium.Cartesian3.fromDegrees(pointB.longitude, pointB.latitude, pointB.height);

        console.log(cartA)
        console.log(cartB)
        const closest = this.closestPointOnSegment(cartA, cartB, center);
        const distance = Cesium.Cartesian3.distance(closest, center);
        console.log(distance)
@@ -481,7 +539,9 @@
                ...pointA,
                id: this.generateId(),
                label: pointA.label + "-加高",
                height: pointA.height + 50
                // height: pointA.height + 50,
                height: pointA.height  + (towerHeight  - pointA.height  +  20),
                actions:[]
              }
            ]
          };
@@ -500,7 +560,8 @@
                ...pointB,
                id: this.generateId(),
                label: pointB.label + "-加高",
                height: pointB.height + 50
                height: pointB.height  + (towerHeight  - pointB.height  +  20),
                actions:[]
              }
            ]
          };
@@ -653,7 +714,30 @@
          type: 'warning'
        })
      }
      // this.dialogVisible = false
      console.log(this.$refs.initMap.preVideoScopePrimitiveArrTie)
      console.log(this.treeData)
      console.log(this.waypoints)
      this.$refs.initMap.preVideoScopePrimitiveArrTie.forEach(point => {
          // 遍历原始数据
          this.treeData.forEach(item => {
              item.children.forEach(child => {
                  // 如果名称相同
                  if (child.label === point.name) {
                      // 向 actions 数组的第一项 push zoomRatio
                      console.log(child)
                      console.log(point.primitive)
                      child.actions.unshift({
                          "id": Date.now(), // 使用当前时间作为唯一ID
                          "type": "变倍",
                          "extra": {
                              "value": point.primitive.zoomRatio || 1
                          }
                      });
                  }
              });
          });
      })
      console.log(this.treeData)
      // const dealArr = this.submitDealData()
      const transformed = this.treeData.map((ground, index) => {
        const pointNumber = index + 1;
@@ -667,7 +751,33 @@
              latitude: ground.latitude,
              longitude: ground.longitude,
              pointNumber: 1,
              targetName: ground.label
              targetName: ground.label,
              // actions:child.actions.map((item, index) => ({
              //   actionIndex: index.toString(),
              //   actionType: typeDictionary[item.type] || "", // 如果类型不存在字典中，默认空字符串
              //   actionValue: item.extra.value
              // }))
              actions:child.actions.map(action => {
                console.log(action)
                switch (action.type) {
                  case "悬停":
                    return { hoverTime: parseFloat(action.extra.value) };
                  case "变倍":
                    return { zoom: parseFloat(action.extra.value) };
                  case "开始录像":
                    return { startRecord: true };
                  case "结束录像":
                    return { stopRecord: true };
                  case "拍照":
                    // const [takePhotoType, useGlobalImageFormat] = action.actionValue.split('-');
                    return {
                      takePhotoType: 0,
                      useGlobalImageFormat: 0
                    };
                  default:
                    return {};
                }
              })
            }
          ],
          latitude: child.latitude,
@@ -689,6 +799,7 @@
          message: '新增模板成功',
          type: 'success'
        })
        this.dialogVisible = false
        this.$emit('on-submit')
        this.$emit('close')
      }
@@ -715,11 +826,13 @@
      console.log(this.treeData)
      console.log(this.waypoints)
      console.log(data)
      console.log(this.lastTableArr)
      const byLabel = this.addOrUpdate(this.lastTableArr, data, 'label', this)
      this.waypoints  = this.lastTableArr
      console.log(byLabel)
      console.log(this.lastTableArr)
      console.log( this.waypoints)
      this.treeData = this.lastTableArr
    },
    addOrUpdate(list, newItem, key = 'label', vm = null) {
      let index = list.findIndex(item => item[key] === newItem[key]);
@@ -736,6 +849,33 @@
    },
    clickItem(value){
        this.$refs.initMap.editAction(value);  
    },
    extractNumberFromLabel(label){
      const match = label.match(/(\d+)/); // 获取标签中的数字
      return match ? match[0] : null;
    },
    deleteItem(item){
      this.treeData = this.treeData.filter(obj=>obj.id != item.id)
      this.lastTableArr = this.lastTableArr.filter(obj=>obj.id != item.id)
      const data1LabelNumber = this.extractNumberFromLabel(item.label);

      // 创建一个新的EntityCollection，只保留不匹配的实体
      const filteredEntities = window.viewerM.entities.values.filter(entity => {
        const entityIdNumber =  this.extractNumberFromLabel(entity.id); // 提取实体的id中的数字
        return entityIdNumber !== data1LabelNumber; // 如果数字不一致，保留该实体
      });
      // 清空原来的entities集合并重新添加过滤后的实体
      window.viewerM.entities.removeAll(); // 清空所有实体
      filteredEntities.forEach(entity => window.viewerM.entities.add(entity))
      console.log(item)
      console.log(this.treeData)
       console.log(this.lastTableArr)
      console.log(window.viewerM.entities.values)
      // console.log(window.viewerM.entities.values[0].id)
      // console.log(window.viewerM.entities.values[1].id)
      // console.log(window.viewerM.entities.values[2].id)
      // console.log(window.viewerM.entities.values[3].id)

    }
  }
}
@@ -913,13 +1053,13 @@
  height: 36px;
  line-height: 36x;
  transition: transform 0.2s;
  font-size: 24px; 
  font-size: 22px; 

}


.waypoint-header .waypoint-index {
  font-size: 24px;
  font-size: 22x;
}
.rotated {
  transform: rotate(-90deg);