1. 集成前端独立组件
上云 API 2 说明文档(KOC3)
  • 快速开始
  • 申请许可证
  • 联系我们
  • 软件下载
  • 使用上云 API 2 设备模拟器
  • 鉴权接入指南
  • 部署上云 API 2 应用运行与设备管控底座
    • 部署指南
    • 部署前准备
    • 开始部署
    • 能力扩展
  • 设备上云
    • 设备上云
    • 设备固件版本
  • 集成前端独立组件
    • 集成指南
    • 驾驶舱和设备小窗
    • 驾驶舱模块化配置
    • 设备管理组件
    • 航线组件
    • 直播大屏
    • 飞行记录
    • 集成参考
    • PaasJS 新增特性
  • SDK 文档
    • 基本介绍
      • SDK 简介
      • 功能特性
    • 快速入门
      • 准备工作
      • 使用流程
    • 接口调用
      • 接口调用时序图
    • SDK API 文档
      • 使用 API 文档查阅接口详情
    • SDK版本迁移指南
      • 迁移概述
      • 新增方法详情
      • API 变更详情
      • 迁移操作步骤
    • 功能集合
      • SDK初始化
      • SDK配置
      • DRC链路
      • 飞机状态监听
      • 飞向目标点
      • 飞行参数设置
      • 飞行记录导出
      • POI 环绕飞行
      • 一键起飞
      • 航线任务管理
      • 航线任务控制
      • 航线资产管理
      • 机场状态监听
      • 控制权管理
      • 机场控制
      • 飞行控制
      • AI Box 管理
      • AI 智能告警
      • 机载 AI 控制
      • 机载 AI 算法管理
      • PSDK 控制
      • PSDK 资源管理
      • RTK 标定
      • 安全服务
      • 固件管理
      • 媒体服务
      • 日志管理
      • 三维重建
      • 设备管理
      • 设备保修维护
      • 设备健康管理
      • 设备远程调试
      • 设备在线状态
      • 相机控制
      • 直播录制
      • 直播设备管理
      • 直播视频流
      • 直播同步
      • 中继器控制
      • 自定义 SEI
      • WHEP 自定义拉流
      • 网络测速
      • 地图元素管理
      • 频闪灯配置
  • 使用上云 API 2 AI Plugin
    • 上云 API 2 AI Plugin 使用指南
  • 使用上云 API 2 二次开发 Demo
    • 上云 API 2 二次开发 Demo 部署指南
    • 上云 API 2 二次开发 Demo - 无人机管理平台使用说明
  • 排障指南
    • 前端独立组件排障指南
    • SDK排障指南
  1. 集成前端独立组件

驾驶舱模块化配置

目录#

1.
一、概述
2.
二、如何传入配置
2.1 加载时传入
2.2 运行时动态更新
3.
三、顶层结构 - CockpitConfig
模块通用配置 - ModuleConfig
4.
四、各模块字段详解 - features
4.1 顶栏功能入口 - topBar
4.2 主视频区 - mainLive
4.3 辅视频区 - subLive
4.4 地图 - map
4.5 设备列表 - deviceList
5.
五、自定义按钮
6.
六、布局配置 - layout
7.
七、航线库地址 - waylinePlanUrl
8.
八、外接摄像头验密页面地址 - cameraAuthVerifyUrl
9.
九、完整配置示例
10.
十、字段速查表
顶层字段
模块级
顶栏子功能 - TopBar
主视频区子功能 - MainLive
辅视频区子功能 - SubLive
设备列表子功能 - DeviceList
地图子功能 - Map
11.
十一、常见问题

一、概述#

驾驶舱(Cockpit)由 5 个顶层模块组成:
模块 ID名称说明
topBar顶栏功能入口按钮组(设备列表、告警、航线等)
mainLive主视频区主相机直播画面 + 飞行操控
subLive辅视频区机场直播 / 遥控器直播 / AI 链接
map地图飞行地图
deviceList设备列表设备卡片与管理操作 ⚠️ 当前阶段默认隐藏,待后续功能开发完成后放开
通过 CockpitConfig 可以:
整体显隐某个模块(visible: false)
开关模块内的子功能(features.*)
注入您的自定义按钮(customButtons,支持图标、跳转 URL 和回调)
缺省全开原则:未配置的字段保持默认打开,只有显式设为 false / { visible: false } 才会关闭对应功能。
⚠️ 当前阶段例外:deviceList(设备列表)模块当前默认隐藏,不适用缺省全开原则;相关功能待后续版本开发完成后放开,届时无需修改您的调用代码。

