基于 Vue 3 + Cesium 的 DJI 无人机航线规划系统技术实践

本文介绍了一个基于 Vue 3 和 CesiumJS 的 DJI 无人机航线规划工具的开发过程，重点讲解 3D 地图可视化、坐标系统转换、KMZ 航线文件生成等核心技术实现。

前言

随着无人机技术的普及，自动化航线规划成为行业应用的关键需求。本文分享了一个DJI 航线生成器的开发经验，这是一个基于 Web 的无人机航线规划工具，支持生成符合 WPML 1.0.6 标准的 KMZ 航线文件，可直接导入大疆司空 2 和 Matrice 系列无人机。

一、项目背景与技术选型

1.1 业务需求

在电力巡检、安防监控、测绘等领域，无人机自动化作业需要：

• 可视化的航线规划界面

• 精确的地理坐标系统

• 符合行业标准的航线文件

• 支持多种航线类型（巡逻、面状扫描等）

1.2 技术选型

经过对比分析，我们选择了以下技术栈：

前端框架：

• Vue 3.5：Composition API 提供更好的代码组织

• Vite 5.4：快速的开发服务器和构建工具

地图引擎：

• CesiumJS 1.135：强大的 3D 地球引擎，支持地形、影像等多种数据

• Vue-Cesium 3.2：Cesium 的 Vue 封装，简化集成

底图服务：

• 高德地图/天地图：国内覆盖好，更新及时（需注意坐标系问题）

工具库：

• JSZip：KMZ 文件压缩/解压

• UnoCSS：原子化 CSS，提升开发效率

二、系统架构设计

2.1 整体架构

三、核心技术实现

3.1 坐标系统转换

问题背景

项目面临的最大挑战是坐标系不一致：

• 高德地图使用 GCJ-02（火星坐标系）

• DJI 设备使用 WGS84（GPS 坐标系）

• 两者在中国境内存在 100-700 米偏移

解决方案

我们实现了完整的坐标转换流程：

// utils/coordTransform.js

/**
 * GCJ-02 转 WGS84
 * @param {number} lng - 经度
 * @param {number} lat - 纬度
 * @returns {Object} - {lng, lat}
 */
export function gcj02ToWgs84(lng, lat) {
  if (!isChinaArea(lng, lat)) {
    return { lng, lat }
  }
  
  let dLat = transformLat(lng - 105.0, lat - 35.0)
  let dLng = transformLng(lng - 105.0, lat - 35.0)
  
  const radLat = lat / 180.0 * Math.PI
  let magic = Math.sin(radLat)
  magic = 1 - 0.190284675272 * magic * magic
  magic = Math.sqrt(magic)
  
  const dLngFactor = (dLng * 180.0) / ((6378137.0 * Math.PI) * magic)
  const dLatFactor = (dLat * 180.0) / ((6378137.0 * Math.PI) / magic)
  
  return {
    lng: lng - dLngFactor,
    lat: lat - dLatFactor
  }
}

/**
 * WGS84 转 GCJ-02
 */
export function wgs84ToGcj02(lng, lat) {
  if (!isChinaArea(lng, lat)) {
    return { lng, lat }
  }
  
  const dLat = transformLat(lng - 105.0, lat - 35.0)
  const dLng = transformLng(lng - 105.0, lat - 35.0)
  
  return {
    lng: lng + dLng,
    lat: lat + dLat
  }
}

数据流设计：

1. 前端存储：统一使用 GCJ-02（与高德地图一致）

2. 地图显示：直接使用 GCJ-02（无偏移）

3. KMZ 导出：转换为 WGS84（DJI 标准）

这样确保了：

• ✅ 前端点击位置和显示位置完全一致

• ✅ 导入 DJI 设备后位置准确无偏移

3.2 Cesium 地图集成

3.2.1 基础配置

<!-- MapViewer.vue -->
<template>
  <div class="map-viewer">
    <vc-viewer
      ref="viewerRef"
      :base-layer-provider="tiandituProvider"
      :zoom-out-on-double-click="false"
      :selection-indicator="false"
      :focus-button-indicator="false"
      @ready="onViewerReady"
      @click="onMapClick"
    >
      <!-- 天地图影像 -->
      <vc-imagery-provider-tianditu
        :api-key="tiandituKey"
        :type="'img'"
        :token="tiandituKey"
      />
      
      <!-- 天地图注记 -->
      <vc-imagery-provider-tianditu
        :api-key="tiandituKey"
        :type="'cva'"
        :token="tiandituKey"
      />
    </vc-viewer>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const viewerRef = ref(null)
const tiandituKey = 'your_tianditu_api_key'

