Appearance
交互
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:
| 字段 | 类型 | 默认 | 说明 |
|---|---|---|---|
target | Map | — | 地图对象(也可后续 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:
| 字段 | 类型 | 默认 | 说明 |
|---|---|---|---|
target | Map | — | 地图对象 |
kind | DrawKind | 'point' | point/polyline/polygon/circle/square/rectangle |
config | DrawStyleConfig | — | 样式与行为配置 |
callback | (result: DrawResult) => void | — | 每次完成回调 |
DrawStyleConfig:pointIcon? / 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/Object。on/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();构造选项 FeatureEditorOptions:target?: Map、data?: 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[] |