二、如何传入配置#

2.1 加载时传入#

2.2 运行时动态更新#

驾驶舱已挂载后,可随时通过 FH2.setCockpitConfig 推送新配置,UI 即时响应:
注意:每次调用会与默认配置做 explicit-only 深度合并(只覆盖显式提供的字段,未提供字段恢复默认值)。若您需要"持久关闭某功能",每次 setCockpitConfig 均需带上该字段。

三、顶层结构 - CockpitConfig#

interface CockpitConfig {
  modules?: {
    topBar?:      ModuleConfig & { features?: TopBarFeatures }
    mainLive?:    ModuleConfig & { features?: MainLiveFeatures }
    subLive?:     ModuleConfig & { features?: SubLiveFeatures }
    map?:         ModuleConfig & { features?: MapFeatures }
    deviceList?:  ModuleConfig & { features?: DeviceListFeatures }   // ⚠️ koc3 阶段默认隐藏,待后续放开
  }
  layout?:     LayoutConfig      // 布局配置
  theme?:      ThemeConfig       // 主题 token 覆盖(预留,当前版本未生效)
  extensions?: ExtensionConfig[] // 自定义插件扩展位(预留,当前版本未生效)
  liveScreen?: LiveScreenConfig  // N 路直播大屏(预留,当前版本未生效)
  waylinePlanUrl?: string   // 您的航线库/飞行任务创建页面地址(非必传)
  cameraAuthVerifyUrl?: string  // 您的外接摄像头验密页面地址(非必传)
}

模块通用配置 - ModuleConfig#

interface ModuleConfig {
  visible?:  boolean   // 是否显示整个模块,默认 true
  gridCols?: number    // 网格列数(grid 布局时生效),默认 1
}

四、各模块字段详解 - features#

4.1 顶栏功能入口 - topBar#

interface TopBarFeatures {
  deviceList?:    boolean                // 设备列表入口,默认 true ⚠️ koc3 阶段该入口默认隐藏(随 deviceList 模块一并后续放开),当前配置无可见效果
  alertRecord?:   boolean                // 告警记录,默认 true
  relayTask?:     boolean                // 任务接力,默认 true
  wayline?:       boolean                // 航线规划入口,默认 true
  droneStatus?:   boolean                // 飞机状态遥测条(延迟/图传/RTK/电量),默认 true
  layout?:        boolean                // 布局切换,默认 true(待实施)
  shortcutKey?:   boolean                // 快捷键说明,默认 true(待实施)
  settings?:      boolean                // 设置入口,默认 true(待实施)
  customButtons?: CockpitCustomButton[]  // 您的自定义按钮,渲染于顶栏右侧,默认 []
}
示例:关闭告警记录、注入一个自定义按钮
(待实施) 标注的字段已在 type 中定义,但对应 UI 门控尚未实施;当前设置会被忽略,UI 始终显示。

4.2 主视频区 - mainLive#

