Class: SketchEditor

// ES5引入方式
const { SketchEditor } = zondy.tool.sketch
// ES6引入方式
import { SketchEditor } from "@mapgis/webclient-common"

Extends

• Evented

Members

editableBoolean

草图是否可编辑。默认值为true，可编辑

editOptionObject

草图编辑配置项。默认开启图形整体编辑和顶点编辑

isShowTipBoolean

是否显示草图提示文字。默认值为true，显示提示文字

isSimpleBoolean

草图是否进行拓扑检查。默认值为false，不进行拓扑检查

layerGraphicsLayer

草图图形图层

measureOptionNumber

草图量算配置项

sketchDataTypeNumber

草图绘制类型

sketchStyleSketchStyle

草图样式

snapAndReferGeometriesArray.<Geometry>

捕获和线造区边界参考几何图形集合

snapOptionObject

草图捕获配置项

viewMapView SceneView

地图视图

Events

创建草图图形时事件

sketchEditor/base/SketchEditor.js, line 132

Properties:

Name	Type	Description
event	SketchEditorEvent	事件消息体对象

Example

创建草图图形时事件

sketchEditor.on('create', (event) => {
  console.log("被选中事件:", event)
})

标绘制线或区的一个顶点完成事件（废弃）

sketchEditor/base/SketchEditor.js, line 111

Properties:

Name	Type	Description
event	Object	事件对象 Properties Name Type Default Description type LayerEventType 'drawn-vertex' 可选 事件类型 geometry Geometry 可选 绘制的几何对象

Example

鼠标绘制线或区的一个顶点完成事件

sketchEditor.on('drawn-vertex', (event) => {
  console.log("绘制的几何对象:", event.geometry)
})

移除草图图形事件

sketchEditor/base/SketchEditor.js, line 150

Properties:

Name	Type	Description
event	SketchEditorEvent	事件消息体对象

Example

移除草图图形事件

sketchEditor.on('remove', (event) => {
  console.log("被选中事件:", event)
})

编辑草图图形时事件

sketchEditor/base/SketchEditor.js, line 141

Properties:

Name	Type	Description
event	SketchEditorEvent	事件消息体对象

Example

编辑草图图形时事件

sketchEditor.on('update', (event) => {
  console.log("编辑图形时事件:", event)
})

草图绘制完成事件

sketchEditor/base/SketchEditor.js, line 87

Properties:

Name	Type	Description
eventName	SketchEditorEventType	可选 事件类型
event	Object	事件对象 Properties Name Type Default Description toolEventInfo Object null 可选 事件类型 Properties Name Type Default Description type SketchEditorToolEventType null 可选 草图编辑工具事件类型 state SketchEditorState SketchEditorState.create 可选 创建或编辑时，草图图形子状态 feature Feature null 可选 要素对象 geometry Geometry 可选 几何对象

Example

鼠标绘制完成事件

sketchEditor.on(SketchEditorEventType.create, (event) => {
  console.log("绘制的要素对象:", event.feature)
})

草图绘制完成事件（废弃）

sketchEditor/base/SketchEditor.js, line 101

Properties:

Name	Type	Description
event	Object	事件对象 Properties Name Type Default Description type LayerEventType 'drawn' 可选 事件类型 geometry Geometry 可选 绘制的几何对象

Example

鼠标绘制完成事件

sketchEditor.on('drawn', (event) => {
  console.log("绘制的几何对象:", event.geometry)
})

草图编辑器回退事件

sketchEditor/base/SketchEditor.js, line 168

Properties:

Name	Type	Description
event	SketchEditorEvent	事件消息体对象

Example

草图编辑器回退事件

sketchEditor.on('redo', (event) => {
  console.log("被选中事件:", event.selectedSketch)
})

草图编辑器撤销事件

sketchEditor/base/SketchEditor.js, line 159

Properties:

Name	Type	Description
event	SketchEditorEvent	事件消息体对象

Example

草图编辑器撤销事件

sketchEditor.on('undo', (event) => {
  console.log("被选中事件:", event)
})

草图被选中事件（废弃）

sketchEditor/base/SketchEditor.js, line 121

Properties:

Name	Type	Description
event	Object	事件对象 Properties Name Type Default Description type LayerEventType 'selected' 可选 事件类型 selectedSketch SketchEditorLeaflet | SketchEditorCesium 可选 被选中的草图对象

