Ceisum无人机巡检直播视频投射

原创 已于 2025-10-29 10:10:18 修改 · 2.4k 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#无人机 #cesium #webgis

于 2025-01-21 19:34:10 首次发布

接上次的视频投影，Leader告诉我这个视频投影要用在两个地方，一个是我原先写的轨迹回放那里，另一个在无人机起飞后的地图回显，要实时播放无人机拍摄的视频，还要能转镜头，让我把这个也接一下。
我的天！告诉我的时候人都傻了，这是一个功能嘛？
一个是拿到了全部的轨迹数据进行回显，播放的视频也是完整的资源，视频要求投射在地面上。另一个是接收实时的轨迹数据进行回显，播放的是实时的直播，视频居然还要求跟着镜头一起转。
这是两个完完全全不一样的功能好吧！！！
我拿着标书仔仔细细看过那行“演示无人机画面投影到地图上”，一时间陷入了沉默。
无语归无语，但特么还是要写，跟Leader据理力争这不是改改就能换上的功能，然后争取来两周的研发时间。
两周时间看起来很长，其实也就10天，有时候我写个计算方法都要两天，还不一定是最终版，所以只能拜托接下来运气很好，别让我遇到太多阻碍。
开工吧！

Step 0：
思路：最初都是想要拿原来的方法改改看，哪怕不成功，也绝了这个念想。
首先要解决的是视频投放的问题，原本这个投影方法只能投放视频，且只能投影到地面，我要优化成能投影直播并且不接触地面也能投放。
在这里插入图片描述
为了解决直播投放问题，我尝试修改了源码，发现困难重重，主要是两点，一个是原方法不依赖dom元素，这意味着我不能暴力篡改成直播通道，另一个是封装层级过多，我想在某几个关键步骤看下效果都不能被满足，只能盲写看最终效果。
卡在第一步我是万万没有想到，经过一下午的尝试，最终让我放弃了继续下去的想法。

Step0.1：当然，我也没有急着完全放弃之前的代码，我还记得我czml的无人机轨迹方法已经很完善了，从静态路径加载改为动态路径回显似乎并不难，如果成功的话只需要给视频材质连四根线，接着解决朝向转动的问题就完成了，大大减轻了工作量。

在这里插入图片描述
我将原有轨迹数据做成坐标发射器，通过动态接收点位组成路径，每次接收到数据就更新czml加载的点位集合，成功改成了动态路径回显。
然后我尝试将我之前做好的视椎体视频替换进去，然后切换朝向，发现在dataSource.then中格外难操作矩阵，需要多考虑很多问题，于是暂时搁置该方法，等待重启机会。

旧路已死，新步骤开始从0开始一点点搭建功能。

Step 1:
思路： 选择实体结合时间轴，更为灵活地构建动画，同时代码将更繁琐。
首先写一段简单动画，从一个点到另一个点。
在这里插入图片描述

部分代码：

var startPosition = Cesium.Cartesian3.fromDegrees(-75.0, 40.0, 1000.0);
var endPosition = Cesium.Cartesian3.fromDegrees(-75.0, 42.0, 1000.0);

// 设置时间范围
var startTime = Cesium.JulianDate.now();
var endTime = Cesium.JulianDate.addSeconds(
  startTime,
  15,
  new Cesium.JulianDate()
);

// 创建一个 SampledPositionProperty 来定义路径
var positionProperty = new Cesium.SampledPositionProperty();

// 添加时间和位置样本
positionProperty.addSample(startTime, startPosition);
positionProperty.addSample(endTime, endPosition);

// 创建一个 entity 并设置其 position 为定义的路径
var entity = viewer.entities.add({
  position: positionProperty,
  point: {
    pixelSize: 10,
    color: Cesium.Color.RED,
  },
});

// 使视图跟踪 entity
viewer.trackedEntity = entity;

// 设置时钟范围
viewer.clock.startTime = startTime.clone();
viewer.clock.stopTime = endTime.clone();
viewer.clock.currentTime = startTime.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 当到达结束时间时停止
viewer.clock.multiplier = 1; // 时间加速倍率
viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;
viewer.clock.shouldAnimate = true;