⚠️ 注意:mainLive.features 的子功能值是 { visible?: boolean } 对象,而非直接布尔,与 topBar 不同。
interface MainLiveFeatures {
  leftToolbar?:    FeatureToggle           // footer 竖向工具栏(云台/激光/AI/灯光,视觉最左),默认可见
  rightToolbar?:   FeatureToggle           // 相机参数/镜头/红外叠加层,默认可见
  flightControls?: FeatureToggle           // 飞行操控扩展区(右下角起飞/急停等),默认可见
  bottomLeftInfo?: FeatureToggle           // 左下角设备信息,默认可见
  overlay?:        FeatureToggle           // 画面叠加层(HUD 信息),默认可见
  gimbalTools?:    FeatureToggle           // 云台工具组(云台/变焦/激光/IR/AI/PSDK),默认可见(待实施)
  lightMode?:      FeatureToggle           // 灯光/特殊模式组(降落伞/爆闪灯等),默认可见(待实施)
  footerItems?: {                          // footer(leftToolbar 区) 逐项显隐;未配置的 key 默认全开
    gimbalSet?:       boolean              // 云台设置
    mouseFirstAngle?: boolean              // 鼠标优先角度
    spotOn?:          boolean              // 一键指点
    multiPayload?:    boolean              // 多负载控制
    laser?:           boolean              // 激光打点
    rng?:             boolean              // 激光测距(RNG)
    irThermometer?:   boolean              // 红外区域测温
    ai?:              boolean              // AI 目标识别 / 智能跟踪
    aiSearch?:        boolean              // AI 大模型搜索
    ea700?:           boolean              // 妙算 3(EA700)
    psdk?:            boolean              // PSDK 入口
    parachute?:       boolean              // 降落伞
    ar?:              boolean              // AR 投射
    flashLed?:        boolean              // 爆闪灯
    nightLight?:      boolean              // 夜航灯
    stealthMode?:     boolean              // 隐蔽模式
    fts?:             boolean              // 飞行终止系统(FTS)
    customButtons?:   CockpitCustomButton[] // 您的自定义按钮,渲染于 footer(leftToolbar 区),默认 []
  }                                        // 最终可见 = 组开关(gimbalTools/lightMode) && 该 item && 设备能力
}

// FeatureToggle 类型
interface FeatureToggle {
  visible?: boolean   // 是否可见,默认 true
}
示例:隐藏飞行操控区,注入一个自定义按钮

4.3 辅视频区 - subLive#

interface SubLiveFeatures {
  dockLive?:      boolean   // 机场直播 Tab,默认 true
  assistantLive?: boolean   // 遥控器直播 Tab,默认 true
  customTabs?:    Array<{   // 您的自定义 Tab(待实施)
    id:          string     // Tab 唯一标识
    label:       string     // Tab 显示名称
    componentId: string     // 组件 ID(与插件中心注册的组件名对应)
  }>
}
示例:隐藏 AI 链接

4.4 地图 - map#

当前版本仅支持整体显隐地图模块,features 中的子功能暂未实施。
interface MapFeatures {
  drawTools?:   boolean   // 画点线面圆(待实施)
  search?:      boolean   // 地图搜索(待实施)
  layerSwitch?: boolean   // 图层切换(待实施)
  measure?:     boolean   // 测距(待实施)
  fullscreen?:  boolean   // 全屏(待实施)
}
隐藏整个地图模块:

4.5 设备列表 - deviceList#

⚠️ koc3 阶段默认隐藏:设备列表模块在当前 koc3 版本中默认不展示,相关功能待后续版本开发完成后放开。在此之前:
无需(也不建议)显式配置 modules.deviceList.visible: true 强行打开;
下方 features 子功能配置写入后会被 merge 进配置,但因模块整体隐藏而无可见效果;
模块放开后,本节配置无需修改您的调用代码即可生效。
interface DeviceListFeatures {
  deviceCard?:      boolean   // 设备卡片,默认 true
  addRemoveDevice?: boolean   // 添加/移除设备按钮,默认 true
  filter?:          boolean   // 过滤,默认 true(待实施)
  sort?:            boolean   // 排序,默认 true(待实施)
}
示例:隐藏整个设备列表,或仅隐藏加减设备按钮(模块放开后生效)

五、自定义按钮#

自定义按钮目前支持注入到两处:
TopBar:modules.topBar.features.customButtons,渲染于顶栏右侧
MainLive footer(leftToolbar 区):modules.mainLive.features.footerItems.customButtons,渲染于 footer(leftToolbar 区)
interface CockpitCustomButton {
  id:          string       // 必填。按钮唯一标识(同一区域 id 不可重复)
  name:        string       // 必填。按钮名称(显示于图标下方或 Tooltip 中)
  tips?:       string       // 可选。鼠标 hover 时的提示文字
  iconUrl?:    string       // 可选。图标图片 URL;缺省时显示 name 首字
  forwardUrl?: string       // 可选。点击后跳转的 URL(仅支持 http/https)
  cb?:         () => void   // 可选。点击回调函数
}
点击行为规则:
1.
forwardUrl 非空 → 先 window.open(forwardUrl, '_blank', 'noopener,noreferrer') 跳转
2.
cb 非空 → 执行回调(与 forwardUrl 不互斥,两者都配置时均会触发)
3.
两者均为空 → 点击无效果(按钮仍可见)
注意:cb 是函数,无法写入 JSON 字符串。若您使用 setCockpitConfig(JSON 传递),只能配置 forwardUrl;需要回调的按钮请在 loadCockpit 时通过您的代码传入。