Example

草图被鼠标选中事件

sketchEditor.on('selected', (event) => {
  console.log("被选中事件:", event.selectedSketch)
})

Methods

addVertex(point, index){Geometry}

sketchEditor/base/SketchEditor.js, line 603

向当前线或区草图中插入新的顶点

Name	Type	Description
point	Point	新增/插入顶点
index	Number	新增点的索引值，索引值从0开始

Returns:

Type	Description
Geometry	改变后的图形几何

canRedo(){Boolean}

sketchEditor/base/SketchEditor.js, line 1002

草图是否可执行恢复操作

Returns:

Type	Description
Boolean

canUndo(){Boolean}

sketchEditor/base/SketchEditor.js, line 994

草图是否可执行撤销操作

Returns:

Type	Description
Boolean

destroy()

sketchEditor/base/SketchEditor.js, line 1052

销毁草图编辑器

drawPolylineToPolygon(snapAndReferGeometries){Array.<Polygon>}

sketchEditor/base/SketchEditor.js, line 914

线拓扑造区

Name	Type	Description
snapAndReferGeometries	Array.<Polygon>	捕获参考几何对象数组

Returns:

Type	Description
Array.<Polygon>	分割后的几何对象

getGeometry(){Geometry}

sketchEditor/base/SketchEditor.js, line 1395

获取草图几何对象

Returns:

Type	Description
Geometry

getLayer(){GraphicsLayer}

sketchEditor/base/SketchEditor.js, line 774

获取草图图层

Returns:

Type	Description
GraphicsLayer

getLayer(){GraphicsLayer}

sketchEditor/base/SketchEditor.js, line 804

获取草图图层

Returns:

Type	Description
GraphicsLayer

getSketchDataType(){SketchDataType}

sketchEditor/base/SketchEditor.js, line 633

获取草图图形类型

Returns:

Type	Description
SketchDataType

getSketchStyle(){SketchStyle}

sketchEditor/base/SketchEditor.js, line 723

获取草图样式

Returns:

Type	Description
SketchStyle

getSnapAndReferGeometries(){Array.<Geometry>}

sketchEditor/base/SketchEditor.js, line 1440

获取捕获和线造区边界参考几何图形集合

Returns:

Type	Description
Array.<Geometry>	捕捉配置项

getSnapOption(){Object}

sketchEditor/base/SketchEditor.js, line 1421

获取捕捉配置项

Returns:

Type	Description
Object	捕捉配置项

inherited off(types, fn, context){Object}

base/Evented.js, line 328

移除事件
示例如下:
[1、移除一个事件的指定回调函数]
[2、移除一个事件的所有回调函数]
[3、移除多个事件的同一个指定的回调函数]
[4、移除多个指定事件的回调函数]
[5、删除时指定上下文 - types类型为字符串]
[6、删除时指定上下文 - types类型为对象]

Name	Type	Description
types	string	可选 移除指定事件类型上绑定的回调函数 当类型为字符串时，可以移除单个或多个事件类型绑定的回调函数，单个事件："click"，多个事件：以空格分割:"click double-click"； 当types为对象时，使用如下方式移除事件：{'click': onClickFun, 'mouse-move': onMouseMoveFun}
fn	function	可选 事件回调函数，当types为字符串，且不指定要删除的回调函数时，删除该事件上的所有回调函数
context	Object	可选 事件回调函数的this关键字将指向的对象

Returns:

Type	Description
Object	当前实例

Examples

移除一个事件的指定回调函数

// 一个事件的回调函数
const clickFunction = function (event) {
  console.log("点击事件:", event)
}
// 调用MapView或SceneView的off方法移除一个事件的回调函数
view.off('click', clickFunction)

移除一个事件的所有回调函数

// 一个事件的回调函数1
const clickFunction1 = function (event) {
  console.log("点击事件1:", event)
}

// 一个事件的回调函数2
const clickFunction2 = function (event) {
  console.log("点击事件2:", event)
}

// 调用MapView或SceneView的off方法移除一个事件的所有回调函数
// 不指定回调函数，则移除该事件上的所有绑定的回调函数
view.off('click')

移除多个事件的同一个指定的回调函数