Step 2:
思路：两个点变多个点，写一个点位生成器，模拟实时接收数据，实现多点位连续飞行
在这里插入图片描述

Step 3:
思路：模拟点位飞行，点换成模型，视椎体跟随模型一起，并封装成class，效果很好，但视角连贯性有待提高
在这里插入图片描述
部分代码：

class PointMover {
  constructor(viewer) {
    this.viewer = viewer;
    this.pointQueue = [];
    this.isAnimating = false;
    this.videoEntity = null;

    // 添加模型
    this.entity = ...

    // 添加视椎体
    this.frustumPrimitive = viewer.scene.primitives.add(
      new Cesium.Primitive({
        geometryInstances: new Cesium.GeometryInstance({
          geometry: geo,
          attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(
              Cesium.Color.RED.withAlpha(0.5)
            ),
          },
        }),
        appearance: new Cesium.PerInstanceColorAppearance({
          translucent: true,
          flat: true,
        }),
        asynchronous: false,
      })
    );
    // 初始化视频材质
    this.videoEntity = viewer.entities.add({
      name: "uav-tmp-fly-wxsimple",
      polygon: {
        hierarchy: new Cesium.CallbackProperty((time) => {
          // 添加安全检查
          if (!this.entity || !this.entity.position) {
            return null;
          }

          try {
            const position = this.entity.position.getValue(time);
            if (!Cesium.defined(position)) {
              return null;
            }

            // 计算视锥体的远截面四个角点

            // 返回新的多边形层次结构
            return new Cesium.PolygonHierarchy([
              upRightPt,
              upLeftPt,
              downLeftPt,
              downRightPt,
            ]);
          } catch (error) {
            console.warn("Error calculating polygon positions:", error);
            return null;
          }
        }, false),
        perPositionHeight: true,
        material: videoElement,
        // 添加其他属性以提高渲染性能
        shadows: Cesium.ShadowMode.DISABLED,
        classificationType: Cesium.ClassificationType.BOTH,
        zIndex: 999,
      },
    });
    // 内部方法：启动动画
    startAnimation() {
      if (this.pointQueue.length > 2 && !this.isAnimating) {
        // 在 onTick 事件处理函数中更新视锥体位置
        const onTick = (clock) => {
          // 移除旧的视锥体
          // 添加新的视锥体

          // ...
        }
        // 添加 onTick 事件监听器
        this.viewer.clock.onTick.addEventListener(onTick);
      }
    }
    // 外部调用方法：更新点位并启动动画
    updatePositionsAndAnimate(newPosition) {
      this.pointQueue.push(newPosition);
      if (!this.isAnimating) {
        this.startAnimation();
      }
    }
  }
}

Step 4:
思路：加入虚线路径
在这里插入图片描述
部分代码：

class PointMover {
  constructor(viewer) {
    this.viewer = viewer;
    this.pointQueue = [];
    this.isAnimating = false;
    this.videoEntity = null;
    this.pathPoints = []; // 用于记录路径点
    this.pathPolyline = null; // 用于绘制路径

    // ...
  }
  // 绘制路径的方法
  createPathPolyline() {
    this.pathPolyline = this.viewer.entities.add({
      polyline: {
        positions: new Cesium.CallbackProperty((time) => {
          // 取当前记录的路径点
          return this.pathPoints;
        }, false),
        material: new Cesium.PolylineDashMaterialProperty({
          dashLength: 16.0, // 虚线的长度
        }),
        width: 3,
      },
    });
  }

  // 更新路径并添加新的位置
  updatePath(newPosition) {
    this.pathPoints.push(newPosition); // 将新位置加入到路径点

    // 更新虚线的路径
    if (this.pathPolyline) {
      this.pathPolyline.polyline.positions = new Cesium.CallbackProperty(
        (time) => {
          return this.pathPoints;
        },
        false
      );
    }
  }
  // 内部方法：启动动画
  startAnimation() {
    if (this.pointQueue.length > 2 && !this.isAnimating) {
      // 在 onTick 事件处理函数中更新视锥体位置
      const onTick = (clock) => {
       // 将当前位置添加到路径数组
       this.updatePath(currentPosition);

       //...
      }
    }
  }
}

