航线莫你——视锥体更新

jihongshun

2025-09-08 8b89b724b38dd39cfda49b98411619dcecb86beb

航线莫你——视锥体更新

 src/views/system/flightRouteSimulation/index.vue

@@ -30,7 +30,10 @@
      //       latitude:46.55684464616254,    // 纬度
      //       height:33.157873665937274      // 高度(米)
      //     },
      //     speed: 0           // 速度(公里/小时)
      //     heading:0,
      //     pitch:-90,
      //     roll:0,
      //     speed: 10           // 速度(公里/小时)
      //   },
      //   {
      //     time: '2025-04-01T13:01:00Z', // ISO 8601格式时间
@@ -39,6 +42,9 @@
      //       latitude: 46.55684011411894,    // 纬度
      //       height: 37.91924525928209      // 高度(米)
      //     },
      //     heading:30,
      //     pitch:45,
      //     roll:45,
      //     speed: 10           // 速度(公里/小时)
      //   },
      //   {
@@ -49,6 +55,9 @@
      //       latitude: 46.556840114118955,    // 纬度
      //       height:87.91924526022864       // 高度(米)
      //     },
      //     heading:90,
      //     pitch:0,
      //     roll:45,
      //     speed: 20           // 速度(公里/小时)
      //   },
      //   {
@@ -59,6 +68,9 @@
      //       latitude: 46.556326837883375,    // 纬度
      //       height: 83.15663931356488       // 高度(米)
      //     },
      //     heading:180,
      //     pitch:60,
      //     roll:0,
      //     speed: 30           // 速度(公里/小时)
      //   },
      //   {
@@ -68,6 +80,9 @@
      //       latitude: 46.55632683788337,    // 纬度
      //       height: 33.15663931413056       // 高度(米)
      //     },
      //     heading:150,
      //     pitch:0,
      //     roll:45,
      //     speed: 80           // 速度(公里/小时)
      //   },

@@ -84,13 +99,14 @@
      aspectRatio: 1.0,  // 纵横比
      color: '#FF0000',  // 视锥体颜色
      id: 'frustumOutline',
      positionProperty : new Cesium.SampledPositionProperty()
      positionProperty : new Cesium.SampledPositionProperty(),
      orientation : new Cesium.SampledProperty(Cesium.Quaternion)
    }
  },
  mounted() {
    console.log(window.viewer)
    console.log(viewer)
    this.showGZ()
    // this.showGZ()
  },
  methods: {
    async handleKMZUpload(event) {
@@ -121,6 +137,9 @@
              latitude: item.lat,
              height: parseFloat(item.alt)
            },
            heading:item.heading|| 0,
            pitch:item.pitch|| 0,
            roll:item.roll || 0,
            speed: speeds[index] || 0
          };
        });
@@ -166,10 +185,39 @@
      placemarks.forEach(placemark => {
        const coords = placemark.Point?.[0]?.coordinates?.[0];
        const height = placemark["wpml:height"]?.[0];
        // 提取 aircraftHeading
        // 提取 action 里的参数
        let heading = null;
        let gimbalPitch = null, gimbalRoll = null, gimbalYaw = null;

        if (placemark["wpml:actionGroup"]?.[0]?.["wpml:action"]) {
          placemark["wpml:actionGroup"][0]["wpml:action"].forEach(action => {
            let params = action["wpml:actionActuatorFuncParam"]?.[0];

            if (!params) return;

            // 飞机航向角
            if (action["wpml:actionActuatorFunc"]?.[0] === "rotateYaw" &&
                params["wpml:aircraftHeading"]) {
              heading = Number(params["wpml:aircraftHeading"][0]);
            }

            // 云台角度
            if (action["wpml:actionActuatorFunc"]?.[0] === "gimbalRotate") {
              if (params["wpml:gimbalPitchRotateAngle"])
                gimbalPitch = Number(params["wpml:gimbalPitchRotateAngle"][0]);
              if (params["wpml:gimbalRollRotateAngle"])
                gimbalRoll = Number(params["wpml:gimbalRollRotateAngle"][0]);
              if (params["wpml:gimbalYawRotateAngle"])
                gimbalYaw = Number(params["wpml:gimbalYawRotateAngle"][0]);
            }
          });
        }
        if (coords) {
          coords.trim().split(" ").forEach(coord => {
            const [lng, lat] = coord.split(",").map(Number);
            points.push({ lng, lat, alt: height });
            //,heading:gimbalYaw || 0,pitch:gimbalPitch|| 0,roll:gimbalRoll|| 0
            points.push({ lng, lat, alt: height,heading:gimbalYaw || 0,pitch:gimbalPitch|| 0,roll:gimbalRoll|| 0 });
          });
        }
      });
@@ -311,6 +359,7 @@

      // 创建位置和速度属性
      const speedProperty = new Cesium.SampledProperty(Number)

      console.log(">> this.trajectoryData:", this.trajectoryData);
      // 添加采样点
      this.trajectoryData.forEach(data => {
@@ -322,6 +371,16 @@
        )
        this.positionProperty.addSample(time, position)
        speedProperty.addSample(time, data.speed)
            // 计算朝向四元数
        const hpr = new Cesium.HeadingPitchRoll(
            Cesium.Math.toRadians(data.heading),
            Cesium.Math.toRadians(data.pitch),
            Cesium.Math.toRadians(data.roll)
        );
        const quaternion = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);
        
        // // 添加朝向采样
        this.orientation.addSample(data.time, quaternion);
      })
      console.log(">> positionProperty:",this.positionProperty );

