ConnectionManager 连接管理器

ConnectionManager 用于在两个已有的 Cesium 实体之间创建可视化连接效果，支持直线、虚线、流动线、圆锥、脉冲圆锥、激光、四棱锥等多种类型。

构造函数

constructor(viewer: Viewer)

参数	类型	描述
`viewer`	`Cesium.Viewer`	Cesium Viewer 实例

方法

add(options: ConnectionOptions): ConnectionResult

创建一个从源实体到目标实体的可视化连接。

interface ConnectionOptions {
  id?: string;
  name?: string;
  sourceId: string;
  targetId: string;
  startTime: JulianDate;
  endTime: JulianDate;
  type: ConnectionType;
  color?: Color;
  width?: number;
  coneRadius?: number;
  flowingRepeat?: number;
  flowingSpeed?: number;
  laserPulseSpeed?: number;
  laserTravelDuration?: number;
  pulseRepeat?: number;
  pulseSpeed?: number;
  pyramidScanAngle?: number;
  pyramidOutlineWidth?: number;
  pyramidAlpha?: number;
  metadata?: Record<string, unknown>;
}

interface ConnectionResult {
  id: string;
  entity: Entity;
}

参数	类型	默认值	描述
`id`	`string`	自动生成	连接实体唯一标识
`name`	`string`	`sourceId_targetId_type`	显示名称
`sourceId`	`string`	—	源实体 ID（实体须已存在于 viewer.entities 中）
`targetId`	`string`	—	目标实体 ID
`startTime`	`JulianDate`	—	连接可见性起始时间
`endTime`	`JulianDate`	—	连接可见性结束时间
`type`	`ConnectionType`	—	连接视觉类型
`color`	`Color`	按类型自动匹配	基础颜色
`width`	`number`	`2`	线条宽度（仅线类类型有效）
`coneRadius`	`number`	`90000`	圆锥宽端半径（仅 cone / pulseCone）
`flowingRepeat`	`number`	`10`	流动线光段数量（仅 flowing）
`flowingSpeed`	`number`	`1.05`	流动动画速度倍率
`laserPulseSpeed`	`number`	`5.2`	激光打击阶段脉冲速度
`laserTravelDuration`	`number`	`2.4`	激光发射飞行秒数
`pulseRepeat`	`number`	`13`	圆锥表面流动圆环数量
`pulseSpeed`	`number`	`1.18`	圆环动画速度倍率
`pyramidScanAngle`	`number`	`6`	四棱锥扫描角（度，范围 1-120）
`pyramidOutlineWidth`	`number`	`1`	四棱锥边线像素宽度
`pyramidAlpha`	`number`	`0.1`	四棱锥面片不透明度
`metadata`	`Record<string, unknown>`	—	业务元数据

remove(id: string): boolean

按 ID 移除已创建的连接实体，返回是否成功。

clear(): void

移除当前管理器创建的所有连接。

get(id: string): Entity | undefined

通过 ID 获取连接实体引用。

连接类型与材质属性类

'line' — 基础直线

使用 Cesium.Color 作为 polyline 材质，支持自定义颜色和线宽。

const conn = connectionManager.add({
  sourceId: 'entityA',
  targetId: 'entityB',
  startTime,
  endTime,
  type: 'line',
  color: Cesium.Color.CYAN,
  width: 3,
});

'dashed' — 虚线

使用 Cesium 内置 PolylineDashMaterialProperty，自动生成间隙。

const conn = connectionManager.add({
  sourceId: 'entityA',
  targetId: 'entityB',
  startTime,
  endTime,
  type: 'dashed',
  color: Cesium.Color.fromCssColorString('#ffe66d'),
  width: 2,
});

'flowing' — 流动线

使用 FlowingPolylineMaterialProperty，沿连接方向产生流动光段动画。

FlowingPolylineMaterialProperty 参数：

属性	类型	默认值	描述
`color`	`Color`	`Color.CYAN`	轨道底色与移动光段共用颜色
`repeat`	`number`	`10`	沿连接方向重复出现的光段数量
`speed`	`number`	`1.05`	流动动画速度倍率

const conn = connectionManager.add({
  sourceId: 'radar',
  targetId: 'target_01',
  startTime,
  endTime,
  type: 'flowing',
  color: Cesium.Color.fromCssColorString('#55e6ff'),
  width: 3,
  flowingRepeat: 8,
  flowingSpeed: 1.5,
});

'cone' — 圆锥

使用动态 CylinderGraphics 模拟源点到目标点的圆锥，不透明度约 0.22。

const conn = connectionManager.add({
  sourceId: 'sourceEntity',
  targetId: 'targetEntity',
  startTime,
  endTime,
  type: 'cone',
  color: Cesium.Color.fromCssColorString('#fff45c'),
  coneRadius: 120000,
});