Step 4延伸:
思路：在Step 4基础上尝试扩展，显隐,销毁 show的配合
在这里插入图片描述
部分代码：

class PointMover {
  constructor(viewer, show) {
    this.viewer = viewer;
    this.pointQueue = [];
    this.isAnimating = false;
    this.videoEntity = null;
    this.pathPoints = [];
    this.pathPolyline = null; 
    this.isFrustumShow = show; //用于显隐控制

    // ...

    if (this.frustumPrimitive) {
      if (!this.isFrustumShow) {
        this.frustumPrimitive.show = false;
      } else {
        this.frustumPrimitive.show = true;
      }
    }
    if (this.videoEntity) {
      if (!this.isFrustumShow) {
        this.videoEntity.show = false;
      } else {
        this.videoEntity.show = true;
      }
    }
    
  }
  // 内部方法：启动动画
  startAnimation() {
    if (this.pointQueue.length > 2 && !this.isAnimating) {
      // 在 onTick 事件处理函数中更新视锥体位置
      const onTick = (clock) => {
       // 将当前位置添加到路径数组

       //...
       this.frustumPrimitive = this.viewer.scene.primitives.add(
          new Cesium.Primitive({
            geometryInstances: new Cesium.GeometryInstance({
              geometry: newGeometry,
              attributes: {
                color: Cesium.ColorGeometryInstanceAttribute.fromColor(
                  Cesium.Color.RED.withAlpha(0.5)
                ),
              },
            }),
            appearance: new Cesium.PerInstanceColorAppearance({
              translucent: true,
              flat: true,
            }),
            asynchronous: false,
          })
        );
        if (this.frustumPrimitive) {
          if (!this.isFrustumShow) {
            this.frustumPrimitive.show = false;
          } else {
            this.frustumPrimitive.show = true;
          }
        }
        if (this.videoEntity) {
          if (!this.isFrustumShow) {
            this.videoEntity.show = false;
          } else {
            this.videoEntity.show = true;
          }
        }
      }
    }
  }
  // ...
  // 外部调用方法，更新显隐开关
  updateVisibleAndHidden(val) {
    this.isFrustumShow = val;
  }
  dispose() {
    if (this.frustumPrimitive) {
      viewer.scene.primitives.remove(this.frustumPrimitive);
      this.frustumPrimitive = null;
    }
    if (this.videoEntity) {
      viewer.entities.remove(this.videoEntity);
      this.videoEntity = null;
    }
    if (this.entity) {
      viewer.entities.remove(this.entity);
      this.entity = null;
    }
    if (this.pathPolyline) {
      viewer.entities.remove(this.pathPolyline);
      this.pathPolyline = null;
    }
  }
}
if (this.pointMover) {
  clearInterval(this.intervalId);
  this.intervalId = null;
  this.pointMover.dispose();
  this.pointMover = null;
}
this.pointMover = new PointMover(viewer, this.isFrustumShow);

Step 5:
思路：尝试改变视椎体朝向
在这里插入图片描述
部分代码：

class PointMover {
  constructor(viewer) {
    // ...
    this.currentHeading = 0;
    this.currentPitch = 0;
    this.currentRoll = 0;

    // ...
  }
 
  // 内部方法：启动动画
  startAnimation() {
    if (this.pointQueue.length > 2 && !this.isAnimating) {
      // 在 onTick 事件处理函数中更新视锥体位置
      const onTick = (clock) => {
        const heading = Cesium.Math.toRadians(this.currentHeading); // 偏航角
        const pitch = Cesium.Math.toRadians(this.currentPitch); // 俯仰角
        const roll = Cesium.Math.toRadians(this.currentRoll); // 翻滚角

        // 创建一个HeadingPitchRoll对象
        const headingPitchRoll = new Cesium.HeadingPitchRoll(
          heading,
          pitch,
          roll
        );

        // 创建一个旋转矩阵
        const rotationMatrix =
          Cesium.Transforms.headingPitchRollToFixedFrame(
            currentPosition,
            headingPitchRoll,
            Cesium.Ellipsoid.WGS84
          );

        // 从旋转矩阵计算四元数
        const orientation =
          Cesium.Quaternion.fromRotationMatrix(rotationMatrix);

        //...
      }
    }
  }
  // ...
  updateHeadingPitchRoll(heading, patch, roll) {
    this.currentHeading = heading;
    this.currentPitch = patch;
    this.currentRoll = roll;
  }
}