// 多个事件的同一个回调函数
const eventFunction = function (event) {
  console.log("事件:", event)
}
// 调用MapView或SceneView的off方法移除多个事件的同一个指定的回调函数
view.off('click double-click', eventFunction)

移除多个指定事件的回调函数

// 一个事件的回调函数
const clickFunction = function (event) {
  console.log("click事件:", event)
}
// 调用MapView或SceneView的off方法移除多个指定事件的回调函数
view.off({
   // 移除click事件上一个指定的函数
  "click": clickFunction,
  // 移除double-click上所有指定的函数
  "double-click": undefined
})

删除时指定上下文 - types类型为字符串

// 一个事件的回调函数
const clickFunction = function (event) {
  console.log("点击事件:", event)
}
// 调用MapView或SceneView的off方法移除一个事件的回调函数
view.off('click', clickFunction, view)
// 调用MapView或SceneView的off方法移除一个事件的所有回调函数
view.off('click', undefined, view)

删除时指定上下文 - types类型为对象

// 一个事件的回调函数
const clickFunction = function (event) {
  console.log("click事件:", event)
}
// 调用MapView或SceneView的off方法移除多个指定事件的回调函数
view.off({
   // 移除click事件上一个指定的函数
  "click": clickFunction,
  // 移除double-click上所有指定的函数
  "double-click": undefined
}, view)

inherited on(types, fn, context){Object}

base/Evented.js, line 232

注册一个新的监听事件;
示例如下：
[1、注册一个事件]
[2、一次注册多个事件 - 同一个回调函数]
[3、一次注册多个事件 - 分别指回调应函数]
[4、当types为字符串时 - 指定上下文]
[5、当types为对象时 - 指定上下文]

Name	Type	Default	Description
types	String | Object	null	可选 事件类型 当types为字符串时，可以定义单个或多个事件，单个事件："click"，多个事件：以空格分割:"click double-click"； 当types为对象时，使用如下方式指定事件：{'click': onClickFun, 'mouse-move': onMouseMoveFun}
fn	function	null	可选 事件回调函数
context	Object	null	可选 事件回调函数的this关键字将指向的对象

Returns:

Type	Description
Object	当前实例

Examples

注册一个事件

// 初始化一个点击事件回调函数
const clickFunction = function (event) {
  console.log("点击事件:", event)
}
// 调用MapView或SceneView的on方法注册一个点击事件
view.on('click', clickFunction)

一次注册多个事件 - 同一个回调函数

// 初始化一个事件回调函数
const eventFunction = function (event) {
  console.log("事件:", event)
}

// 调用MapView或SceneView的on方法注册多个事件
// 多个事件类型使用同一个回调函数
view.on('click right-click-down', eventFunction)

一次注册多个事件 - 分别指回调应函数

// 初始化一个左键点击事件回调函数
const clickFunction = function (event) {
  console.log("click事件:", event)
}

// 初始化一个右键按下事件回调函数
const rightClickFunction = function (event) {
  console.log("right-click-down事件:", event)
}

// 调用MapView或SceneView的on方法注册多个事件
// 每一个事件类型，使用单独的回调函数
// 注意使用此种方式，一种类型的事件仅能指定一个回调函数
view.on({
  "click": clickFunction,
  "right-click-down": rightClickFunction
})

指定上下文 - types类型为字符串

// 初始化一个点击事件回调函数
const clickFunction = function (event) {
  console.log("点击事件:", event)
  console.log("上下文对象:", this)
}
// 调用MapView或SceneView的on方法注册一个点击事件
// 指定view为回调函数的上下文对象
view.on('click', clickFunction, view)

指定上下文 - types类型为对象

// 初始化一个点击事件回调函数
const clickFunction = function (event) {
  console.log("点击事件:", event)
  console.log("上下文对象:", this)
}
// 调用MapView或SceneView的on方法注册一个点击事件
// 指定view为回调函数的上下文对象
view.on({
  "click": clickFunction,
  "right-click-down": clickFunction
}, view)

redo(){Geometry}

sketchEditor/base/SketchEditor.js, line 975

恢复被撤销的草图

Returns:

Type	Description
Geometry	恢复后的几何对象

remove()

sketchEditor/base/SketchEditor.js, line 556

移除当前草图

removeVertex(index){Geometry}