const onViewerReady = ({ viewer }) => {
  // 配置相机
  viewer.scene.camera.percentageChanged = 0.01
  viewer.scene.camera.changed.addEventListener(() => {
    // 相机移动回调
  })
  
  // 禁用默认交互
  viewer.scene.screenSpaceCameraController.enableRotate = true
  viewer.scene.screenSpaceCameraController.enableTilt = true
}

const onMapClick = (position) => {
  // 处理地图点击
  const cartesian = viewer.camera.pickEllipsoid(position)
  const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
  const lng = Cesium.Math.toDegrees(cartographic.longitude)
  const lat = Cesium.Math.toDegrees(cartographic.latitude)
  
  // 添加航点逻辑...
}
</script>

3.2.2 航点可视化

使用 Cesium Entity API 实现航点、航线、视锥的可视化：

// 添加航点标记
viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(lng, lat, height),
  billboard: {
    image: '/images/plane.png',
    scale: 0.5,
    rotation: Cesium.Math.toRadians(yaw), // 飞行器偏航角
    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
  }
})

// 添加航线路径
viewer.entities.add({
  polyline: {
    positions: positionArray,
    width: 3,
    material: new Cesium.PolylineGlowMaterialProperty({
      glowPower: 0.2,
      color: Cesium.Color.fromCssColorString('#3b82f6')
    })
  }
})

// 添加视锥体（相机视角范围）
import { FrustumVisualization } from '@/utils/FrustumVisualization'

const frustum = new FrustumVisualization(viewer)
frustum.update({
  position: { lng, lat, height },
  heading: gimbalYaw,  // 云台偏航角
  pitch: gimbalPitch,  // 云台俯仰角
  zoom: cameraZoom
})

3.3 S 形扫描路径生成算法

面状航线的核心是自动生成 S 形扫描路径，算法流程如下：

// utils/routePlanner.js

/**
 * 生成 S 形扫描路径
 * @param {Array} polygon - 多边形顶点 [{lng, lat}, ...]
 * @param {Object} options - 配置参数
 * @returns {Array} - 航点列表
 */
export function generateScanPath(polygon, options) {
  const {
    scanSpacing = 20,      // 扫描间距（米）
    scanDirection = 0,     // 航线方向（度）
    borderShrink = 0,      // 边界内缩（米）
    overlapRate = 0.8      // 重叠率
  } = options
  
  // 1. 坐标投影：经纬度 -> 平面坐标（米）
  const projectedPolygon = polygon.map(point => 
    projectToPlane(point.lng, point.lat)
  )
  
  // 2. 多边形收缩（根据边距参数）
  const shrunkPolygon = shrinkPolygon(projectedPolygon, borderShrink)
  
  // 3. 坐标旋转（根据方向角）
  const rotatedPolygon = rotatePolygon(shrunkPolygon, scanDirection)
  
  // 4. 计算边界框
  const bbox = calculateBoundingBox(rotatedPolygon)
  
  // 5. 生成扫描线
  const scanLines = []
  for (let y = bbox.minY; y <= bbox.maxY; y += scanSpacing) {
    const line = {
      start: { x: bbox.minX, y },
      end: { x: bbox.maxX, y }
    }
    scanLines.push(line)
  }
  
  // 6. 计算扫描线与多边形的交点
  const intersections = scanLines.map(line =>
    intersectLineWithPolygon(line, rotatedPolygon)
  )
  
  // 7. S 形连接交点
  const waypoints = connectInSPattern(intersections)
  
  // 8. 反向旋转，恢复原坐标系
  const restoredWaypoints = waypoints.map(point =>
    rotatePoint(point, -scanDirection)
  )
  
  // 9. 坐标还原：平面坐标 -> 经纬度
  const result = restoredWaypoints.map(point => {
    const { lng, lat } = projectFromPlane(point.x, point.y)
    return { lng, lat, height: options.flightHeight }
  })
  
  return result
}

/**
 * S 形连接交点
 */
function connectInSPattern(intersections) {
  const waypoints = []
  
  for (let i = 0; i < intersections.length; i++) {
    const points = intersections[i]
    
    // 偶数行：从左到右
    if (i % 2 === 0) {
      points.sort((a, b) => a.x - b.x)
    } 
    // 奇数行：从右到左
    else {
      points.sort((a, b) => b.x - a.x)
    }
    
    waypoints.push(...points)
  }
  
  return waypoints
}

算法关键点：

1. 坐标投影：使用 Web Mercator 投影，将经纬度转换为平面坐标

2. 多边形收缩：使用向量法向内收缩边界

3. 扫描线生成：等间距平行线

4. 交点计算：射线法判断交点

5. S 形连接：减少无人机转弯次数，提高效率

3.4 KMZ 文件生成

KMZ 文件是符合 DJI WPML 1.0.6 标准的压缩文件，包含：

