组件

工具

测距、测面、圆、矩形、标注、画笔与坐标拾取

工具组件以受控 active prop 开关:true 开启、false 关闭。绘制结果属于用户数据,组件卸载不会清除已绘制的图形。

示例加载中…

点按钮开启对应工具,在地图上拖拽即可绘制;再点一次关闭。

测距工具 PolylineTool

<TdtPolylineTool :active="lineActive" color="#f97316" @draw="(e) => console.log(e.currentDistance)" />
Prop类型说明
activeboolean受控开关
showLabelboolean是否显示测距结果;关闭后可作画线工具使用
color / weight / opacity / lineStyle线样式,同折线

事件:draw(每加一点)、addpoint

测面工具 PolygonTool

<TdtPolygonTool :active="areaActive" fill-color="#f97316" @draw="(e) => console.log(e.currentArea)" />

线样式 props 同测距工具(另有 fillColor/fillOpacity)。事件:drawaddpoint

圆工具 CircleTool / 矩形工具 RectangleTool

<TdtCircleTool :active="circleActive" @draw="(e) => console.log(e.currentRadius)" />
<TdtRectangleTool :active="rectActive" @draw="(e) => console.log(e.currentBounds)" />

线样式与填充 props 同对应覆盖物。事件:CircleTool 为 draw(拖动中)、drawend;RectangleTool 为 draw

标注工具 MarkTool

<TdtMarkTool :active="markActive" @mouseup="(e) => console.log(e.lnglat, e.marker)" />
Prop类型说明
activeboolean受控开关
iconIcon标注图标,默认为 SDK 默认图标
followboolean标记图标是否跟随鼠标

事件:mouseup(标注完成,回调坐标与标注实例)

画笔工具 PaintBrushTool

<TdtPaintBrushTool :active="brushActive" :keepdrawing="true" :style="{ color: '#f97316', weight: 4 }" />
Prop类型说明
activeboolean受控开关
keepdrawingboolean保持工具的连续可用性
styleobject画笔留下笔迹的样式(官方 PaintBrushToolOptions 的 style 字段)

坐标拾取 CoordinatePickup

非鼠标工具体系,以 active 开关点击地图拾取坐标:

<TdtCoordinatePickup :active="pickupActive" @pick="(lnglat) => console.log(lnglat.lng, lnglat.lat)" />
Prop说明
active受控开关:true 开启拾取,false 关闭

事件:pick(点击地图回调地理坐标)

通用说明

  • 全部工具组件 expose 了 tool(SDK 工具实例),可命令式调用官方方法
  • 工具须写在 <TdtMap> 内部
Copyright © 2026