DrawManager 绘图管理器

DrawManager 是 Cesium 场景中交互式绘制工具的封装，支持点、线、多边形、矩形四种绘图模式，并提供完整的生命周期控制和样式定制能力。

---

构造函数

constructor(viewer: Cesium.Viewer, options?: DrawManagerOptions)

参数	类型	默认值	描述
viewer	Cesium.Viewer	—	Cesium Viewer 实例，必填
options	DrawManagerOptions	{}	可选配置项

DrawManagerOptions

属性	类型	默认值	描述
pointStyle	PointStyle	{}	点的样式
lineStyle	LineStyle	{}	线的样式
tooltipStyle	TooltipStyle	{}	提示浮层样式
enable	boolean	true	是否在创建后立即启用

样式类型

PointStyle

属性	类型	默认值	描述
color	Cesium.Color | string	Color.YELLOW	点颜色
pixelSize	number	12	点像素大小
outlineColor	Cesium.Color | string	Color.BLACK	边框颜色
outlineWidth	number	2	边框宽度

LineStyle

属性	类型	默认值	描述
color	Cesium.Color | string	Color.CYAN	线条颜色
width	number	2	线条宽度
material	Cesium.Material | undefined	—	自定义材质
clampToGround	boolean	false	是否贴地

TooltipStyle

属性	类型	默认值	描述
backgroundColor	string	'rgba(0,0,0,0.7)'	背景色
fontColor	string	'#fff'	字体颜色
fontSize	string	'13px'	字号
offset	Cesium.Cartesian2	new Cartesian2(0, -40)	偏移量

---

属性

名称	类型	描述
mode	'point' | 'line' | 'polygon' | 'rectangle' | 'none'	当前绘图模式（只读）
isDrawing	boolean	是否正在绘制中（只读）

---

方法

startDraw(mode: DrawMode): void

开始指定模式的绘图。

type DrawMode = 'point' | 'line' | 'polygon' | 'rectangle' | 'none';

示例：

drawManager.startDraw('point');
drawManager.startDraw('polygon');

cancelDraw(): void

取消当前绘图操作，清除未完成的绘制内容。

onDrawComplete(callback: (result: DrawResult) => void): void

注册绘制完成回调。当用户完成一次绘图操作后触发。

interface DrawResult {
  mode: DrawMode;
  positions: Cesium.Cartesian3[];
  entity?: Cesium.Entity;
}

offDrawComplete(callback: (result: DrawResult) => void): void

移除已注册的绘制完成回调。

setPointStyle(style: Partial<PointStyle>): void

更新当前点的样式。支持部分更新。

示例：

drawManager.setPointStyle({ color: Cesium.Color.RED, pixelSize: 16 });

setLineStyle(style: Partial<LineStyle>): void

更新当前线条的样式。支持部分更新。

setTooltipStyle(style: Partial<TooltipStyle>): void

更新提示浮层的样式。支持部分更新。

enable(): void

启用绘图管理器。启用后才可响应鼠标拾取和绘制事件。

disable(): void

禁用绘图管理器。禁用后停止响应所有鼠标交互。

destroy(): void

销毁绘图管理器实例，清除内部所有事件监听和内存引用。销毁后实例不可再用。

---

完整代码示例

绘制点

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

const drawManager = new DrawManager(viewer);

drawManager.onDrawComplete((result) => {
  console.log('点坐标：', result.positions);
});

drawManager.startDraw('point');

绘制线

drawManager.setLineStyle({
  color: Cesium.Color.ORANGE,
  width: 3,
});

drawManager.onDrawComplete((result) => {
  console.log('线段顶点数：', result.positions.length);
});

drawManager.startDraw('line');
// 左键添加顶点，右键/双击结束绘制

绘制多边形

drawManager.onDrawComplete((result) => {
  const entity = result.entity;
  if (entity) {
    viewer.entities.add(entity); // 若未自动添加，可手动添加
  }
  console.log('多边形面积（约）：', computeArea(result.positions));
});

drawManager.startDraw('polygon');

绘制矩形

drawManager.setLineStyle({
  color: Cesium.Color.LIME,
  clampToGround: true,
});

drawManager.startDraw('rectangle');

结合 UI 切换模式

const modeSelect = document.getElementById('draw-mode') as HTMLSelectElement;

modeSelect.addEventListener('change', () => {
  const mode = modeSelect.value as DrawMode;
  if (mode === 'none') {
    drawManager.disable();
  } else {
    drawManager.enable();
    drawManager.startDraw(mode);
  }
});

使用自定义样式

const drawManager = new DrawManager(viewer, {
  pointStyle: {
    color: '#ff6600',
    pixelSize: 14,
    outlineColor: '#ffffff',
    outlineWidth: 3,
  },
  lineStyle: {
    color: Cesium.Color.DODGERBLUE,
    width: 4,
  },
  tooltipStyle: {
    backgroundColor: 'rgba(30, 30, 30, 0.85)',
    fontColor: '#eee',
    fontSize: '14px',
  },
});

---

注意事项

1. 绘图模式下，左键单击添加顶点，右键或 Esc 取消当前绘制。
2. cancelDraw() 只取消未完成的绘制，已完成的图形不受影响。
3. 销毁后将无法再次使用，如需重新启用请重新创建实例。
4. mode 和 isDrawing 均为只读属性，请勿在外部修改。