Step 5延伸:
思路：在Step 5基础上尝试，同样矩阵转动视频材质
在这里插入图片描述
发现视频材质无法贴合视椎体，方案终止

Step 6:
思路：换用另一种视椎体构建方法，采用相机视角重置视椎体视角的方法，消除地理位置的影响
在这里插入图片描述
部分代码：

class PointMover {
  constructor(viewer) {
    // ...
    this.videoEntity = viewer.entities.add({
      name: "uav-tmp-fly-wxsimple",
      polygon: {
        hierarchy: new Cesium.CallbackProperty((time) => {
          if (!this.entity || !this.entity.position) {
            return null;
          }

          try {
            const position = this.entity.position.getValue(time);
            if (!Cesium.defined(position)) {
              return null;
            }

            let frustum = this.camera.frustum;
            let Cartesian3 = Cesium.Cartesian3;
            let camera = this.camera;

            // ...

            return new Cesium.PolygonHierarchy([
              upRightPt,
              upLeftPt,
              downLeftPt,
              downRightPt,
            ]);
          } catch (error) {
            console.warn("Error calculating polygon positions:", error);
            return null;
          }
        }, false),
        perPositionHeight: true,
        material: new Cesium.ImageMaterialProperty({
          image: videoElement, // 这里传入视频元素
          transparent: true, // 设置透明
          repeat: new Cesium.Cartesian2(1.0, 1.0), // 控制重复
        }),
        shadows: Cesium.ShadowMode.DISABLED,
        classificationType: Cesium.ClassificationType.BOTH,
        zIndex: 999,
      },
    });
  }
 
  // 内部方法：启动动画
  startAnimation() {
    if (this.pointQueue.length > 2 && !this.isAnimating) {
      // 在 onTick 事件处理函数中更新视锥体位置
      const onTick = (clock) => {
        var scene = this.viewer.scene;  
        this.camera = new Cesium.Camera(scene)

        //...
      }
    }
  }
  // ...
}

最终
接入实际项目，无人机航拍镜头实时同步反显，完结撒花°˖✧◝(⁰▿⁰)◜✧˖°
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

