主题
交互类型 Interaction
标准版提供 3 种交互类型：绘制、编辑和量算。所有类型继承自基类 Interaction。
Interaction（基类）
所有交互的公共基类。
ts
class Interaction {
readonly id: string;
readonly type: string;
constructor(type: string);
}属性
| 属性 | 类型 | 说明 |
|---|---|---|
id | string | 交互唯一标识（自动生成） |
type | string | 交互类型标识 |
方法
| 方法 | 参数 | 返回值 | 说明 |
|---|---|---|---|
activate() | — | this | 激活交互 |
deactivate() | — | this | 停用交互 |
toggle() | — | this | 切换激活状态 |
isActive() | — | boolean | 是否激活 |
remove() | — | void | 移除交互，清空事件监听 |
on(type, handler) | type: string, handler: Function | void | 绑定事件 |
off(type, handler?) | type: string, handler?: Function | void | 解绑事件 |
事件
| 事件 | 说明 |
|---|---|
'activate' | 交互激活 |
'deactivate' | 交互停用 |
DrawInteraction
绘制交互，支持多种几何类型绘制。
构造函数
ts
class DrawInteraction extends Interaction {
readonly type = 'draw';
constructor(options?: DrawInteractionOptions);
}ts
interface DrawInteractionOptions {
mode?: 'point' | 'line' | 'polygon' | 'circle' | 'rectangle' | 'ellipse' | 'freehand';
style?: unknown;
snapping?: boolean;
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
mode | string | 'point' | 绘制模式 |
绘制模式
| 模式 | 说明 |
|---|---|
'point' | 绘制点 |
'line' | 绘制线 |
'polygon' | 绘制多边形 |
'circle' | 绘制圆 |
'rectangle' | 绘制矩形 |
'ellipse' | 绘制椭圆 |
'freehand' | 自由绘制 |
方法
| 方法 | 参数 | 返回值 | 说明 |
|---|---|---|---|
setMode(m) | m: string | this | 设置绘制模式 |
getMode() | — | string | 获取当前模式 |
start() | — | this | 开始绘制（等同 activate()） |
finish() | — | this | 完成绘制（等同 deactivate()） |
cancel() | — | this | 取消当前绘制 |
clear() | — | this | 清空已绘制的要素 |
undo() | — | this | 撤销上一步 |
getFeatures() | — | Feature[] | 获取已绘制的要素 |
事件
| 事件 | 回调参数 | 说明 |
|---|---|---|
'drawstart' | — | 开始绘制 |
'drawend' | { feature: Feature } | 完成绘制 |
'drawcancel' | — | 取消绘制 |
'drawundo' | — | 撤销 |
示例
ts
import { DrawInteraction, FillSymbol, LineSymbol } from '@gmap/standard';
// 绘制多边形
const draw = new DrawInteraction({
mode: 'polygon',
style: new FillSymbol({ color: 'rgba(51,136,255,0.3)' }),
snapping: true,
});
draw.on('drawend', (e) => {
console.log('绘制完成:', e.feature);
});
map.addInteraction(draw);
draw.start();
// 切换绘制模式
draw.setMode('line');
// 撤销
draw.undo();
// 获取已绘制的要素
const features = draw.getFeatures();
console.log(`已绘制 ${features.length} 个要素`);
// 清空
draw.clear();EditInteraction
编辑交互，支持要素的移动、变形等编辑操作。
构造函数
ts
class EditInteraction extends Interaction {
readonly type = 'edit';
constructor(options?: EditInteractionOptions);
}ts
interface EditInteractionOptions {
mode?: string;
target?: Feature | Layer;
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
mode | string | — | 编辑模式 |
方法
| 方法 | 参数 | 返回值 | 说明 |
|---|---|---|---|
setTarget(target) | target: Feature | Layer | this | 设置编辑目标 |
setMode(m) | m: string | this | 设置编辑模式 |
start() | — | this | 开始编辑 |
finish() | — | this | 完成编辑 |
cancel() | — | this | 取消编辑 |
undo() | — | this | 撤销 |
redo() | — | this | 重做 |
事件
| 事件 | 回调参数 | 说明 |
|---|---|---|
'editstart' | — | 开始编辑 |
'editing' | { feature: Feature } | 编辑中（拖拽） |
'editend' | { feature: Feature } | 完成编辑 |
'editcancel' | — | 取消编辑 |
示例
ts
import { EditInteraction } from '@gmap/standard';
const edit = new EditInteraction();
// 设置编辑目标图层
edit.setTarget(myFeatureLayer);
edit.start();
// 监听编辑事件
edit.on('editing', (e) => {
console.log('正在编辑:', e.feature);
});
edit.on('editend', (e) => {
console.log('编辑完成:', e.feature);
});
// 撤销/重做
edit.undo();
edit.redo();
// 完成并退出编辑模式
edit.finish();MeasureInteraction
量算交互，支持距离、面积、高度、方位角、坐标量算。
构造函数
ts
class MeasureInteraction extends Interaction {
readonly type = 'measure';
constructor(options?: MeasureInteractionOptions);
}ts
interface MeasureInteractionOptions {
mode?: 'distance' | 'area' | 'height' | 'bearing' | 'coordinate';
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
mode | string | 'distance' | 量算模式 |
量算模式
| 模式 | 说明 | 返回值单位 |
|---|---|---|
'distance' | 距离量算 | 米/千米 |
'area' | 面积量算 | 平方米/平方千米 |
'height' | 高度量算 | 米 |
'bearing' | 方位角量算 | 度 |
'coordinate' | 坐标量算 | [经度, 纬度] |
方法
| 方法 | 参数 | 返回值 | 说明 |
|---|---|---|---|
start() | — | this | 开始量算 |
stop() | — | this | 停止量算 |
clear() | — | this | 清空量算结果 |
getResult() | — | { value: number; unit: string; geometry: unknown } | 获取量算结果 |
事件
| 事件 | 回调参数 | 说明 |
|---|---|---|
'measurestart' | — | 开始量算 |
'measuring' | { value, unit, geometry } | 量算中（实时更新） |
| `'measureend' | { value, unit, geometry } | 量算完成 |
示例
ts
import { MeasureInteraction } from '@gmap/standard';
// 距离量算
const measureDistance = new MeasureInteraction({ mode: 'distance' });
measureDistance.on('measuring', (e) => {
console.log(`当前距离: ${e.value} ${e.unit}`);
});
measureDistance.on('measureend', (e) => {
console.log(`最终距离: ${e.value} ${e.unit}`);
});
map.addInteraction(measureDistance);
measureDistance.start();
// 面积量算
const measureArea = new MeasureInteraction({ mode: 'area' });
map.addInteraction(measureArea);
measureArea.start();
// 获取结果
const result = measureDistance.getResult();
console.log(result); // { value: 1234.5, unit: 'm', geometry: {...} }
// 停止并清空
measureDistance.stop();
measureDistance.clear();