CRC-BMAP

Appearance

GraphicDraw ​

说明 ​

GraphicDraw 是一个图形绘制与编辑插件。支持在 2D 模式下绘制多边形、矩形和圆形，并支持对已绘制的图形进行选中、移动、缩放、旋转等编辑操作。

绘制过程中会自动切换至 2D 俯视视角，绘制/编辑完成后恢复原视角。所有交互在屏幕空间完成，坐标转换仅在完成绘制或获取图形时按需执行。

构造函数 ​

typescript
new GraphicDraw(bmap: BMap, options?: Partial<GraphicDrawOptions>);

参数 ​

参数类型说明默认值
bmapBMap地图实例-
optionsPartial<GraphicDrawOptions>插件配置项{}

返回值 ​

GraphicDraw 插件实例

类型定义 ​

GraphicDrawOptions ​

属性类型说明默认值
strokeColorstring边框颜色'#1CADFF'
strokeOpacitynumber边框透明度1
strokeWidthnumber边框宽度1
fillColorstring填充颜色'rgb(28, 173, 255)'
fillOpacitynumber填充透明度0.3
pointColorstring控制点颜色'#1CADFF'
pointOpacitynumber控制点透明度1
pointRadiusnumber控制点半径（像素）5
heightnumber图形拉伸高度0.1
circleSegmentsnumber圆形细分段数64
adsorbRadiusnumber多边形吸附半径（像素）8
autoSelectboolean绘制完成后是否自动选中true

属性 ​

state ​

  • 类型：DrawingState
  • 默认值：'idle'

当前绘制状态。也可通过 getState() 方法获取。

selectedGraphic ​

  • 类型：Graphic | null
  • 默认值：null

当前选中的图元。也可通过 getSelectedGraphic() 方法获取。

options ​

  • 类型：GraphicDrawOptions

插件当前配置项。

方法 ​

startDrawPolygon ​

typescript
startDrawPolygon(): void;

开始绘制多边形。如果当前有其他绘制进行中，会先取消。如果当前有选中的图元，会先取消选中。

交互方式：

  • 点击地图添加顶点
  • 移动鼠标预览连线
  • 双击左键 或 点击首顶点附近（吸附半径内）闭合多边形

参数 ​

无

返回值 ​

无

使用示例 ​

typescript
const graphicDraw = new GraphicDraw(bmap);
graphicDraw.startDrawPolygon();

startDrawRect ​

typescript
startDrawRect(): void;

开始绘制矩形。如果当前有其他绘制进行中，会先取消。如果当前有选中的图元，会先取消选中。

交互方式：

  • 第一次点击确定起点
  • 移动鼠标预览矩形
  • 第二次点击确定终点完成绘制（起点与终点距离需 > 2px）

参数 ​

无

返回值 ​

无

使用示例 ​

typescript
const graphicDraw = new GraphicDraw(bmap);
graphicDraw.startDrawRect();

startDrawCircle ​

typescript
startDrawCircle(): void;

开始绘制圆形。如果当前有其他绘制进行中，会先取消。如果当前有选中的图元，会先取消选中。

交互方式：

  • 第一次点击确定圆心
  • 移动鼠标预览圆形
  • 第二次点击确定半径完成绘制（半径需 > 5px）

参数 ​

无

返回值 ​

无

使用示例 ​

typescript
const graphicDraw = new GraphicDraw(bmap);
graphicDraw.startDrawCircle();

cancel ​

typescript
cancel(): void;

取消当前绘制或取消选中。

参数 ​

无

返回值 ​

无

使用示例 ​

typescript
graphicDraw.cancel();

getState ​

typescript
getState(): DrawingState;

获取当前绘制状态。

参数 ​

无

返回值 ​

DrawingState — 当前绘制状态

使用示例 ​

typescript
if (graphicDraw.getState() === 'polygon') {
  console.log('正在绘制多边形');
}

selectGraphic ​

typescript
selectGraphic(id: string): void;

根据 ID 选中一个图元。选中后显示包围盒控制框，可进行移动、缩放、旋转等编辑操作。

参数 ​

参数类型说明默认值
idstring图元ID-

返回值 ​

无

使用示例 ​

typescript
graphicDraw.selectGraphic('712be555');

deselectGraphic ​

typescript
deselectGraphic(): void;

取消当前选中的图元。

参数 ​

无

返回值 ​

无

使用示例 ​

typescript
graphicDraw.deselectGraphic();

getSelectedGraphic ​

typescript
getSelectedGraphic(): Graphic | null;

获取当前选中的图元。

参数 ​

无

返回值 ​

Graphic | null — 当前选中的图元，无选中时返回 null

使用示例 ​

typescript
const graphic = graphicDraw.getSelectedGraphic();
if (graphic) {
  console.log('选中图元ID:', graphic.options.id);
}

getGraphics ​

typescript
getGraphics(): Graphic[];

获取所有已绘制的图元列表。

参数 ​

无

返回值 ​

Graphic[] — 所有图元数组

使用示例 ​

typescript
const graphics = graphicDraw.getGraphics();
console.log(`共有 ${graphics.length} 个图元`);

loadGraphics ​

typescript
loadGraphics(options: GraphicOptions[]): void;

批量加载已有图形数据。每个图形的 id 若不指定则自动生成。

加载的图形坐标应为 3D 世界坐标（coords），插件会自动计算 center_coord_x/center_coord_y（中心点）和 Web 墨卡托坐标（cds、center_x、center_y）。

参数 ​

参数类型说明默认值
optionsGraphicOptions[]图形配置列表-

返回值 ​

无

使用示例 ​