sketchEditor/base/SketchEditor.js, line 624

移除当前选中的线或区草图图形的某个顶点

Name	Type	Description
index	Number	需移除的顶点的索引值，索引值从0开始

Returns:

Type	Description
Geometry	改变后的图形几何

select(featureDef)

sketchEditor/base/SketchEditor.js, line 1010

选中指定的草图图形要素

Name	Type	Description
featureDef	Feature | String	要素对象或要素对象的ID

setIsShowTip(isShow)

sketchEditor/base/SketchEditor.js, line 782

设置草图文字提示是否显示

Name	Type	Description
isShow	Boolean

setLayer(sketchStyle)

sketchEditor/base/SketchEditor.js, line 731

设置草图图层

Name	Type	Description
sketchStyle	GraphicsLayer

setSketchStyle(sketchStyle)

sketchEditor/base/SketchEditor.js, line 641

设置草图样式

Name	Type	Description
sketchStyle	SketchStyle

setSnapAndReferGeometries(geometries)

sketchEditor/base/SketchEditor.js, line 1429

设置捕获和线造区边界参考几何图形集合

Name	Type	Description
geometries	Array.<Geometry>	几何图形集合

setSnapOption()

sketchEditor/base/SketchEditor.js, line 1412

设置捕捉配置项

Name	Type	Default	Description
snapOption.isSnapVertexCoincident	Boolean	false	可选 是否自动捕捉顶点重合
snapOption.isSnapVertexInLine	Boolean	false	可选 是否自动捕捉线上的点
snapOption.isSnapPerpendicular	Boolean	false	可选 是否自动捕捉垂线垂点
snapOption.isSnapParallel	Boolean	false	可选 是否自动捕捉平行线
snapOption.snapSketchGeometry	Boolean	false	可选 是否捕捉正在绘制的图形的边界
snapOption.pixelTolerance	Number	10	可选 捕获像素容差

split(target, splitPolyline){Array.<Polygon>}

sketchEditor/base/SketchEditor.js, line 856

分割草图对象或区几何对象

Name	Type	Description
target	Polygon | SketchEditor	被分割的几何/草图对象
splitPolyline	Polyline	线几何对象

Returns:

Type	Description
Array.<Polygon>	分割后的几何对象

start(data, extensionOptions)

sketchEditor/base/SketchEditor.js, line 329

开始(鼠标)绘制草图 根据传入绘制草图类型，开始鼠标绘制。
绘制点图形，鼠标单击即绘制。
绘制线图形，鼠标单击绘制线的一个顶点；鼠标移动，延长线图形；鼠标双击，完成线图形绘制。
绘制区图形，鼠标单击绘制区的一个顶点；鼠标移动，区图形随鼠标位置变动；鼠标双击，完成区图形绘制。

Name	Type	Description
data	SketchDataType | Geometry	绘制的草图类型或几何对象
extensionOptions	Object	草图编辑的扩展属性，可以通过该属性传入草图编辑额外需要的参数 Name Type Description vertexNumber Number 可选 绘制线/区时的顶点限制数量。（例如绘制直线，则vertexNumber=2；绘制直三角形，则vertexNumber=3。）

startCustomDrawTool(CustomDrawTool)

sketchEditor/base/SketchEditor.js, line 345

开始(鼠标)绘制自定义草图图形

Name	Type	Description
CustomDrawTool	Class.<SketchBaseDrawTool>	自定义草图图形工具类

stop()

sketchEditor/base/SketchEditor.js, line 535

停止鼠标绘制草图

undo(){Geometry}

sketchEditor/base/SketchEditor.js, line 956

撤销当前编辑操作

Returns:

Type	Description
Geometry	撤销后的几何对象

union(polygons){Polygon}

sketchEditor/base/SketchEditor.js, line 813

合并多个区几何

Name	Type	Description
polygons	Polygon	被合并的区几何对象

Returns:

Type	Description
Polygon	合并后的几何对象

updateVertex(point, index){Geometry}

sketchEditor/base/SketchEditor.js, line 614

更新当前选中线或区草图图形的某个顶点

Name	Type	Description
point	Point	新的顶点
index	Number	需更新的顶点的索引值，索引值从0开始

Returns:

Type	Description
Geometry	改变后的图形几何