'pulseCone' — 脉冲圆锥

使用 PulseConeMaterialProperty，在圆锥表面生成流动脉冲圆环动画。

PulseConeMaterialProperty 参数：

属性	类型	默认值	描述
`color`	`Color`	`Color.CYAN`	圆锥主体与圆环基础颜色
`repeat`	`number`	`13`	圆锥侧面可见的流动圆环数量
`speed`	`number`	`1.18`	圆环动画速度倍率

const conn = connectionManager.add({
  sourceId: 'satellite',
  targetId: 'ground_station',
  startTime,
  endTime,
  type: 'pulseCone',
  color: Cesium.Color.fromCssColorString('#64ffd9'),
  coneRadius: 150000,
  pulseRepeat: 10,
  pulseSpeed: 1.5,
});

'laser' — 激光

使用 LaserStrikeMaterialProperty，模拟"发射 - 飞行 - 持续打击"的激光效果。

LaserStrikeMaterialProperty 参数：

属性	类型	默认值	描述
`color`	`Color`	`#ff1f1f`	红色辉光颜色
`travelDuration`	`number`	`2.4`	激光从源点到达目标点所需秒数
`pulseSpeed`	`number`	`5.2`	持续打击阶段的能量脉冲速度

const conn = connectionManager.add({
  sourceId: 'weapon',
  targetId: 'target_02',
  startTime,
  endTime,
  type: 'laser',
  color: Cesium.Color.fromCssColorString('#ff1f1f'),
  width: 4,
  laserTravelDuration: 1.5,
  laserPulseSpeed: 6.0,
});

'pyramid' — 四棱锥探测

使用四个动态三角面片 + 边线构建四棱锥，模拟传感器/雷达探测视锥。支持扫描角、边线宽度和面片透明度。

const conn = connectionManager.add({
  sourceId: 'sensor',
  targetId: 'aircraft',
  startTime,
  endTime,
  type: 'pyramid',
  color: Cesium.Color.fromCssColorString('#00ffff'),
  pyramidScanAngle: 10,
  pyramidOutlineWidth: 2,
  pyramidAlpha: 0.15,
});

完整示例

import { ConnectionManager } from '@air-stack/gis-cesium';

const connectionManager = new ConnectionManager(viewer);

// 创建两个实体
const source = viewer.entities.add({
  id: 'satellite',
  position: Cesium.Cartesian3.fromDegrees(116.3, 39.9, 500000),
  point: { pixelSize: 10, color: Cesium.Color.YELLOW },
});

const target = viewer.entities.add({
  id: 'ground',
  position: Cesium.Cartesian3.fromDegrees(121.4, 31.2, 0),
  point: { pixelSize: 8, color: Cesium.Color.RED },
});

const startTime = viewer.clock.currentTime;
const endTime = Cesium.JulianDate.addSeconds(startTime, 60, new Cesium.JulianDate());

// 创建流动线连接
connectionManager.add({
  sourceId: 'satellite',
  targetId: 'ground',
  startTime,
  endTime,
  type: 'flowing',
  color: Cesium.Color.CYAN,
  width: 3,
});

// 获取连接实体
const entity = connectionManager.get('connection_0');

// 按 ID 移除
connectionManager.remove('connection_0');

// 清空所有连接
connectionManager.clear();

注意事项

sourceId 和 targetId 对应的实体必须已存在于 viewer.entities 中，且拥有 position 属性，否则 add() 会抛错。
连接效果随两端实体位置自动更新，支持移动目标。
cone 和 pulseCone 类型使用 CylinderGraphics 模拟，顶端收缩为 0（尖点），底端半径由 coneRadius 控制。
pyramid 类型会创建多个子实体（4 个三角面 + 5 条边线），remove() 时会一并清理。
所有自定义材质类（FlowingPolylineMaterialProperty、LaserStrikeMaterialProperty、PulseConeMaterialProperty）仅需构造一次 fabric 注册，随后所有同类型连接复用同一份 GLSL 着色器。

ConnectionManager 连接管理器 ​

构造函数 ​

方法 ​

add(options: ConnectionOptions): ConnectionResult ​

remove(id: string): boolean ​

clear(): void ​

get(id: string): Entity | undefined ​

连接类型与材质属性类 ​

'line' — 基础直线 ​

'dashed' — 虚线 ​

'flowing' — 流动线 ​

'cone' — 圆锥 ​

'pulseCone' — 脉冲圆锥 ​

'laser' — 激光 ​

'pyramid' — 四棱锥探测 ​

完整示例 ​

注意事项 ​