• wpmz/template.kml：任务配置

• wpmz/waylines.wpml：航线定义

3.4.1 下载文件

<script setup>
import { KmzGenerator } from '@/utils/kmzGenerator'

const generateAndDownload = async () => {
  const generator = new KmzGenerator()
  
  const mission = {
    droneEnumValue: 99,  // Matrice 4T
    payloadEnumValue: 85,
    flightSpeed: 10,
    flightHeight: 60,
    takeoffHeight: 20,
    finishAction: 1,  // 返航
    lostConnectionAction: 0,  // 返航
    heightMode: 'relative_to_takeoff',
    polygon: routePoints.value
  }
  
  const waypoints = routePoints.value.map(point => ({
    lng: point.lng,
    lat: point.lat,
    height: point.height,
    speed: point.speed,
    gimbalPitch: point.gimbalPitch,
    gimbalYaw: point.gimbalYaw,
    actionType: point.actionType,
    fileName: point.fileName,
    hoverTime: point.hoverTime
  }))
  
  const kmzBlob = await generator.generate(mission, waypoints)
  
  // 触发下载
  const url = URL.createObjectURL(kmzBlob)
  const link = document.createElement('a')
  link.href = url
  link.download = 'mission.kmz'
  link.click()
  URL.revokeObjectURL(url)
}
</script>

3.5 相机视角可视化

为了直观展示无人机的拍摄范围，我们实现了**视锥体（Frustum）**可视化：

// utils/FrustumVisualization.js

import * as Cesium from 'cesium'

export class FrustumVisualization {
  constructor(viewer) {
    this.viewer = viewer
    this.entity = null
  }
  
  /**
   * 更新视锥体
   * @param {Object} config - 配置参数
   */
  update(config) {
    const {
      position,    // {lng, lat, height}
      heading,     // 云台偏航角（度）
      pitch,       // 云台俯仰角（度）
      zoom         // 变焦倍率
    } = config
    
    // 计算相机参数
    const fov = this.calculateFov(zoom)
    const aspectRatio = 4 / 3  // 4:3 画幅
    
    // 计算视锥体角点
    const corners = this.calculateFrustumCorners(
      position,
      heading,
      pitch,
      fov,
      aspectRatio
    )
    
    // 更新或创建视锥体 Entity
    if (this.entity) {
      this.viewer.entities.remove(this.entity)
    }
    
    this.entity = this.viewer.entities.add({
      // 视锥体线框
      polylineVolume: {
        positions: this.createFrustumOutline(corners),
        shape: this.createCrossShape(),
        material: Cesium.Color.fromCssColorString('#3b82f6').withAlpha(0.5),
        cornerType: Cesium.CornerType.ROUNDED
      },
      
      // 地面投影
      polygon: {
        hierarchy: Cesium.Cartesian3.fromDegreesArray([
          corners.bottomLeft.lng, corners.bottomLeft.lat,
          corners.bottomRight.lng, corners.bottomRight.lat,
          corners.topRight.lng, corners.topRight.lat,
          corners.topLeft.lng, corners.topLeft.lat
        ]),
        material: Cesium.Color.fromCssColorString('#3b82f6').withAlpha(0.2),
        outline: true,
        outlineColor: Cesium.Color.fromCssColorString('#3b82f6')
      }
    })
  }
  
  /**
   * 计算视场角
   */
  calculateFov(zoom) {
    // 基准焦距（1x 变焦）
    const baseFocalLength = 24  // mm
    const sensorWidth = 13.2    // M3T 传感器宽度
    
    // 当前焦距
    const focalLength = baseFocalLength * zoom
    
    // 视场角公式：FOV = 2 * arctan(sensorSize / (2 * focalLength))
    const fovRadians = 2 * Math.atan(sensorWidth / (2 * focalLength))
    
    return Cesium.Math.toDegrees(fovRadians)
  }
  
  /**
   * 计算视锥体角点
   */
  calculateFrustumCorners(position, heading, pitch, fov, aspectRatio) {
    // 假设拍摄距离（根据高度和俯仰角估算）
    const distance = position.height / Math.sin(Cesium.Math.toRadians(-pitch))
    
    // 视锥体半角
    const halfFov = fov / 2
    const halfHeightFov = Math.atan(Math.tan(Cesium.Math.toRadians(halfFov)) / aspectRatio)
    
    // 计算角点偏移
    const corners = {
      topLeft: this.offsetPosition(position, heading, pitch, -halfFov, halfHeightFov, distance),
      topRight: this.offsetPosition(position, heading, pitch, halfFov, halfHeightFov, distance),
      bottomLeft: this.offsetPosition(position, heading, pitch, -halfFov, -halfHeightFov, distance),
      bottomRight: this.offsetPosition(position, heading, pitch, halfFov, -halfHeightFov, distance)
    }
    
    return corners
  }
  