六、布局配置 - layout#

interface LayoutConfig {
  mode?:            'splitpanes' | 'grid'   // 布局模式,默认 'splitpanes'
  splitRatios?: {
    primary?:   number   // 主区域宽度比例(0-100),默认 70
    secondary?: number   // 辅区域宽度比例(0-100),默认 30
    map?:       number   // 地图高度比例(0-100),默认 55
    subLive?:   number   // 辅视频高度比例(0-100),默认 45
  }
  defaultMainView?: 'main' | 'map' | 'sub_live'   // 默认主视图,默认 'main'
}
示例:调整主视频区宽度比例为 80%

七、航线库地址 - waylinePlanUrl#

waylinePlanUrl 是 CockpitConfig 顶层可选字段(与 layout、theme、liveScreen 同级,非 modules 内部),用于指定您的航线库 / 飞行任务创建页面地址。
用途: 当您点击顶栏航线入口(topBar.features.wayline)确认跳转时,驾驶舱的 openPlan 会读取该字段决定跳转目标。
openPlan 行为规则:
1.
配置了 waylinePlanUrl(去除首尾空白后非空)→ 通过 openUrlInFh2(waylinePlanUrl) 跳转到该地址。
2.
未配置 / 为空 / 为纯空白字符串 → 不跳转,弹出 naive-ui warning 提示:
未配置飞行任务创建页面,无法跳转,请参考上云 API2 前端独立组件说明书添加跳转页面
示例:loadCockpit 传入您的航线库地址
注意:waylinePlanUrl 位于配置对象顶层,不要写进 modules 内部。运行时同样可通过 setCockpitConfig({ waylinePlanUrl: '...' }) 动态更新。

八、外接摄像头验密页面地址 - cameraAuthVerifyUrl#

cameraAuthVerifyUrl 是 CockpitConfig 顶层可选字段(与 waylinePlanUrl、layout、theme 同级,非 modules 内部),用于指定您的外接摄像头(EA610 等)验密页面地址。
用途: 当您的直播画面检测到外接摄像头未验证时,主视频区会展示「摄像头未验证」引导页;您点击「去验证」按钮时,驾驶舱会读取该字段决定跳转目标(新标签页打开)。
跳转行为规则:
1.
配置了 cameraAuthVerifyUrl(去除首尾空白后非空)→ 通过 window.open 在新标签页打开该地址。
2.
未配置 / 为空 / 为纯空白字符串 → 跳转到默认的设备维护页:{当前站点}/paasjs-demo/paas-device-manager.html#/?sn={deviceSn}&type=maintenance。
提示:跳转到目标自定义地址时不会附加设备 SN 等参数(与 waylinePlanUrl 行为一致,按原样打开)。如您的验密页面需要定位具体设备,请在您的页面内提供设备选择能力。
示例:loadCockpit 传入验密页面地址
注意:cameraAuthVerifyUrl 位于配置对象顶层,不要写进 modules 内部。运行时同样可通过 setCockpitConfig({ cameraAuthVerifyUrl: '...' }) 动态更新。

九、完整配置示例#


十、字段速查表#

顶层字段#

字段路径类型说明默认值状态
waylinePlanUrlstring您的航线库地址undefined✅ 已生效
cameraAuthVerifyUrlstring您的外接摄像头验密页面地址undefined(跳转默认设备维护页)✅ 已生效

模块级(modules.*.visible)#

字段路径类型说明默认值
modules.topBar.visibleboolean显示/隐藏顶栏true
modules.mainLive.visibleboolean显示/隐藏主视频区true
modules.subLive.visibleboolean显示/隐藏辅视频区true
modules.map.visibleboolean显示/隐藏地图true
modules.deviceList.visibleboolean显示/隐藏设备列表⚠️ koc3 阶段默认隐藏(待后续放开)