cesium 视频投射（低空经济视频跟随）
God's asylum的博客
09-22 411
摘要 本文介绍了基于Cesium平台的无人机视频投射技术实现方案。通过阴影映射投影原理，将视频源视为光源，使用PCF滤波技术实现柔和阴影边界效果。关键技术包括深度值线性化处理、纹理坐标精准映射和混合系数控制。系统支持视频与3D场景的实时对齐，可调节投影透明度、视角范围等参数（FOV 60度，投影距离0.5-1000米）。提供的源码包含初始化模块、坐标转换模块和视频3D投影核心模块，支持从JSON文件加载飞行轨迹数据，实现动态视频跟随效果。
Cesium高级开发教程之五十一：视频投放
Cesium开发工程师
03-22 284
【代码】Cesium高级开发教程之五十一：视频投放。
cesium无人机航拍视频投影跟随
02-19
使用cesium开发的视频投影，让其跟随无人机模型移动而移动旋转，可以设置视频投影的角度，俯仰角等参数，目前无人机移动我是通过加定时器更新无人机经纬度来模拟飞行，下载回来自行更改。 注意：有几处地方需要你手动更换 1、视频地址 2、cesium的token 3、无人机模型（我现在使用的是官方提供的无人机模型）
cesium实现视频融合（视频投影）
最新发布
weixin_72050476的博客
09-02 981
他在空中的时候会投射到视锥体的远截面，当视线投到地面的时候会自动附着到地面。可以很好的融合地形。
cesium 实时地图叠加，实时影像回传绘制
qq_41400354的博客
03-28 1428
应用场景，无人机或者卫星实时传回的影像，实时显示。一般传回来的图需要经过服务器处理，然后再提供给显示端。可以提供所示区域包围盒范围内的地图。蓝色所示区域地图是在不断更新中的怎么能保证，加载到最新的地图了？暂时想的是，有新区域影像形成时，通过通信的方式告知需重新绘制地图。即重新加载图层，将前一个图层清除。
Cesium 无人机航线规划
资深三维GIS开发
04-12 9071
从去年的时候就打算仿大疆开发一套完整的平台，包括无人机app以及仿司空2的管理平台，集航线规划、任务派发、实时图像、无人机管理等功能的平台。下面是基于Cesium开发的航线编辑功能，后面会对这个这个模块的实现进行记录，供大家参考。2、web端实时编辑航线，编辑好的航线直接派发到无人机，无人机按照编辑航线进行作业；具体操作大家可以参考司空2的平台，后续我会将此功能放到线上，大家也可以体验。当前我做的是三维空间的航线编辑，还有种方式是快速编辑（此处不做说明）。⬆ -- 镜头抬升。⬇ -- 镜头降低。
Cesium 无人机巡检实时视频投射及模拟数据采集
资深三维GIS开发
11-03 7210
用投射做了两个功能，一个是模拟无人机巡检，展示当前无人机的实时视频流，并且展示当前无人机的拍摄轨迹及范围。
Ceisum无人机巡检视频投影
daimaxiaodao的博客
11-01 2581
实现视频投影的艰辛路程
SuperMap iClient3D for Cesium视频投放
JJSXBL的博客
09-28 2060
把监控视频投放到三维实景中，可以将静态的三维数据实现动态的显示效果，可以极大方便一些区域的查看和监管，该文章记录该投放的实现过程，使用SuperMap相关软件和服务，以供入门参考。
Cesium无人机实时视频投射及关键点拍照展示
资深三维GIS开发
11-02 3921
接入实时无人机数据，进行无人机作业时的web端三维展示
Cesium 视频投射
北京-giser的博客
08-22 1227
Cesium 视频投射
cesium视频投影功能，视频投放，m3u8视频流接入投放
04-20
cesium视频投影功能，视频投放，m3u8视频流接入投放，集成vue项目，定义三角视锥等
无人机巡检-基于无人机的高速公路违章检测算法实现-附项目源码-优质项目实战.zip
10-20
无人机巡检技术近年来在多个领域得到广泛应用，尤其在高速公路违章检测方面展现出了其独特的效率和优势。高速公路作为国家交通网的重要组成部分，其安全运营直接关系到交通的畅通与人民生命财产安全。然而，传统的...
电网无人机巡检解决方案33页PPT.pptx
02-25
电网无人机巡检解决方案
cesium 视频投影
renkangever的博客
11-17 2457
<video id="myVideo" muted="" autoplay="" loop="" crossorigin="" controls=""> <source src="video.mp4" type="video/mp4"> </video> // 获取视频元素 const videoElement = document.getElementById("myVideo"); videoElement.style.display = 'none'; .
【亲测免费】 探索Cesium视频投影功能的无限可能
gitblog_09729的博客
10-28 453
探索Cesium视频投影功能的无限可能 去发现同类优质开源项目:https://gitcode.com/ 项目介绍 在现代地理信息系统（GIS）和三维可视化领域，Cesium已经成为了一个不可或缺的工具。它不仅提供了强大的三维地球渲染能力，还支持丰富的数据可视化功能。然而，如何在Cesium中实现视频投影，尤其是在复杂的三维场景中，一直是一个技术挑战。为了解决这一问题，我们推出了一个专门针对Ces...
Cesium深入浅出之视频投影
Helsing的专栏
09-14 9050
引子 中间有事，耽搁了好久才更新。这一篇要做的是视频投影，也有视频投射、视频融合之类的叫法。本篇内容比较简单，仅停留在出效果的层面，所以想要高级应用的小盆友可别扔我鸡蛋啊，待我日后好好研究一番再来补上。要知道，要做到视频与模型真正的融合可不是一件简单的事情，不夸张地说，申请个专利都是没问题的。现在嘛，入门级实现，先讲究看着吧。 预期效果 实现原理 开篇就说了，咱们这篇是入门级的，所以原理非常简单，用一句话来描述，就是给一个Geometry附上材质，然后贴到地图上。涉及到的API内容也比较少，Ma
cesium视频投影
军魂L
02-18 1029
cesium.js视频投影动态跟随无人机移动而移动
cesium教程7-航迹模拟(无人机轨迹模拟飞行)
weshmily前端
12-15 9991
航迹模拟-----模拟真实无人机飞行的轨迹和云台的拍摄方向,到达指定的拍摄点返回拍摄点的ID,用于显示对应拍摄点的照片或者视频
无人机视频直播流Ar投射经纬度坐标
08-28
在无人机视频直播流中实现AR技术投射经纬度坐标，涉及多个关键技术环节，包括视频流的获取与处理、坐标系统的转换、AR叠加以及实时渲染等。以下为实现方法的详细说明： ### 1. 获取无人机视频流 无人机通常通过Wi-Fi、4G/5G或专用通信链路传输视频流。开发者可以通过无人机SDK（如大疆DJI SDK）获取实时视频流，并在本地或云端进行处理。视频流通常以RTSP或RTMP协议传输，可通过FFmpeg等工具进行解码和处理。 ### 2. 获取无人机的实时位置与姿态信息 为了将经纬度坐标正确投射到视频画面中，必须获取无人机的实时GPS坐标（经度、纬度、海拔）以及姿态数据（俯仰角、偏航角、滚转角）。这些数据通常由无人机的飞控系统提供，并可通过SDK访问。 ### 3. 坐标转换与空间映射 将目标经纬度坐标转换为相对于无人机摄像头的屏幕坐标，涉及多个坐标系统的转换： - **地理坐标（WGS84）到地心坐标（ECEF）的转换**：使用CesiumJS等3D地图引擎提供的坐标转换工具可以实现该步骤[^1]。 - **ECEF坐标到摄像机坐标系的转换**：基于无人机的姿态和位置，将世界坐标系中的点转换为摄像机视角下的坐标。 - **摄像机坐标到图像像素坐标的转换**：使用相机内参矩阵（焦距、主点、畸变参数等）将3D空间点投影到2D图像平面上。 ```python # 示例：将经纬度转换为ECEF坐标（Python） import math def latlon_to_ecef(lat, lon, alt): # WGS84椭球参数 a = 6378137.0 # 赤道半径 e = 8.1819190842622e-2 # 偏心率 lat_rad = math.radians(lat) lon_rad = math.radians(lon) N = a / math.sqrt(1 - e**2 * math.sin(lat_rad)**2) x = (N + alt) * math.cos(lat_rad) * math.cos(lon_rad) y = (N + alt) * math.cos(lat_rad) * math.sin(lon_rad) z = ((N * (1 - e**2)) + alt) * math.sin(lat_rad) return x, y, z ``` ### 4. AR图层叠加 在视频帧上叠加AR元素（如经纬度标签、图标等）通常使用OpenCV或OpenGL等图像处理库。可将计算得到的屏幕坐标作为锚点，在视频帧上绘制文本或图形。 ```python # 示例：使用OpenCV在图像上绘制文本 import cv2 import numpy as np frame = cv2.imread('video_frame.jpg') # 假设当前帧已读取 text_position = (int(x_pixel), int(y_pixel)) # 由坐标转换得到的像素坐标 cv2.putText(frame, f'Lat: {lat}, Lon: {lon}', text_position, cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 255, 0), 2) ``` ### 5. 实时渲染与传输 将叠加AR图层后的视频帧重新编码并通过RTMP或WebRTC协议推流，供观众实时观看。可使用FFmpeg或GStreamer进行高效编码与传输。 ##
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值