  /**
   * 偏移位置
   */
  offsetPosition(position, heading, pitch, yawOffset, pitchOffset, distance) {
    const finalHeading = Cesium.Math.toRadians(heading + yawOffset)
    const finalPitch = Cesium.Math.toRadians(pitch + pitchOffset)
    
    const dx = distance * Math.cos(finalPitch) * Math.sin(finalHeading)
    const dy = distance * Math.cos(finalPitch) * Math.cos(finalHeading)
    const dz = distance * Math.sin(finalPitch)
    
    return {
      lng: position.lng + Cesium.Math.toDegrees(dx / 6378137),
      lat: position.lat + Cesium.Math.toDegrees(dy / 6378137),
      height: position.height - dz
    }
  }
}

四、性能优化

4.1 组件通信优化

使用 Vue 3 的 provide/inject 和响应式系统优化组件通信：

<!-- index.vue -->
<script setup>
import { provide, reactive, ref } from 'vue'

// 共享状态
const sharedState = reactive({
  currentWaypointIndex: -1,
  routePoints: [],
  cameraConfig: {
    zoom: 1,
    aircraftYaw: 0,
    gimbalPitch: -90,
    gimbalYaw: 0
  }
})

// 提供给子组件
provide('sharedState', sharedState)
provide('updateWaypoint', updateWaypoint)
provide('updateCameraConfig', updateCameraConfig)

function updateWaypoint(index, data) {
  sharedState.routePoints[index] = {
    ...sharedState.routePoints[index],
    ...data
  }
}

function updateCameraConfig(config) {
  Object.assign(sharedState.cameraConfig, config)
}
</script>

4.2 Cesium 渲染优化

// 1. 使用 Entity Pool 管理大量航点
class EntityPool {
  constructor(viewer) {
    this.viewer = viewer
    this.pool = []
    this.active = new Map()
  }
  
  acquire(id, config) {
    if (this.active.has(id)) {
      this.update(id, config)
      return
    }
    
    let entity
    if (this.pool.length > 0) {
      entity = this.pool.pop()
      this.configureEntity(entity, config)
    } else {
      entity = this.viewer.entities.add(config)
    }
    
    this.active.set(id, entity)
  }
  
  release(id) {
    const entity = this.active.get(id)
    if (entity) {
      this.active.delete(id)
      this.pool.push(entity)
    }
  }
}

// 2. 视锥体更新使用 nextTick 避免渲染警告
import { nextTick } from 'vue'

const updateFrustum = async () => {
  await nextTick()
  frustumVisualization.update(cameraConfig)
}

// 3. 限制最大缩放级别（避免地图无数据）
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000

4.3 路径计算优化

使用 Web Worker 处理复杂计算，避免阻塞主线程：

// workers/pathPlanning.worker.js

self.onmessage = function(e) {
  const { type, data } = e.data
  
  if (type === 'GENERATE_SCAN_PATH') {
    const waypoints = generateScanPath(data.polygon, data.options)
    self.postMessage({ type: 'SCAN_PATH_READY', waypoints })
  }
}

// 主线程使用
const worker = new Worker(new URL('./workers/pathPlanning.worker.js', import.meta.url))

worker.postMessage({
  type: 'GENERATE_SCAN_PATH',
  data: { polygon, options }
})

worker.onmessage = function(e) {
  if (e.data.type === 'SCAN_PATH_READY') {
    routePoints.value = e.data.waypoints
  }
}

五、难点与解决方案

5.1 AI 目标识别配置

问题：Matrice 4T 支持 AI 目标识别，需要特殊配置

解决方案：在 KMZ 中添加 AI 参数

5.2 高度模式处理

问题：三种高度模式（海拔、相对起飞点、相对地形）需要不同处理

六、总结与展望

6.1 技术亮点

1. 坐标系统转换：完美解决 GCJ-02 和 WGS84 的偏移问题

2. 3D 可视化：基于 Cesium 实现航点、航线、视锥的实时可视化

3. 路径规划算法：S 形扫描路径自动生成，支持参数调节

4. KMZ 文件生成：符合 WPML 1.0.6 标准，兼容 DJI 设备

6.2 待完善功能

• 更多航线类型（带状、斜面、几何体）

• 3D 地形跟随

• 多机协同航线

• 实时天气集成

• 航线仿真模拟

6.3 性能优化方向

• 使用 WebAssembly 加速路径计算

• 增量式 KMZ 生成

• 离线地图支持

• PWA 支持

七、参考资料

• Vue 3 官方文档

• CesiumJS 文档

• DJI WPML 1.0.6 标准

• GCJ-02 坐标转换算法

• Element Plus 主题定制