@@ -346,7 +405,7 @@
        // },
        model: {
          uri: "/Model/M300.glb", // 注意entitits.add方式加载gltf文件时，这里是uri，不是url，并且这种方式只能加载.glb格式的文件
          scale:  1, // 缩放比例
          scale:  10, // 缩放比例
          // minimumPixelSize: this.minSize, // 最小像素大小，可以避免太小看不见
          minimumPixelSize: 0, // 最小像素大小，可以避免太小看不见
          maximumScale: 20000, // 模型的最大比例尺大小。minimumPixelSize的上限
@@ -369,13 +428,14 @@
          leadTime: 60,
          trailTime: 60
        },
        orientation: Cesium.Quaternion.fromHeadingPitchRoll(
            new Cesium.HeadingPitchRoll(
                Cesium.Math.toRadians(45), // 航向角(正北为0，顺时针增加)
                Cesium.Math.toRadians(45), // 俯仰角
                Cesium.Math.toRadians(0)  // 翻滚角
            )
        ),
        // orientation: Cesium.Quaternion.fromHeadingPitchRoll(
        //     new Cesium.HeadingPitchRoll(
        //         Cesium.Math.toRadians(45), // 航向角(正北为0，顺时针增加)
        //         Cesium.Math.toRadians(45), // 俯仰角
        //         Cesium.Math.toRadians(0)  // 翻滚角
        //     )
        // ),
        orientation:this.orientation
      })
    },
     // 更新视锥体位置和朝向
@@ -397,9 +457,6 @@
            roll: Cesium.Math.toRadians(this.roll),
          },
        });

        // 只在frustumOutline存在时调用update
        this.frustumOutline.update();
      } else {
        console.warn('Frustum outline is not initialized');
      }
@@ -426,9 +483,8 @@
      const currentTime = viewer.clock.currentTime;
      
      // 从 positionProperty 中获取当前位置
      console.log(this.positionProperty)
      const currentPosition = this.positionProperty.getValue(currentTime);

      console.log('currentPosition>>>>>>>>>>>>>>>>>>>>>>>' + currentPosition)
      // 如果获取到位置
      if (currentPosition) {
        // 将位置从 Cartesian 转换为 Cartographic
@@ -439,7 +495,15 @@
        this.currentLatitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
        this.currentHeight = cartographicPosition.height;
        this.c3Position = Cesium.Cartesian3.fromDegrees(this.currentLongitude, this.currentLatitude,this.currentHeight)
        console.log(`当前位置 - 经度: ${this.currentLongitude}, 纬度: ${this.currentLatitude}, 高度: ${this.currentHeight}`);
        // console.log(`当前位置 - 经度: ${this.currentLongitude}, 纬度: ${this.currentLatitude}, 高度: ${this.currentHeight}`);
        const quaternion = this.orientation.getValue(currentTime)
        if (quaternion) {
          const hpr = Cesium.HeadingPitchRoll.fromQuaternion(quaternion)
          this.heading = Cesium.Math.toDegrees(hpr.heading).toFixed(2)
          this.pitch = Cesium.Math.toDegrees(hpr.pitch).toFixed(2)
          this.roll = Cesium.Math.toDegrees(hpr.roll).toFixed(2)
          console.log(`当前位置 - heading: ${hpr.heading}, pitch: ${hpr.pitch}, roll: ${hpr.roll}`);
        }
        this.updateFrustum();
      } else {
        console.log("无法获取当前位置");
@@ -450,7 +514,8 @@
      this.camera = new Cesium.Camera(viewer.scene)
      // 视锥体参数
      this.camera.frustum = new Cesium.PerspectiveFrustum({
        fov: Cesium.Math.PI_OVER_THREE,
        // fov: Cesium.Math.PI_OVER_THREE,
        fov: Cesium.Math.toRadians(10),
        // aspectRatio: this.aspectRatio,
        aspectRatio: 1920 / 1080,
      });
@@ -472,7 +537,8 @@
        camera: this.camera,
        frustumSplits: [0.01, 10000],
        color: Cesium.Color.fromCssColorString('#00ff00'),
        updateOnChange: false,
        // updateOnChange: false,
        updateOnChange: true,
      })
      console.log(this.frustumOutline)
      viewer.scene.primitives.add(this.frustumOutline);

 vue.config.js

@@ -9,7 +9,8 @@

const name = process.env.VUE_APP_TITLE || '电力巡检航线规划'; // 网页标题

const baseUrl = 'http://192.168.1.5:7070'; // 后端接口
// const baseUrl = 'http://192.168.1.5:7070'; // 后端接口
const baseUrl = 'http://192.168.1.25:7070'; // 后端接口

const port = process.env.port || process.env.npm_config_port || 80; // 端口