顶栏子功能 - TopBar#

字段路径类型说明默认值状态
modules.topBar.features.deviceListboolean设备列表入口true⚠️ koc3 阶段入口默认隐藏(待后续放开)
modules.topBar.features.alertRecordboolean告警记录true✅ 已生效
modules.topBar.features.relayTaskboolean任务接力true✅ 已生效
modules.topBar.features.waylineboolean航线规划入口true✅ 已生效
modules.topBar.features.droneStatusboolean飞机状态遥测条true✅ 已生效
modules.topBar.features.layoutboolean布局切换true🚧 待实施
modules.topBar.features.shortcutKeyboolean快捷键说明true🚧 待实施
modules.topBar.features.settingsboolean设置入口true🚧 待实施
modules.topBar.features.customButtonsCockpitCustomButton[]您的自定义按钮[]✅ 已生效

主视频区子功能 - MainLive#

字段路径类型说明默认值状态
modules.mainLive.features.leftToolbar{ visible?: boolean }footer 竖向工具栏(云台/激光/AI/灯光,视觉最左)可见✅ 已生效
modules.mainLive.features.rightToolbar{ visible?: boolean }相机参数/镜头/红外叠加层可见✅ 已生效
modules.mainLive.features.flightControls{ visible?: boolean }飞行操控扩展区可见✅ 已生效
modules.mainLive.features.bottomLeftInfo{ visible?: boolean }左下角设备信息可见✅ 已生效
modules.mainLive.features.overlay{ visible?: boolean }画面叠加层可见✅ 已生效
modules.mainLive.features.gimbalTools{ visible?: boolean }云台工具组可见🚧 待实施
modules.mainLive.features.lightMode{ visible?: boolean }灯光/特殊模式组可见🚧 待实施
modules.mainLive.features.footerItems{ [key]: boolean }footer(leftToolbar 区) 逐项显隐(见下表)全开✅ 已生效
modules.mainLive.features.footerItems.customButtonsCockpitCustomButton[]您的自定义按钮(footer/leftToolbar 区)[]✅ 已生效

MainLive footerItems 逐项开关#

每项默认全开(true);最终可见 = 组开关(gimbalTools/lightMode) && 该 item 开关 && 设备能力。
字段路径类型说明默认值状态
modules.mainLive.features.footerItems.gimbalSetboolean云台设置true✅ 已生效
modules.mainLive.features.footerItems.mouseFirstAngleboolean鼠标优先角度true✅ 已生效
modules.mainLive.features.footerItems.spotOnboolean一键指点true✅ 已生效
modules.mainLive.features.footerItems.multiPayloadboolean多负载控制true✅ 已生效
modules.mainLive.features.footerItems.laserboolean激光打点true✅ 已生效
modules.mainLive.features.footerItems.rngboolean激光测距(RNG)true✅ 已生效
modules.mainLive.features.footerItems.irThermometerboolean红外区域测温true✅ 已生效
modules.mainLive.features.footerItems.aibooleanAI 目标识别 / 智能跟踪true✅ 已生效
modules.mainLive.features.footerItems.aiSearchbooleanAI 大模型搜索true✅ 已生效
modules.mainLive.features.footerItems.ea700boolean妙算 3(EA700)true✅ 已生效
modules.mainLive.features.footerItems.psdkbooleanPSDK 入口true✅ 已生效
modules.mainLive.features.footerItems.parachuteboolean降落伞true✅ 已生效
modules.mainLive.features.footerItems.arbooleanAR 投射true✅ 已生效
modules.mainLive.features.footerItems.flashLedboolean爆闪灯true✅ 已生效
modules.mainLive.features.footerItems.nightLightboolean夜航灯true✅ 已生效
modules.mainLive.features.footerItems.stealthModeboolean隐蔽模式true✅ 已生效
modules.mainLive.features.footerItems.ftsboolean飞行终止系统(FTS)true✅ 已生效

辅视频区子功能 - SubLive#

字段路径类型说明默认值状态
modules.subLive.features.dockLiveboolean机场直播 Tabtrue✅ 已生效
modules.subLive.features.assistantLiveboolean遥控器直播 Tabtrue✅ 已生效
modules.subLive.features.customTabsArray<{id,label,componentId}>您的自定义 Tab[]🚧 待实施

