组件
标绘
标号实体、标绘工具与标绘控件
对照官方标绘（plotSymbols）文档实现的三组能力：标号实体（覆盖物组件）、标绘工具（*Tool 组件）与标绘控件。均须写在 <TdtMap> 内部。
地图加载中…
地图左侧是标绘控件面板，可以交互绘制标号；地图上是一条静态绘制的箭头。
标号实体
22 个标号实体的统一 props 为 path（关键点坐标数组）与线、填充样式。下列说明与官方文档逐类对应。
tdt-arc
此类用来表示地图上构造一个弧线的覆盖物类。
<TdtArc :path="[[116.37, 39.89], [116.41, 39.93]]" />
<tdt-arc path="116.37,39.89;116.41,39.93"></tdt-arc>
构造：Arc(points:Array<LngLat>,opts:CardinalCurveOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | 弧线的线颜色。 |
| weight | number | 3 | 弧线的宽度，以像素为单位。 |
| opacity | number | 0.5 | 弧线的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | 弧线的线样式（solid或dashed）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置弧线的点数组。 |
| getLngLats() | Array<LngLat> | 返回弧线的控制点数组。 |
tdt-bezier-curve2
此类用来表示地图上构造一个二次贝塞尔曲线的覆盖物类。
<TdtBezierCurve2 :path="[[116.37, 39.89], [116.41, 39.93]]" />
<tdt-bezier-curve2 path="116.37,39.89;116.41,39.93"></tdt-bezier-curve2>
构造：BezierCurve2Ex(points:Array<LngLat>,opts:BezierCurve2Options)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | 贝塞尔曲线线颜色。 |
| weight | number | 3 | 贝塞尔曲线线的宽度，以像素为单位。 |
| opacity | number | 0.5 | 贝塞尔曲线的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | 贝塞尔曲线的样式（solid或dashed）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置曲线的点数组。 |
| getLngLats() | Array<LngLat> | 返回曲线的控制点数组。 |
tdt-bezier-curve3
此类用来表示地图上构造一个三次贝塞尔曲线的覆盖物类。
<TdtBezierCurve3 :path="[[116.37, 39.89], [116.41, 39.93]]" />
<tdt-bezier-curve3 path="116.37,39.89;116.41,39.93"></tdt-bezier-curve3>
构造：BezierCurve3Ex(points:Array<LngLat>,opts:BezierCurve3Options)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | 贝塞尔曲线线颜色。 |
| weight | number | 3 | 贝塞尔曲线线的宽度，以像素为单位。 |
| opacity | number | 0.5 | 贝塞尔曲线的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | 贝塞尔曲线的样式（solid或dashed）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置曲线的点数组。 |
| getLngLats() | Array<LngLat> | 返回曲线的控制点数组。 |
tdt-bezier-curve-arrow
此类用来表示地图上构造一个带箭头的贝塞尔曲线的覆盖物类。
<TdtBezierCurveArrow :path="[[116.37, 39.89], [116.41, 39.93]]" />
<tdt-bezier-curve-arrow path="116.37,39.89;116.41,39.93"></tdt-bezier-curve-arrow>
构造：BezierCurveArrow(points:Array<LngLat>,opts:BezierCurveArrowOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | 贝塞尔曲线箭头线颜色。 |
| weight | number | 3 | 贝塞尔曲线箭头线的宽度，以像素为单位。 |
| opacity | number | 0.5 | 贝塞尔曲线箭头线的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | 贝塞尔曲线箭头线的线样式（solid或dashed）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置贝塞尔曲线的点数组。 |
| getLngLats() | Array<LngLat> | 返回贝塞尔曲线的控制点数组。 |
tdt-bezier-curve-n
此类用来表示地图上构造一个N次贝塞尔曲线的覆盖物类。
<TdtBezierCurveN :path="[[116.37, 39.89], [116.41, 39.93]]" />
<tdt-bezier-curve-n path="116.37,39.89;116.41,39.93"></tdt-bezier-curve-n>
构造：BezierCurveNEx(points:Array<LngLat>,opts:BezierCurveNOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | 贝塞尔曲线线颜色。 |
| weight | number | 3 | 贝塞尔曲线线的宽度，以像素为单位。 |
| opacity | number | 0.5 | 贝塞尔曲线的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | 贝塞尔曲线的样式（solid或dashed）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置曲线的点数组。 |
| getLngLats() | Array<LngLat> | 返回曲线的控制点数组。 |
tdt-cardinal-curve
此类用来表示地图上构造一个Cardinal曲线的覆盖物类。
<TdtCardinalCurve :path="[[116.37, 39.89], [116.41, 39.93]]" />
<tdt-cardinal-curve path="116.37,39.89;116.41,39.93"></tdt-cardinal-curve>
构造：CardinalCurve(points:Array<LngLat>,opts:CardinalCurveOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | Cardinal曲线线颜色。 |
| weight | number | 3 | Cardinal曲线线的宽度，以像素为单位。 |
| opacity | number | 0.5 | Cardinal曲线的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | Cardinal曲线的样式（solid或dashed）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置曲线的点数组。 |
| getLngLats() | Array<LngLat> | 返回曲线的控制点数组。 |
tdt-cardinal-curve-arrow
此类用来表示地图上构造一个带箭头的Cardinal曲线的覆盖物类。
<TdtCardinalCurveArrow :path="[[116.37, 39.89], [116.41, 39.93]]" />
<tdt-cardinal-curve-arrow path="116.37,39.89;116.41,39.93"></tdt-cardinal-curve-arrow>
构造：CardinalCurveArrow(points:Array<LngLat>,opts:CardinalCurveArrowOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | Cardinal曲线箭头线颜色。 |
| weight | number | 3 | Cardinal曲线箭头线的宽度，以像素为单位。 |
| opacity | number | 0.5 | Cardinal曲线箭头线的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | Cardinal曲线箭头线的线样式（solid或dashed）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置Cardinal曲线的点数组。 |
| getLngLats() | Array<LngLat> | 返回Cardinal曲线的控制点数组。 |
tdt-close-curve
此类用来表示地图上构造一个闭合曲线的覆盖物类。
<TdtCloseCurve :path="[[116.37, 39.89], [116.41, 39.93]]" fill-color="#dc2626" fill-opacity="0.2" />
<tdt-close-curve path="116.37,39.89;116.41,39.93" fill-color="#dc2626" fill-opacity="0.2"></tdt-close-curve>
构造：CloseCurve(points:Array<LngLat>,opts:CloseCurveOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | 闭合曲线的线颜色。 |
| weight | number | 3 | 闭合曲线的宽度，以像素为单位。 |
| opacity | number | 0.5 | 闭合曲线的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | 闭合曲线的线样式（solid或dashed）。 |
| fillColor | String | "#0000FF" | 闭合曲线填充颜色。当参数为空时，覆盖物将没有填充效果。 |
| fillOpacity | number | 0.2 | 闭合曲线填充的透明度（范围0-1 之间）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置闭合曲线的点数组。 |
| getLngLats() | Array<LngLat> | 返回闭合曲线的控制点数组。 |
tdt-curve-flag
此类用来表示地图上构造一个曲线旗的覆盖物类。
<TdtCurveFlag :path="[[116.37, 39.89], [116.41, 39.93]]" fill-color="#dc2626" fill-opacity="0.2" />
<tdt-curve-flag path="116.37,39.89;116.41,39.93" fill-color="#dc2626" fill-opacity="0.2"></tdt-curve-flag>
构造：CurveFlag(points:Array<LngLat>,opts:CurveFlagOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | 曲线旗边线颜色。 |
| weight | number | 3 | 曲线旗边线的宽度，以像素为单位。 |
| opacity | number | 0.5 | 曲线旗边线的透明度（范围0-1 之间）。 |
| fillColor | String | "#0000FF" | 曲线旗填充颜色。当参数为空时，曲线旗将没有填充效果。 |
| fillOpacity | number | 0.2 | 曲线旗填充的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | 曲线旗边线的样式（solid或dashed）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置旗子的控制点数组。 |
| getLngLats() | Array<LngLat> | 返回旗子的控制点数组。 |
tdt-diagonal-arrow
此类用来表示地图上构造一个曲线箭头的覆盖物类。
<TdtDiagonalArrow :path="[[116.37, 39.89], [116.41, 39.93]]" fill-color="#dc2626" fill-opacity="0.2" />
<tdt-diagonal-arrow path="116.37,39.89;116.41,39.93" fill-color="#dc2626" fill-opacity="0.2"></tdt-diagonal-arrow>
构造：DiagonalArrow(points:Array<LngLat>,opts:DiagonalArrowOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | 曲线箭头边的线颜色。 |
| weight | number | 3 | 曲线箭头边的宽度，以像素为单位。 |
| opacity | number | 0.5 | 曲线箭头边的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | 曲线箭头边的线样式（solid或dashed）。 |
| fillColor | String | "#0000FF" | 曲线箭头填充颜色。当参数为空时，覆盖物将没有填充效果。 |
| fillOpacity | number | 0.2 | 曲线箭头填充的透明度（范围0-1 之间）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置曲线箭头的点数组。 |
| getLngLats() | Array<LngLat> | 返回曲线箭头的控制点数组。 |
tdt-double-arrow
此类用来表示地图上构造一个双箭头的覆盖物类。
<TdtDoubleArrow :path="[[116.37, 39.89], [116.41, 39.93]]" fill-color="#dc2626" fill-opacity="0.2" />
<tdt-double-arrow path="116.37,39.89;116.41,39.93" fill-color="#dc2626" fill-opacity="0.2"></tdt-double-arrow>
构造：DoubleArrow(points:Array<LngLat>,opts:DoubleArrowOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | 双箭头边的线颜色。 |
| weight | number | 3 | 双箭头边的宽度，以像素为单位。 |
| opacity | number | 0.5 | 双箭头边的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | 双箭头边的线样式（solid或dashed）。 |
| fillColor | String | "#0000FF" | 双箭头填充颜色。当参数为空时，覆盖物将没有填充效果。 |
| fillOpacity | number | 0.2 | 双箭头填充的透明度（范围0-1 之间）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置双箭头的点数组。 |
| getLngLats() | Array<LngLat> | 返回双箭头的控制点数组。 |
tdt-dove-tail-diagonal-arrow
此类用来表示地图上构造一个燕尾曲线箭头的覆盖物类。
<TdtDoveTailDiagonalArrow :path="[[116.37, 39.89], [116.41, 39.93]]" fill-color="#dc2626" fill-opacity="0.2" />
<tdt-dove-tail-diagonal-arrow path="116.37,39.89;116.41,39.93" fill-color="#dc2626" fill-opacity="0.2"></tdt-dove-tail-diagonal-arrow>
构造：DoveTailDiagonalArrow(points:Array<LngLat>,opts:DoveTailDiagonalArrowOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | 燕尾曲线箭头边的线颜色。 |
| weight | number | 3 | 燕尾曲线箭头边的宽度，以像素为单位。 |
| opacity | number | 0.5 | 燕尾曲线箭头边的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | 燕尾曲线箭头边的线样式（solid或dashed）。 |
| fillColor | String | "#0000FF" | 燕尾曲线箭头填充颜色。当参数为空时，覆盖物将没有填充效果。 |
| fillOpacity | number | 0.2 | 燕尾曲线箭头填充的透明度（范围0-1 之间）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置燕尾曲线箭头的点数组。 |
| getLngLats() | Array<LngLat> | 返回燕尾曲线箭头的控制点数组。 |
tdt-dove-tail-straight-arrow
此类用来表示地图上构造一个燕尾直线箭头的覆盖物类。
<TdtDoveTailStraightArrow :path="[[116.37, 39.89], [116.41, 39.93]]" fill-color="#dc2626" fill-opacity="0.2" />
<tdt-dove-tail-straight-arrow path="116.37,39.89;116.41,39.93" fill-color="#dc2626" fill-opacity="0.2"></tdt-dove-tail-straight-arrow>
构造：DoveTailStraightArrow(points:Array<LngLat>,opts:DoveTailStraightArrowOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | 燕尾直线箭头边的线颜色。 |
| weight | number | 3 | 燕尾直线线箭头边的宽度，以像素为单位。 |
| opacity | number | 0.5 | 燕尾直线箭头边的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | 燕尾直线箭头边的线样式（solid或dashed）。 |
| fillColor | String | "#0000FF" | 燕尾直线箭头填充颜色。当参数为空时，覆盖物将没有填充效果。 |
| fillOpacity | number | 0.2 | 燕尾直线箭头填充的透明度（范围0-1 之间）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置燕尾直线箭头的点数组。 |
| getLngLats() | Array<LngLat> | 返回燕尾直线箭头的控制点数组。 |
tdt-gathering-place
此类用来表示地图上构造一个聚集区的覆盖物类。
<TdtGatheringPlace :path="[[116.37, 39.89], [116.41, 39.93]]" fill-color="#dc2626" fill-opacity="0.2" />
<tdt-gathering-place path="116.37,39.89;116.41,39.93" fill-color="#dc2626" fill-opacity="0.2"></tdt-gathering-place>
构造：GatheringPlace(points:Array<LngLat>,opts:GatheringPlaceOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | 聚集区的线颜色。 |
| weight | number | 3 | 聚集区的宽度，以像素为单位。 |
| opacity | number | 0.5 | 聚集区的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | 聚集区的线样式（solid或dashed）。 |
| fillColor | String | "#0000FF" | 聚集区填充颜色。当参数为空时，聚集区覆盖物将没有填充效果。 |
| fillOpacity | number | 0.2 | 聚集区填充的透明度（范围0-1 之间）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置弧线的点数组。 |
| getLngLats() | Array<LngLat> | 返回弧线的控制点数组。 |
tdt-parallel-search
此类用来表示地图上构造一个平行搜寻区的覆盖物类。
<TdtParallelSearch :path="[[116.37, 39.89], [116.41, 39.93]]" />
<tdt-parallel-search path="116.37,39.89;116.41,39.93"></tdt-parallel-search>
构造：ParallelSearch(points:Array<LngLat>,opts:ParallelSearchOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | 平行搜寻区线颜色。 |
| weight | number | 3 | 平行搜寻区线的宽度，以像素为单位。 |
| opacity | number | 0.5 | 平行搜寻区线的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | 平行搜寻区线的线样式（solid或dashed）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置平行搜寻区的点数组。 |
| getLngLats() | Array<LngLat> | 返回平行搜寻区的控制点数组。 |
tdt-polyline-arrow
此类用来表示地图上构造一个带箭头的直线覆盖物类。。
<TdtPolylineArrow :path="[[116.37, 39.89], [116.41, 39.93]]" />
<tdt-polyline-arrow path="116.37,39.89;116.41,39.93"></tdt-polyline-arrow>
构造：PolylineArrow(points:Array<LngLat>,opts:PolylineArrowOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | 直线箭头线颜色。 |
| weight | number | 3 | 直线箭头线的宽度，以像素为单位。 |
| opacity | number | 0.5 | 直线箭头线的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | 直线箭头线的线样式（solid或dashed）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置直线箭头的点数组。 |
| getLngLats() | Array<LngLat> | 返回直线箭头的控制点数组。 |
tdt-rect-flag
此类用来表示地图上构造一个方块旗的覆盖物类。
<TdtRectFlag :path="[[116.37, 39.89], [116.41, 39.93]]" fill-color="#dc2626" fill-opacity="0.2" />
<tdt-rect-flag path="116.37,39.89;116.41,39.93" fill-color="#dc2626" fill-opacity="0.2"></tdt-rect-flag>
构造：RectFlag(points:Array<LngLat>,opts:RectFlagOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | 方块旗边线颜色。 |
| weight | number | 3 | 方块旗边线的宽度，以像素为单位。 |
| opacity | number | 0.5 | 方块旗边线的透明度（范围0-1 之间）。 |
| fillColor | String | "#0000FF" | 方块旗填充颜色。当参数为空时，将没有填充效果。 |
| fillOpacity | number | 0.2 | 方块旗填充的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | 方块旗边线的样式（solid或dashed）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置旗子的控制点数组 |
| getLngLats() | Array<LngLat> | 返回旗子的控制点数组。 |
tdt-round-rect
此类用来表示地图上构造一个圆角矩形的覆盖物类。
<TdtRoundRect :path="[[116.37, 39.89], [116.41, 39.93]]" fill-color="#dc2626" fill-opacity="0.2" />
<tdt-round-rect path="116.37,39.89;116.41,39.93" fill-color="#dc2626" fill-opacity="0.2"></tdt-round-rect>
构造：RoundRect(points:Array<LngLat>,opts:RoundRect Options)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | 圆角矩形的边线颜色。 |
| weight | number | 3 | 圆角矩形边线的宽度，以像素为单位。 |
| opacity | number | 0.5 | 圆角矩形边线的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | 圆角矩形边线样式（solid或dashed）。 |
| fillColor | String | "#0000FF" | 圆角矩形填充颜色。当参数为空时，覆盖物将没有填充效果。 |
| fillOpacity | number | 0.2 | 圆角矩形填充的透明度（范围0-1 之间）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置圆角矩形的点数组。 |
| getLngLats() | Array<LngLat> | 返回圆角矩形的控制点数组。 |
tdt-sector
此类用来表示地图上构造一个扇形的覆盖物类。
<TdtSector :path="[[116.37, 39.89], [116.41, 39.93]]" fill-color="#dc2626" fill-opacity="0.2" />
<tdt-sector path="116.37,39.89;116.41,39.93" fill-color="#dc2626" fill-opacity="0.2"></tdt-sector>
构造：Sector(points:Array<LngLat>,opts:SectorOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | 扇形边的线颜色。 |
| weight | number | 3 | 扇形边的宽度，以像素为单位。 |
| opacity | number | 0.5 | 扇形边的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | 扇形边的线样式（solid或dashed）。 |
| fillColor | String | "#0000FF" | 扇形填充颜色。当参数为空时，覆盖物将没有填充效果。 |
| fillOpacity | number | 0.2 | 扇形填充的透明度（范围0-1 之间）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置扇形的点数组。 |
| getLngLats() | Array<LngLat> | 返回扇形的控制点数组。 |
tdt-sector-search
此类用来表示地图上构造一个扇形搜寻区的覆盖物类。
<TdtSectorSearch :path="[[116.37, 39.89], [116.41, 39.93]]" />
<tdt-sector-search path="116.37,39.89;116.41,39.93"></tdt-sector-search>
构造：SectorSearch(points:Array<LngLat>,opts:SectorSearchOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | 扇形搜寻区线颜色。 |
| weight | number | 3 | 扇形搜寻区线的宽度，以像素为单位。 |
| opacity | number | 0.5 | 扇形搜寻区线的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | 扇形搜寻区线的线样式（solid或dashed）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置扇形搜寻区的点数组。 |
| getLngLats() | Array<LngLat> | 返回扇形搜寻区的控制点数组。 |
tdt-straight-arrow
此类用来表示地图上构造一个直线箭头的覆盖物类。
<TdtStraightArrow :path="[[116.37, 39.89], [116.41, 39.93]]" fill-color="#dc2626" fill-opacity="0.2" />
<tdt-straight-arrow path="116.37,39.89;116.41,39.93" fill-color="#dc2626" fill-opacity="0.2"></tdt-straight-arrow>
构造：StraightArrow(points:Array<LngLat>,opts:StraightArrowOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | 直线箭头边的线颜色。 |
| weight | number | 3 | 直线线箭头边的宽度，以像素为单位。 |
| opacity | number | 0.5 | 直线箭头边的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | 直线箭头边的线样式（solid或dashed）。 |
| fillColor | String | "#0000FF" | 直线箭头填充颜色。当参数为空时，覆盖物将没有填充效果。 |
| fillOpacity | number | 0.2 | 直线箭头填充的透明度（范围0-1 之间）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置直线箭头的点数组。 |
| getLngLats() | Array<LngLat> | 返回直线箭头的控制点数组。 |
tdt-triangle-flag
此类用来表示地图上构造一个三角旗的覆盖物类。
<TdtTriangleFlag :path="[[116.37, 39.89], [116.41, 39.93]]" fill-color="#dc2626" fill-opacity="0.2" />
<tdt-triangle-flag path="116.37,39.89;116.41,39.93" fill-color="#dc2626" fill-opacity="0.2"></tdt-triangle-flag>
构造：TriangleFlag(points:Array<LngLat>,opts:TriangleFlagOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | string | "#0000FF" | 三角旗边线颜色。 |
| weight | number | 3 | 三角旗边线的宽度，以像素为单位。 |
| opacity | number | 0.5 | 三角旗边线的透明度（范围0-1 之间）。 |
| fillColor | String | "#0000FF" | 三角旗填充颜色。当参数为空时，覆盖物将没有填充效果。 |
| fillOpacity | number | 0.2 | 三角旗填充的透明度（范围0-1 之间）。 |
| lineStyle | string | "solid" | 三角旗边线的样式（solid或dashed）。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setLngLats(lnglats:Array<LngLat>) | none | 设置旗子的控制点数组 |
| getLngLats() | Array<LngLat> | 返回旗子的控制点数组。 |
标绘工具
工具以 active 受控开关，绘制完成的图形通过 getLayers() 获取。事件参数中的 currentLnglats 为当前图形点串，allLayers 为全部成品。
tdt-arc-tool
构建一个绘制弧线的工具类。
<TdtArcTool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-arc-tool active style='{"color":"#dc2626","weight":4}'></tdt-arc-tool>
构造：ArcTool(map:Map,options:ArcToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储弧线的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有弧线。 |
| getLayers() | Array<Arc> | 获取所有编辑完成的弧线。 |
| open() | boolean | 开启弧线工具。 |
| close() | none | 关闭弧线工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String, handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
tdt-bezier-curve2-tool
构建一个绘制二次贝塞尔曲线的工具类。
<TdtBezierCurve2Tool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-bezier-curve2-tool active style='{"color":"#dc2626","weight":4}'></tdt-bezier-curve2-tool>
构造：BezierCurve2Tool(map:Map,options:BezierCurve2Options)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储二次贝塞尔曲线的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有二次贝塞尔曲线。 |
| getLayers() | Array<BezierCurve2> | 获取所有编辑完成的二次贝塞尔曲线。 |
| open() | boolean | 开启二次贝塞尔曲线工具。 |
| close() | none | 关闭二次贝塞尔曲线工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String, handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 标的事件。 |
tdt-bezier-curve3-tool
构建一个绘制三次贝塞尔曲线的工具类。
<TdtBezierCurve3Tool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-bezier-curve3-tool active style='{"color":"#dc2626","weight":4}'></tdt-bezier-curve3-tool>
构造：BezierCurve3Tool(map:Map,options:BezierCurve3FlagToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储三次贝塞尔曲线的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有三次贝塞尔曲线。 |
| getLayers() | Array<BezierCurve3> | 获取所有编辑完成的三次贝塞尔曲线。 |
| open() | boolean | 开启三次贝塞尔曲线工具。 |
| close() | none | 关闭三次贝塞尔曲线工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String, handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
tdt-bezier-curve-arrow-tool
构建一个绘制带箭头的贝塞尔曲线的工具类。
<TdtBezierCurveArrowTool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-bezier-curve-arrow-tool active style='{"color":"#dc2626","weight":4}'></tdt-bezier-curve-arrow-tool>
构造：BezierCurveArrowTool(map:Map,options:BezierCurveArrowToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储贝塞尔箭头曲线的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有贝塞尔箭头曲线。 |
| getLayers() | Array<BezierCurveArrow> | 获取所有编辑完成的贝塞尔箭头曲线。 |
| open() | boolean | 开启贝塞尔箭头曲线工具。 |
| close() | none | 关闭贝塞尔箭头曲线工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String,handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
| dbclick | {type,target,currentLnglats,currentLayer,allLayers} | 工具双击结束编辑时触发的事件。 |
tdt-bezier-curve-n-tool
构建一个绘制N次贝塞尔曲线的工具类。
<TdtBezierCurveNTool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-bezier-curve-n-tool active style='{"color":"#dc2626","weight":4}'></tdt-bezier-curve-n-tool>
构造：BezierCurveNTool(map:Map,options:BezierCurveNToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储N次贝塞尔曲线的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有贝塞尔曲线。 |
| getLayers() | Array<BezierCurveN> | 获取所有编辑完成的贝塞尔曲线。 |
| open() | boolean | 开启贝塞尔曲线工具。 |
| close() | none | 关闭贝塞尔曲线工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String, handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
tdt-cardinal-curve-tool
构建一个绘制Cardinal曲线的工具类。
<TdtCardinalCurveTool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-cardinal-curve-tool active style='{"color":"#dc2626","weight":4}'></tdt-cardinal-curve-tool>
构造：CardinalCurveTool(map:Map,options:CardinalCurveToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储Cardinal曲线的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有Cardinal曲线。 |
| getLayers() | Array<CardinalCurve> | 获取所有编辑完成的Cardinal曲线。 |
| open() | boolean | 开启Cardinal曲线工具。 |
| close() | none | 关闭Cardinal曲线工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String, handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
| dbclick | {type,target,currentLnglats,currentLayer,allLayers} | 工具双击结束编辑时触发的事件。 |
tdt-cardinal-curve-arrow-tool
构建一个绘制带箭头的Cardinal曲线的工具类。
<TdtCardinalCurveArrowTool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-cardinal-curve-arrow-tool active style='{"color":"#dc2626","weight":4}'></tdt-cardinal-curve-arrow-tool>
构造：CardinalCurveArrowTool(map:Map,options:CardinalCurveArrowToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储Cardinal箭头曲线的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有Cardinal箭头曲线。 |
| getLayers() | Array<CardinalCurveArrow> | 获取所有编辑完成的Cardinal箭头曲线。 |
| open() | boolean | 开启Cardinal箭头曲线工具。 |
| close() | none | 关闭Cardinal箭头曲线工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String,handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
| dbclick | {type,target,currentLnglats,currentLayer,allLayers} | 工具双击结束编辑时触发的事件。 |
tdt-close-curve-tool
构建一个绘制闭合曲线的工具类。
<TdtCloseCurveTool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-close-curve-tool active style='{"color":"#dc2626","weight":4}'></tdt-close-curve-tool>
构造：CloseCurveTool(map:Map,options:CloseCurveToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5,fillColor:'red',fillOpacity:0.2,fill:true} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储闭合曲线的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有闭合曲线。 |
| getLayers() | Array<CloseCurve> | 获取所有编辑完成的闭合曲线。 |
| open() | boolean | 开启闭合曲线工具。 |
| close() | none | 关闭闭合曲线工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String, handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
| dbclick | {type,target,currentLnglats,currentLayer,allLayers} | 工具双击结束编辑时触发的事件。 |
tdt-curve-flag-tool
构建一个绘制曲线旗的工具类。
<TdtCurveFlagTool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-curve-flag-tool active style='{"color":"#dc2626","weight":4}'></tdt-curve-flag-tool>
构造：CurveFlagTool(map:Map,options:CurveFlagToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5,fillColor:'red',fillOpacity:0.2,fill:true} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储曲线旗的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有曲线旗。 |
| getLayers() | Array<CurveFlag> | 获取所有编辑完成的曲线旗。 |
| open() | boolean | 开启曲线旗工具。 |
| close() | none | 关闭曲线旗工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String, handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
tdt-diagonal-arrow-tool
构建一个绘制斜箭头的工具类。
<TdtDiagonalArrowTool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-diagonal-arrow-tool active style='{"color":"#dc2626","weight":4}'></tdt-diagonal-arrow-tool>
构造：DiagonalArrowTool(map:Map,options:DiagonalArrowToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5,fillColor:'red',fillOpacity:0.2,fill:true} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储斜箭头的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有斜箭头。 |
| getLayers() | Array<DiagonalArrow> | 获取所有编辑完成的斜箭头。 |
| open() | boolean | 开启斜箭头工具。 |
| close() | none | 关闭斜箭头工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String, handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
| dbclick | {type,target,currentLnglats,currentLayer,allLayers} | 工具双击结束编辑时触发的事件。 |
tdt-double-arrow-tool
构建一个绘制双箭头的工具类。
<TdtDoubleArrowTool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-double-arrow-tool active style='{"color":"#dc2626","weight":4}'></tdt-double-arrow-tool>
构造：DoubleArrowTool(map:Map,options:DoubleArrowToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5,fillColor:'red',fillOpacity:0.2,fill:true} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储双箭头的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有双箭头。 |
| getLayers() | Array<DoubleArrow> | 获取所有编辑完成的双箭头。 |
| open() | boolean | 开启双箭头工具。 |
| close() | none | 关闭双箭头工具。 |
| addEventListener(event:String,handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String,handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
tdt-dove-tail-diagonal-arrow-tool
构建一个绘制燕尾斜箭头的工具类。
<TdtDoveTailDiagonalArrowTool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-dove-tail-diagonal-arrow-tool active style='{"color":"#dc2626","weight":4}'></tdt-dove-tail-diagonal-arrow-tool>
构造：DoveTailDiagonalArrowTool(map:Map,options:DoveTailDiagonalArrowToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5,fillColor:'red',fillOpacity:0.2,fill:true} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储燕尾斜箭头的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有燕尾斜箭头。 |
| getLayers() | Array<DoveTailDiagonalArrow> | 获取所有编辑完成的燕尾斜箭头。 |
| open() | boolean | 开启燕尾斜箭头工具。 |
| close() | none | 关闭燕尾斜箭头工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String, handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
tdt-dove-tail-straight-arrow-tool
构建一个绘制燕尾直线箭头的工具类。
<TdtDoveTailStraightArrowTool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-dove-tail-straight-arrow-tool active style='{"color":"#dc2626","weight":4}'></tdt-dove-tail-straight-arrow-tool>
构造：DoveTailStraightArrowTool(map:Map,options:DoveTailStraightArrowToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5,fillColor:'red',fillOpacity:0.2,fill:true} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储燕尾直线箭头的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有燕尾直线箭头。 |
| getLayers() | Array<DoveTailStraightArrow> | 获取所有编辑完成的燕尾直线箭头。 |
| open() | boolean | 开启燕尾直线箭头工具。 |
| close() | none | 关闭燕尾直线箭头工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String, handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
| dbclick | {type,target,currentLnglats,currentLayer,allLayers} | 工具双击结束编辑时触发的事件。 |
tdt-gathering-place-tool
构建一个绘制聚集区的工具类。
<TdtGatheringPlaceTool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-gathering-place-tool active style='{"color":"#dc2626","weight":4}'></tdt-gathering-place-tool>
构造：GatheringPlaceTool(map:Map,options:GatheringPlaceToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5,fillColor:'red',fillOpacity:0.2,fill:true} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储聚集区的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有聚集区。 |
| getLayers() | Array<GatheringPlace> | 获取所有编辑完成的聚集区。 |
| open() | boolean | 开启聚集区工具。 |
| close() | none | 关闭聚集区工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String, handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
tdt-parallel-search-tool
构建一个绘制平行搜寻区的工具类。
<TdtParallelSearchTool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-parallel-search-tool active style='{"color":"#dc2626","weight":4}'></tdt-parallel-search-tool>
构造：ParallelSearchTool(map:Map,options:ParallelSearchToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储平行搜寻区的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有平行搜寻区。 |
| getLayers() | Array<ParallelSearch> | 获取所有编辑完成的平行搜寻区。 |
| open() | boolean | 开启平行搜寻区工具。 |
| close() | none | 关闭平行搜寻区工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String, handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
| dbclick | {type,target,currentLnglats,currentLayer,allLayers} | 工具双击结束编辑时触发的事件。 |
tdt-polyline-arrow-tool
构建一个绘制带箭头的直线工具类。
<TdtPolylineArrowTool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-polyline-arrow-tool active style='{"color":"#dc2626","weight":4}'></tdt-polyline-arrow-tool>
构造：PolylineArrowTool(map:Map,options:PolylineArrowToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储直线箭头的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有直线箭头。 |
| getLayers() | Array<PolylineArrow> | 获取所有编辑完成的直线箭头。 |
| open() | boolean | 开启直线箭头工具。 |
| close() | none | 关闭直线箭头工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String, handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
| dbclick | {type,target,currentLnglats,currentLayer,allLayers} | 工具双击结束编辑时触发的事件。 |
tdt-rect-flag-tool
构建一个绘制方块旗的工具类。
<TdtRectFlagTool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-rect-flag-tool active style='{"color":"#dc2626","weight":4}'></tdt-rect-flag-tool>
构造：RectFlagTool(map:Map,options:RectFlagToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5,fillColor:'red',fillOpacity:0.2,fill:true} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储方块旗的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有方块旗。 |
| getLayers() | Array<RectFlag> | 获取所有编辑完成的方块旗。 |
| open() | boolean | 开启方块旗工具。 |
| close() | none | 关闭方块旗工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String, handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
tdt-round-rect-tool
构建一个绘制圆角矩形的工具类。
<TdtRoundRectTool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-round-rect-tool active style='{"color":"#dc2626","weight":4}'></tdt-round-rect-tool>
构造：RoundRectTool(map:Map,options:RoundRectToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5,fillColor:'red',fillOpacity:0.2,fill:true} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储圆角矩形的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有圆角矩形。 |
| getLayers() | Array<RoundRect> | 获取所有编辑完成的圆角矩形。 |
| open() | boolean | 开启圆角矩形工具。 |
| close() | none | 关闭圆角矩形工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String, handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | click{type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
tdt-sector-tool
构建一个绘制扇形的工具类。
<TdtSectorTool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-sector-tool active style='{"color":"#dc2626","weight":4}'></tdt-sector-tool>
构造：SectorTool(map:Map,options:SectorToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5,fillColor:'red',fillOpacity:0.2,fill:true} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储扇形的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有扇形。 |
| getLayers() | Array<Sector> | 获取所有编辑完成的扇形。 |
| open() | boolean | 开启扇形工具。 |
| close() | none | 关闭扇形工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String, handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
tdt-sector-search-tool
构建一个绘制扇形搜寻区的工具类。
<TdtSectorSearchTool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-sector-search-tool active style='{"color":"#dc2626","weight":4}'></tdt-sector-search-tool>
构造：SectorSearchTool(map:Map,options:SectorSearchToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储扇形搜寻区的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有扇形搜寻区。 |
| getLayers() | Array<SectorSearch> | 获取所有编辑完成的扇形搜寻区。 |
| open() | boolean | 开启扇形搜寻区工具。 |
| close() | none | 关闭扇形搜寻区工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String, handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
tdt-straight-arrow-tool
构建一个绘制直线箭头的工具类。
<TdtStraightArrowTool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-straight-arrow-tool active style='{"color":"#dc2626","weight":4}'></tdt-straight-arrow-tool>
构造：StraightArrowTool(map:Map,options:StraightArrowToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5,fillColor:'red',fillOpacity:0.2,fill:true} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储直线箭头的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有直线箭头。 |
| getLayers() | Array<StraightArrow> | 获取所有编辑完成的直线箭头。 |
| open() | boolean | 开启直线箭头工具。 |
| close() | none | 关闭直线箭头工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String, handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
| dbclick | {type,target,currentLnglats,currentLayer,allLayers} | 工具双击结束编辑时触发的事件。 |
tdt-triangle-flag-tool
构建一个绘制三角旗的工具类。
<TdtTriangleFlagTool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-triangle-flag-tool active style='{"color":"#dc2626","weight":4}'></tdt-triangle-flag-tool>
构造：TriangleFlagTool(map:Map,options:TriangleFlagToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5,fillColor:'red',fillOpacity:0.2,fill:true} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储三角旗的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有三角旗。 |
| getLayers() | Array<TriangleFlag> | 获取所有编辑完成的三角旗。 |
| open() | boolean | 开启三角旗工具。 |
| close() | none | 关闭三角旗工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String, handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
tdt-hand-drawing-tool
构建一个绘制自由线的的工具类。
<TdtHandDrawingTool :active="drawing" :style="{ color: '#dc2626', weight: 4 }" />
<tdt-hand-drawing-tool active style='{"color":"#dc2626","weight":4}'></tdt-hand-drawing-tool>
构造：HandDrawingTool(map:Map,options:HandDrawingToolOptions)
构造参数（官方 Options）：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | {color:"red",weight:5,opacity:0.5} | 通过参数设置工具绘制图形的样式。 |
| layers | LayerGroup | null | 工具存储自由线的容器，当该参数为空时，工具创建一个空的图层容器。 |
| 方法 | 返回值 | 说明 |
|---|---|---|
| clear() | none | 清空工具绘制所有自由线。 |
| getLayers() | Array<HandDrawing> | 获取所有编辑完成的自由线。 |
| open() | boolean | 开启自由线工具。 |
| close() | none | 关闭自由线工具。 |
| addEventListener(event:String, handler:Function) | none | 添加事件监听函数。 |
| removeEventListener(event:String, handler:Function) | none | 移除事件监听函数。 |
| 事件 | 参数 | 说明 |
|---|---|---|
| click | {type,target,currentLnglats,currentLayer,allLayers} | 工具点击一次地图触发的事件。 |
| move | {type,target,currentLnglats,currentLayer,allLayers} | 工具在绘制图形时移动鼠标的事件。 |
| dbclick | {type,target,currentLnglats,currentLayer,allLayers} | 工具双击结束编辑时触发的事件。 |
标绘控件
官方以地图控件形态提供的标绘面板（tdt-control-plot-symbols），按钮驱动全部标号的绘制，并提供图层管理方法：
<tdt-control-plot-symbols position="topleft" />
| 方法 | 返回值 | 说明 |
|---|---|---|
| clearLayers() | null | 清空控件所有绘制的。 |
| getLayers() | Array<Layer> | 获取控件所有绘制的图形。 |
| Close() | null | 关闭并清空当前绘制的图形。 |