Skip to content

交互

Measure / DrawTool 是独立工具类(非继承 ol);FeatureEditor 继承 ol/Object 以派发事件。三者都提供完整的 destroy()

Measure

测距 / 测面工具。绘制中实时显示分段长度与总长/面积+周长,绘制完成后可拖拽修改、点 ❌ 删除单条结果。

ts
import { Measure } from 'geoverse';

const measure = new Measure({
  target: map,
  kind: 'length',
  callback: ({ target }) => console.log(target.result), // "1.2 km"
});
measure.start();

构造选项 MeasureOptions

字段类型默认说明
targetMap地图对象(也可后续 setMap
kind'area' | 'length''length'测量类型
callback(result: MeasureResult) => void每次完成回调

MeasureResult{ target: { feature, result: string }, interaction: Measure, msg: 'geoverse:measure' }

方法签名说明
start / stop()启动 / 停止(stop 延迟避免误触双击)
setMap(map: Map)重新绑定地图(自动销毁旧绑定)
resetKind(kind: MeasureKind)切换测量类型(重建交互)
clearResult()清空全部测量结果
destroy()清空结果并回收图层/交互/监听

DrawTool

图形绘制工具:点/线/面/圆/正方形/矩形。

ts
import { DrawTool } from 'geoverse';

const draw = new DrawTool({
  target: map,
  kind: 'polygon',
  config: { infoDiv: true },
  callback: ({ target }) => console.log(target.coordinates), // WGS-84 经纬度
});

构造选项 DrawToolOptions

字段类型默认说明
targetMap地图对象
kindDrawKind'point'point/polyline/polygon/circle/square/rectangle
configDrawStyleConfig样式与行为配置
callback(result: DrawResult) => void每次完成回调

DrawStyleConfigpointIcon? / pointSize? / pointColor? / fillColor? / strokeColor? / strokeWeight? / strokeDashed?showGraphic?(绘制结束是否保留图形,默认 true)、infoDiv?(绘制时显示测量信息,默认 false)。

DrawResult{ target: { feature, coordinates, center, radius, type }, interaction, msg: 'geoverse:draw' }coordinates 为 WGS-84 经纬度(圆为圆心)。

方法签名说明
start / stop()启动 / 停止
setMap(map)重新绑定地图
resetKind(kind: DrawKind)切换绘制类型
setDrawStyle(config: DrawStyleConfig)自定义绘制样式
clearResult()清空绘制结果
destroy()回收图层与交互

FeatureEditor

继承 ol/Objecton / un / dispatchEvent 等基类方法可用。

要素顶点编辑器。start()/stop() 切换编辑态(编辑态显示顶点节点),每次拖拽结束派发 adjust 事件,stop() 派发 end 事件。

ts
import { FeatureEditor } from 'geoverse';

const editor = new FeatureEditor({ target: map, data: [feature] });
editor.on('adjust', (evt) => console.log('编辑中', evt));
editor.start();

构造选项 FeatureEditorOptionstarget?: Mapdata?: Feature[] | Feature

方法签名说明
start / stop()进入 / 退出编辑态(stop 恢复原样式并派发 end
setMap(map)重新绑定地图
resetData(dataset?)更换编辑对象
clearResult()清空编辑数据
destroy()恢复样式并回收交互

事件

事件类触发载荷
EditorAdjustEvent(type 'adjust'每次拖拽结束result: Feature | Feature[]time: number
EditorEndEvent(type 'end'stop()result: Feature | Feature[]