设备列表子功能 - DeviceList#

⚠️ koc3 阶段整个 deviceList 模块默认隐藏,下表子功能配置需待模块放开后才有可见效果(状态列表示配置层实现进度,非当前可见性)。
字段路径类型说明默认值状态
modules.deviceList.features.deviceCardboolean设备卡片true✅ 已生效(受模块 koc3 默认隐藏限制)
modules.deviceList.features.addRemoveDeviceboolean添加/移除设备按钮true✅ 已生效(受模块 koc3 默认隐藏限制)
modules.deviceList.features.filterboolean过滤true🚧 待实施
modules.deviceList.features.sortboolean排序true🚧 待实施

地图子功能 - Map#

字段路径类型说明默认值状态
modules.map.features.drawToolsboolean画点线面圆true🚧 待实施
modules.map.features.searchboolean地图搜索true🚧 待实施
modules.map.features.layerSwitchboolean图层切换true🚧 待实施
modules.map.features.measureboolean测距true🚧 待实施
modules.map.features.fullscreenboolean全屏true🚧 待实施

十一、常见问题#

Q:设置 visible: false 后,模块为什么仍然可见?
A:请检查是否在 modules 下使用了正确的模块 ID(topBar、mainLive、subLive、map、deviceList,区分大小写)。另外,setCockpitConfig 的配置是与默认值合并而非替换,每次调用需带上所有要保持关闭的字段。
Q:为什么配置了 modules.deviceList.visible: true,设备列表还是不显示?
A:deviceList(设备列表)模块在 koc3 阶段默认隐藏(顶栏的设备列表入口按钮同样隐藏),相关功能待后续版本开发完成后放开,当前配置为 true 也不会显示。模块放开后,本文档中 deviceList 相关配置无需修改您的调用代码即可生效。
Q:topBar.features 用布尔,mainLive.features 用 { visible } 对象,为什么不统一?
A:历史设计差异。TopBar 的子功能是单按钮的入口开关(布尔语义更清晰),MainLive 的子功能是区域面板(FeatureToggle 为后续扩展更多属性预留了空间)。
Q:如何单独隐藏 footer(leftToolbar 区) 内的某一个功能(如 FTS、激光打点)?
A:用 modules.mainLive.features.footerItems.<key> = false。例如隐藏 FTS 与激光打点:footerItems: { fts: false, laser: false }。未列出的 key 默认保持全开。注意 footerItems 只做配置层门控,不改变设备能力判断——某项最终可见 = 组开关(gimbalTools/lightMode) && 该 item 开关 && 设备支持该能力。key 列表见「字段速查表 › MainLive footerItems 逐项开关」。
Q:自定义按钮的 cb 回调能否通过 setCockpitConfig(JSON)传入?
A:不能。cb 是函数引用,JSON 序列化时会被丢弃。需要回调的按钮只能在 loadCockpit 时通过 JavaScript 代码传入 cockpitConfig。仅需跳转的按钮可使用 forwardUrl 在 JSON 中配置。
Q:未配置 waylinePlanUrl 时,点击顶栏航线入口会怎样?
A:不会跳转,会弹出 warning 提示「未配置飞行任务创建页面,无法跳转,请参考上云 API2 前端独立组件说明书添加跳转页面」。配置了 waylinePlanUrl(顶层字段)后,点击即跳转到该地址。
Q:未配置 cameraAuthVerifyUrl 时,点击直播「摄像头未验证」引导页的「去验证」按钮会怎样?
A:会跳转到默认的设备维护页(paas-device-manager.html,自动带上当前设备 SN)。配置了 cameraAuthVerifyUrl(顶层字段)后,点击即在新标签页打开该地址(不附加 SN 参数)。
Q:layout、shortcutKey、settings 等标注"待实施"的字段会报错吗?
A:不会。这些字段写入后会被 merge 进配置,但 UI 层暂无对应门控,当前版本中这些字段配置无效(不报错、不生效)。后续版本实施后无需修改您的调用代码,零改动生效。
上一页
驾驶舱和设备小窗
下一页
设备管理组件
Built with