随着行业无人机的普及,"视频 + GIS"(Video AR)的需求在安防、巡检、应急指挥场景中越来越高频。
所谓 Video AR,简单说就是把无人机实时/回放的视频,"贴"在三维地图(如 Cesium)的对应位置上。让操作员既能看到真实的视频画面,又能看到视频中对应的地理信息(路网、标注、POI)。
听起来原理很简单:拿到无人机的位置和姿态,把地图摄像机摆过去不就行了?
"能做出来"和"能用"是两码事。 今天我们就来复盘一下,如何从零实现一个 Video GIS 系统,以及如何解决那些让开发者头秃的"对不准、飘移、画面乱转"等核心痛点。

第一部分:如何实现?(基础篇)
实现一套视频融合系统,核心在于**"双层叠加"与"时空同步"。我们的技术栈选用 Vue3 +Cesium。 核心就是地图的视角和无人机视频的视角同步**
1. 布局:三明治结构
我们不需要复杂的贴图技术,最简单的实现方式反而是最高效的:
- 底层:HTML
<video>标签,播放无人机拍摄的 MP4。 - 上层:
div容器承载 Cesium 地图,背景设为透明。 - 效果:地图悬浮在视频之上,地图的视口(Camera)模拟无人机的视口。
注意的点:视频的大小要和地图视角的大小比例相同,这样才能 cesium 的 fov 能和视频真正的 fov 进行同步
<div class="ar-container">
<!-- 1. 视频层 -->
<video src="drone.mp4" class="bg-video"></video>
<!-- 2. 地图层 (背景透明) -->
<div id="mars3d-container" class="map-overlay"></div>
</div>
2. 数据:解码 SRT 轨迹
大疆无人机的视频通常带有 SRT 字幕文件,里面隐藏了我们最需要的核心数据:
- 经纬度/高度:无人机在哪?