typescript
graphicDraw.loadGraphics([
  {
    geometry: {
      type: 'polygon',
      coords: [[[0, 0], [10, 0], [10, 10], [0, 10], [0, 0]]],
      cds: [],
      curveCpt: [],
      curveIndex: []
    },
    fillColor: '#ff0000',
    fillOpacity: 0.5,
    height: 0.2
  }
]);

removeGraphic ​

typescript
removeGraphic(id: string): void;

根据 ID 移除一个图元。

参数 ​

参数类型说明默认值
idstring图元ID-

返回值 ​

无

使用示例 ​

typescript
graphicDraw.removeGraphic('712be555');

clearGraphics ​

typescript
clearGraphics(): void;

移除所有图元。

参数 ​

无

返回值 ​

无

使用示例 ​

typescript
graphicDraw.clearGraphics();

setCoordinates ​

typescript
setCoordinates(id: string, coords: Coordinate[][]): void;

设置图元的坐标数据。

参数 ​

参数类型说明默认值
idstring图元ID-
coordsCoordinate[][]3D 世界坐标数组-

返回值 ​

无

使用示例 ​

typescript
graphicDraw.setCoordinates('712be555', [[[5, 5], [15, 5], [15, 15], [5, 15], [5, 5]]]);

setRotation ​

typescript
setRotation(id: string, angle: number): void;

旋转图元。

参数 ​

参数类型说明默认值
idstring图元ID-
anglenumber旋转角度（弧度）-

返回值 ​

无

使用示例 ​

typescript
graphicDraw.setRotation('712be555', Math.PI / 4);

setWidth ​

typescript
setWidth(id: string, width: number): void;

设置图元宽度。

参数 ​

参数类型说明默认值
idstring图元ID-
widthnumber目标宽度（3D 世界单位）-

返回值 ​

无

使用示例 ​

typescript
graphicDraw.setWidth('712be555', 20);

setHeight ​

typescript
setHeight(id: string, height: number): void;

设置图元高度。

参数 ​

参数类型说明默认值
idstring图元ID-
heightnumber目标高度（3D 世界单位）-

返回值 ​

无

使用示例 ​

typescript
graphicDraw.setHeight('712be555', 15);

dispose ​

typescript
dispose(): void;

销毁插件，清理所有图形、事件监听和资源。

在 bmap 销毁时，会自动调用 dispose 方法，无需手动调用。

参数 ​

无

返回值 ​

无

使用示例 ​

typescript
graphicDraw.dispose();

事件 ​

GraphicDraw 通过 addEventListener / removeEventListener 监听以下事件：

start ​

typescript
graphicDraw.addEventListener('start', (e) => {
  // e.drawType: 'polygon' | 'rect' | 'circle'
});

开始绘制时触发。

事件参数 ​

属性类型说明
drawType'polygon' | 'rect' | 'circle'绘制类型

finish ​

typescript
graphicDraw.addEventListener('finish', (e) => {
  // e.graphic: Graphic
  // e.drawType: 'polygon' | 'rect' | 'circle'
});

绘制完成时触发。

事件参数 ​

属性类型说明
graphicGraphic完成的图元
drawType'polygon' | 'rect' | 'circle'绘制类型

cancel ​

typescript
graphicDraw.addEventListener('cancel', () => {});

取消绘制时触发。

select ​

typescript
graphicDraw.addEventListener('select', (e) => {
  // e.graphic: Graphic
});

选中图元时触发。

事件参数 ​

属性类型说明
graphicGraphic被选中的图元

deselect ​

typescript
graphicDraw.addEventListener('deselect', (e) => {
  // e.graphic: Graphic | null
});

取消选中图元时触发。

事件参数 ​

属性类型说明
graphicGraphic | null被取消选中的图元，可能为 null

graphic-click ​

typescript
graphicDraw.addEventListener('graphic-click', (e) => {
  // e.graphic: Graphic | null
});

点击图元时触发（在 idle 状态下）。

事件参数 ​

属性类型说明
graphicGraphic | null被点击的图元，未命中时为 null

change ​

typescript
graphicDraw.addEventListener('change', (e) => {
  // e.action: 'add' | 'update' | 'remove' | 'move' | 'rotate' | 'resize'
  // e.graphic?: Graphic
  // e.id?: string
});

图形数据变更时触发。

事件参数 ​

属性类型说明
action'add' | 'update' | 'remove' | 'move' | 'rotate' | 'resize'变更类型
graphicGraphic | undefined涉及的图元
idstring | undefined涉及的图元ID（remove 时使用）

使用示例 ​

完整示例 ​

typescript
import { BMap } from '@aibee/crc-bmap';
import { GraphicDraw } from '@aibee/crc-bmap/plugins/graphic-draw';

const bmap = new BMap('#container', {
  center: [0, 0],
  zoom: 18
});

// 创建绘制插件
const graphicDraw = new GraphicDraw(bmap, {
  strokeColor: '#FF6600',
  fillColor: 'rgba(255, 102, 0, 0.3)',
  autoSelect: true,
});

// 监听绘制完成
graphicDraw.addEventListener('finish', ({ graphic, drawType }) => {
  console.log(`绘制完成: ${drawType}`, graphic.options);
});

// 监听变更
graphicDraw.addEventListener('change', ({ action, graphic, id }) => {
  console.log(`图形变更: ${action}`, id);
});

// 开始绘制矩形
graphicDraw.startDrawRect();

// 获取所有图形
const allGraphics = graphicDraw.getGraphics();

编辑图形 ​

typescript
// 选中图形
graphicDraw.selectGraphic('some-graphic-id');

// 通过包围盒拖拽控制点进行移动、缩放、旋转

// 编程方式修改
graphicDraw.setRotation('some-graphic-id', Math.PI / 2);
graphicDraw.setWidth('some-graphic-id', 30);

// 取消选中
graphicDraw.deselectGraphic();