视锥体

jihongshun

2025-09-06 f103aecc49072551b251c75c4fac12a65940fd40

视锥体

 src/views/system/flightRouteSimulation/index.vue

@@ -1,5 +1,6 @@
<template>
   <div class="app-container">
    <el-button type="primary" @click="showGZ">主要按钮</el-button>
    <input @change="handleKMZUpload" type="file" id="kmzFile" accept=".kmz" class="block w-full text-sm text-gray-500
    file:mr-4 file:py-2 file:px-4
    file:rounded-md file:border-0
@@ -21,62 +22,75 @@
  },
  data(){
    return{
        trajectoryData: [
        {
          time: '2025-04-01T13:00:00Z', // ISO 8601格式时间
          position: {
            longitude: 125.14349012556997,  // 经度
            latitude:46.55684464616254,    // 纬度
            height:33.157873665937274      // 高度(米)
          },
          speed: 0           // 速度(公里/小时)
        },
        {
          time: '2025-04-01T13:01:00Z', // ISO 8601格式时间
          position: {
            longitude: 125.14347355270496,  // 经度
            latitude: 46.55684011411894,    // 纬度
            height: 37.91924525928209      // 高度(米)
          },
          speed: 10           // 速度(公里/小时)
        },
        {
          time: '2025-04-01T13:02:00Z', // ISO 8601格式时间
          position: {
            longitude: 125.14347355270496,  // 经度126.672952 , 45.744238
      // trajectoryData: [
      //   {
      //     time: '2025-04-01T13:00:00Z', // ISO 8601格式时间
      //     position: {
      //       longitude: 125.14349012556997,  // 经度
      //       latitude:46.55684464616254,    // 纬度
      //       height:33.157873665937274      // 高度(米)
      //     },
      //     speed: 0           // 速度(公里/小时)
      //   },
      //   {
      //     time: '2025-04-01T13:01:00Z', // ISO 8601格式时间
      //     position: {
      //       longitude: 125.14347355270496,  // 经度
      //       latitude: 46.55684011411894,    // 纬度
      //       height: 37.91924525928209      // 高度(米)
      //     },
      //     speed: 10           // 速度(公里/小时)
      //   },
      //   {
      //     time: '2025-04-01T13:02:00Z', // ISO 8601格式时间
      //     position: {
      //       longitude: 125.14347355270496,  // 经度126.672952 , 45.744238

            latitude: 46.556840114118955,    // 纬度
            height:87.91924526022864       // 高度(米)
          },
          speed: 20           // 速度(公里/小时)
        },
        {
          time: '2025-04-01T13:03:00Z', // ISO 8601格式时间
          position: {
            longitude: 125.14347246077013,  // 经度126.671715 , 45.739693
      //       latitude: 46.556840114118955,    // 纬度
      //       height:87.91924526022864       // 高度(米)
      //     },
      //     speed: 20           // 速度(公里/小时)
      //   },
      //   {
      //     time: '2025-04-01T13:03:00Z', // ISO 8601格式时间
      //     position: {
      //       longitude: 125.14347246077013,  // 经度126.671715 , 45.739693

            latitude: 46.556326837883375,    // 纬度
            height: 83.15663931356488       // 高度(米)
          },
          speed: 30           // 速度(公里/小时)
        },
        {
          time: '2025-04-01T13:04:00Z', // ISO 8601格式时间
          position: {
            longitude: 125.14347246077013,  // 经度
            latitude: 46.55632683788337,    // 纬度
            height: 33.15663931413056       // 高度(米)
          },
          speed: 80           // 速度(公里/小时)
        },
      //       latitude: 46.556326837883375,    // 纬度
      //       height: 83.15663931356488       // 高度(米)
      //     },
      //     speed: 30           // 速度(公里/小时)
      //   },
      //   {
      //     time: '2025-04-01T13:04:00Z', // ISO 8601格式时间
      //     position: {
      //       longitude: 125.14347246077013,  // 经度
      //       latitude: 46.55632683788337,    // 纬度
      //       height: 33.15663931413056       // 高度(米)
      //     },
      //     speed: 80           // 速度(公里/小时)
      //   },

        // 更多点...
      ],
      //   // 更多点...
      // ],
      trajectoryData:[],
      c3Position:Cesium.Cartesian3.fromDegrees(125.14349012556997, 46.55684464616254,33.157873665937274),
      enableChange:true,
      camera: null,      // Cesium Camera 实例
      frustumOutline: null, // 视锥体
      heading: 0,        // 相机的 heading (朝向)
      pitch: -90, // 相机的 pitch (俯仰)
      roll: 0,           // 相机的 roll (滚转)
      aspectRatio: 1.0,  // 纵横比
      color: '#FF0000',  // 视锥体颜色
      id: 'frustumOutline',
      positionProperty : new Cesium.SampledPositionProperty()
    }
  },
  mounted() {
    console.log(window.viewer)
    console.log(viewer)
    this.showGZ()
  },
  methods: {
    async handleKMZUpload(event) {
@@ -94,6 +108,24 @@
        `;
        this.showFlightPath()
        this.getTowerData()
        const startDate = new Date("2025-04-01T13:00:00Z");
        const speeds = [10, 10, 20, 30, 80, 100, 60, 50, 40, 30, 20, 10]; // 自定义速度

        const result = this.waypoints.map((item, index) => {
          // 每次加一天
          const time = new Date(startDate.getTime() + index * 60 * 1000).toISOString();
          return {
            time,
            position: {
              longitude: item.lng,
              latitude: item.lat,
              height: parseFloat(item.alt)
            },
            speed: speeds[index] || 0
          };
        });
        this.trajectoryData = result
        console.log(result);
        this.loadTimeLine()
      } catch (error) {
        console.error(error);
@@ -278,7 +310,6 @@


      // 创建位置和速度属性
      const positionProperty = new Cesium.SampledPositionProperty()
      const speedProperty = new Cesium.SampledProperty(Number)
console.log(">> this.trajectoryData:", this.trajectoryData);
      // 添加采样点
@@ -289,30 +320,32 @@
          data.position.latitude,
          data.position.height || 0
        )
        positionProperty.addSample(time, position)
        this.positionProperty.addSample(time, position)
        speedProperty.addSample(time, data.speed)
      })
console.log(">> positionProperty:",positionProperty );
      console.log(">> positionProperty:",this.positionProperty );

      let entity = viewer.entities.add({
        show: true,
        position: positionProperty,
        label: {
          show: true,
          font: '18px 微软雅黑',
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          showBackground: false,
          backgroundColor: Cesium.Color.fromCssColorString('#123456').withAlpha(0.5),
          outlineColor: Cesium.Color.fromCssColorString('#00ff00'),
          outlineWidth: 3,
          fillColor: Cesium.Color.fromCssColorString("#000000"),
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.TOP,
          text: '测试文字',
          pixelOffset: new Cesium.Cartesian2(0, -1 * 100),
        },
        position: this.positionProperty,
        id:'lineFly',
        // label: {
        //   show: true,
        //   font: '18px 微软雅黑',
        //   style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        //   showBackground: false,
        //   backgroundColor: Cesium.Color.fromCssColorString('#123456').withAlpha(0.5),
        //   outlineColor: Cesium.Color.fromCssColorString('#00ff00'),
        //   outlineWidth: 3,
        //   fillColor: Cesium.Color.fromCssColorString("#000000"),
        //   horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        //   verticalOrigin: Cesium.VerticalOrigin.TOP,
        //   text: '测试文字',
        //   // pixelOffset: new Cesium.Cartesian2(0, -1 * 100),
        //   pixelOffset: new Cesium.Cartesian2(0, -90)
        // },
        model: {
          uri: "/Model/UAV.glb", // 注意entitits.add方式加载gltf文件时，这里是uri，不是url，并且这种方式只能加载.glb格式的文件
          uri: "/Model/M300.glb", // 注意entitits.add方式加载gltf文件时，这里是uri，不是url，并且这种方式只能加载.glb格式的文件
          scale:  1, // 缩放比例
          // minimumPixelSize: this.minSize, // 最小像素大小，可以避免太小看不见
          minimumPixelSize: 0, // 最小像素大小，可以避免太小看不见
@@ -336,8 +369,114 @@
          leadTime: 60,
          trailTime: 60
        },
        orientation: new Cesium.VelocityOrientationProperty(positionProperty),
        orientation: Cesium.Quaternion.fromHeadingPitchRoll(
            new Cesium.HeadingPitchRoll(
                Cesium.Math.toRadians(45), // 航向角(正北为0，顺时针增加)
                Cesium.Math.toRadians(45), // 俯仰角
                Cesium.Math.toRadians(0)  // 翻滚角
            )
        ),
      })
    },
     // 更新视锥体位置和朝向
    updateFrustum() {
      console.log(this.c3Position)
      console.log(this.pitch)
      console.log(this.heading)
      console.log(this.roll)
      // 更新视锥体位置
      // this.c3Position = Cesium.Cartesian3.fromDegrees(114.169, 22.278, 500);  // 动态更新位置
      if (this.frustumOutline) {
        // 更新相机和视锥体位置
        this.camera.setView({
          up: Cesium.Cartesian3.UNIT_Z,
          destination: this.c3Position,
          orientation: {
            heading: Cesium.Math.toRadians(this.heading),
            pitch: Cesium.Math.toRadians(this.pitch),
            roll: Cesium.Math.toRadians(this.roll),
          },
        });

        // 只在frustumOutline存在时调用update
        this.frustumOutline.update();
      } else {
        console.warn('Frustum outline is not initialized');
      }
      // 更新视锥体边框
      console.log(this.frustumOutline)
      // this.frustumOutline.update();
    },
    listenChange() {
      let viewer =  window.viewer;
      viewer.clock.onTick.addEventListener(() => {
        if (viewer.clock.shouldAnimate) {
          this.getCurrentPosition()
        // 执行动作
        console.log("Clock is running, performing action...");
        // 你的代码逻辑
        } else {
            // 时钟暂停时不执行
            console.log("Clock is paused, no action performed.");
        }
      });
    },
    getCurrentPosition() {
      // 获取当前时间
      const currentTime = viewer.clock.currentTime;
      
      // 从 positionProperty 中获取当前位置
      console.log(this.positionProperty)
      const currentPosition = this.positionProperty.getValue(currentTime);

      // 如果获取到位置
      if (currentPosition) {
        // 将位置从 Cartesian 转换为 Cartographic
        const cartographicPosition = Cesium.Cartographic.fromCartesian(currentPosition);

        // 将经纬度从弧度转换为度
        this.currentLongitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
        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}`);
        this.updateFrustum();
      } else {
        console.log("无法获取当前位置");
      }
    },
    showGZ(){
       let viewer = window.viewer;
      this.camera = new Cesium.Camera(viewer.scene)
      // 视锥体参数
      this.camera.frustum = new Cesium.PerspectiveFrustum({
        fov: Cesium.Math.PI_OVER_THREE,
        // aspectRatio: this.aspectRatio,
        aspectRatio: 1920 / 1080,
      });
      this.camera.setView({
        up: Cesium.Cartesian3.UNIT_Z,
        destination: this.c3Position,
        orientation: {
          // heading: Cesium.Math.toRadians(this.heading),
          // pitch: Cesium.Math.toRadians(this.pitch),
          // roll: Cesium.Math.toRadians(this.roll),
          heading: Cesium.Math.toRadians(this.heading),
          pitch: Cesium.Math.toRadians(this.pitch),
          roll: Cesium.Math.toRadians(this.roll),
        },
      })
      this.frustumOutline = new Cesium.DebugCameraPrimitive({
        // id: this.id,
        id: 111111,
        camera: this.camera,
        frustumSplits: [0.01, 10000],
        color: Cesium.Color.fromCssColorString('#00ff00'),
        updateOnChange: false,
      })
      console.log(this.frustumOutline)
      viewer.scene.primitives.add(this.frustumOutline);
      this.listenChange()
    }

  }

 src/views/system/project/components/addPorjectDialog.vue

@@ -250,6 +250,8 @@
      this.$emit('close')
    },
    flyToLocal(row){

      console.log(row)
       const position = Cesium.Cartesian3.fromDegrees(row.longitude,row.latitude, row.deviceHeight);
      // rotationAngle  = Cesium.Math.toRadians(row.face)  ||  Cesium.Math.toRadians(0)
      rotationAngle  = Cesium.Math.toRadians(row.face)  ||  Cesium.Math.toRadians(0)
@@ -263,7 +265,7 @@
      );

      // 加载 glTF 模型
      const entity = model({
      const entity = viewer.entities.add({
        name: row.id,
        position: position,
        orientation: orientation,

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

@@ -507,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 = []; // 用于存储插入项及其目标位置
@@ -520,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)