#### # new SketchEditor2D(options)

二维场景草图编辑类
[ES5引入方式]：
const { SketchEditor2D } = Zondy
[ES6引入方式]：
import { SketchEditor2D } from "@mapgis/webclient-leaflet-plugin"

#### 参数:

名称 | 类型 | 描述
--- | --- | ---
`options` | Object | 构造参数
`mapView` | MapView | 地图视图对象
`layer` | GraphicsLayer | 草图图层管对象
`sketchStyle` | SketchStyle | 草图符号
`snappingOption` | Object | 草图捕获配置项

查看源代码 leaflet/sketchEditor/SketchEditor2D.js, line 10

绑定事件:

- SketchEditorNew#event:草图绘制完成事件
- SketchEditorNew#event:草图被选中事件

##### 支持如下方法：

[1、开始绘制草图]
[2、停止绘制]
[3、移除当前草图]
[4、向草线或面草图中插入新的顶点]
[5、更新草图图形的某个顶点]
[6、移除草图图形的某个顶点]
[7、获取草图图形类型]
[8、设置草图样式]
[9、获取草图样式]
[10、获取草图几何对象]
[11、合并多个区几何]
[12、分割草图对象或区几何对象]
[13、撤销当前编辑操作]
[14、恢复被撤销的草图]

##### 示例

初始化一个二维场景草图编辑类

    // [ES5引入方式]：
    const { SketchEditor2D } = Zondy
    [ES6引入方式]：
    import { MapView, SketchEditor2D } from "@mapgis/webclient-leaflet-plugin" <br/>
    import { SketchStyle, SimpleMarkerSymbol, Color, SketchDataType} from "@mapgis/webclient-common" <br/>
    var map = new Map()
    var mapView = new MapView({
      viewId: "mapgis-2d-viewer",
      map: this.map,
    })
    var simpleMarkerSymbol = new SimpleMarkerSymbol({
      color: new Color(24, 144, 255, 1),
      size: 10,
    });
    var sketchStyle = new SketchStyle({
      vertexStyle: simpleMarkerSymbol,
        lineStyle: undefined,
        fillStyle: undefined
      })
    var sketchEditor2D = new SketchEditor2D({
      mapView: this.mapView,
      layer: new GraphicsLayer(),
      vertexStyle: vertexStyle
    })
    SketchEditor2D.start(SketchDataType.POINT) // 绘制点
    SketchEditor2D.start(SketchDataType.POLYLINE) // 绘制线
    SketchEditor2D.start(SketchDataType.POLYGON) // 绘制区
    *

### 继承关系

- SketchEditorNew

### 方法

#### # addVertex(point, index)

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

#### 参数:

名称 | 类型 | 描述
--- | --- | ---
`point` | Point | 新增/插入顶点
`index` | Number | 新增/新增点的序号

Overrides:
  - SketchEditorNew#addVertex

查看源代码 leaflet/sketchEditor/SketchEditor2D.js, line 188

#### # canRedo()

草图是否可执行恢复操作

Overrides:
  - SketchEditorNew#canRedo

查看源代码 leaflet/sketchEditor/SketchEditor2D.js, line 454

返回值:
类型: Boolean

#### # canUndo()

草图是否可执行撤销操作

Overrides:
  - SketchEditorNew#canUndo

查看源代码 leaflet/sketchEditor/SketchEditor2D.js, line 446

返回值:
类型: Boolean

#### # getGeometry()

获取草图几何对象

Overrides:
  - SketchEditorNew#getGeometry

查看源代码 leaflet/sketchEditor/SketchEditor2D.js, line 261

返回值:
类型: Geometry

#### # getSketchStyle()

获取草图样式

Overrides:
  - SketchEditorNew#getSketchStyle

查看源代码 leaflet/sketchEditor/SketchEditor2D.js, line 253

返回值:
类型: SketchStyle

#### # redo()

恢复被撤销的草图

Overrides:
  - SketchEditorNew#redo

查看源代码 leaflet/sketchEditor/SketchEditor2D.js, line 438

返回值:
类型: Geometry

##### 示例

二维草图几何分割

    // [ES5引入方式]：
    const { SketchEditor2D } = Zondy
    [ES6引入方式]：
    import { MapView, SketchEditor2D } from "@mapgis/webclient-leaflet-plugin" <br/>
    import { Polygon, LineString } from "@mapgis/webclient-common" <br/>
    var map = new Map()
    var mapView = new MapView({
      viewId: "mapgis-2d-viewer",
      map: this.map,
    })
    var sketchEditor2D = new SketchEditor2D({
      mapView: this.mapView,
      layer: new GraphicsLayer()
    })
    sketchEditor2D.start(SketchDataType.POLYGON)
    console.log("是否可以进行恢复操作：" + this.sketchEditor2D.canRedo())
    const geometry = this.sketchEditor2D.redo()
    console.log("恢复后的几何对象" + geometry)

#### # remove()

移除当前草图

Overrides:
  - SketchEditorNew#remove

查看源代码 leaflet/sketchEditor/SketchEditor2D.js, line 171

#### # removeVertex(index)

移除草图图形的某个顶点

#### 参数:

名称 | 类型 | 描述
--- | --- | ---
`index` | Number | 需更新的顶点的序号

Overrides:
  - SketchEditorNew#removeVertex

查看源代码 leaflet/sketchEditor/SketchEditor2D.js, line 205

#### # setSketchStyle(sketchStyle)

设置草图样式

#### 参数:

名称 | 类型 | 描述
--- | --- | ---
`sketchStyle` | SketchStyle |

Overrides:
  - SketchEditorNew#setSketchStyle

查看源代码 leaflet/sketchEditor/SketchEditor2D.js, line 245

##### 示例

    // ES5引入方式
    const { SimpleFillSymbol, SimpleLineSymbol } = Zondy.Symbol
    const { Color, SketchStyle } = Zondy
    // ES6引入方式
    import { SimpleFillSymbol, SimpleLineSymbol, Color, SketchStyle } from "@mapgis/webclient-common"
    // 新建一个填充样式
    const fillStyle = new SimpleFillSymbol({
      color: new Color(0, 255, 255, 1),
      outline: new SimpleLineSymbol({
        color: new Color(255, 0, 0, 1),
        width: 2
      })
    })
    // 新建一个草图样式
    const sketchStyle = new SketchStyle({
      // 传入填充样式给区注记使用
      fillStyle: fillStyle,
      // 绘制线注记时显示分段长度
      isShowSegmentLength: true,
      // 绘制区注记时显示面积
      isShowArea: true
    })
    sketchEditor2D.setSketchStyle(sketchStyle)

#### # split(target, splitPolyline)

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

#### 参数:

名称 | 类型 | 描述
--- | --- | ---
`target` | Polygon | SketchEditorNew | 被分割的几何/草图对象
`splitPolyline` | Polyline | 线几何对象

Overrides:
  - SketchEditorNew#split

查看源代码 leaflet/sketchEditor/SketchEditor2D.js, line 352

返回值:

合并后的几何对象

类型: Array.<SketchEditorNew>

##### 示例

二维草图几何分割

    // [ES5引入方式]：
    const { MapView, SketchEditor2D, Polygon, LineString } = Zondy
    [ES6引入方式]：
    import { MapView, SketchEditor2D } from "@mapgis/webclient-leaflet-plugin" <br/>
    import { Polygon, LineString } from "@mapgis/webclient-common" <br/>
    var map = new Map()
    var mapView = new MapView({
      viewId: "mapgis-2d-viewer",
      map: this.map,
    })
    var sketchEditor2D = new SketchEditor2D({
      mapView: this.mapView,
      layer: new GraphicsLayer()
    })
    const polygon = new Polygon({
      coordinates: [
      [
          [108, 29],
          [116, 29],
          [116, 33],
          [108, 33],
          [108, 29]
        ]
      ]
    })
    const polyline = new LineString({
      coordinates: [
        [100, 30],
        [120, 30]
      ]
    })
    const newSketchEditors = sketchEditor2D.split(polygon,polyline)

#### # start(dataType)

开始绘制草图

#### 参数:

名称 | 类型 | 描述
--- | --- | ---
`dataType` | SketchDataType | 草图编辑类型

Overrides:
  - SketchEditorNew#start

查看源代码 leaflet/sketchEditor/SketchEditor2D.js, line 157

##### 示例

初始化一个二维场景草图编辑类

    // [ES5引入方式]：
    const { SketchEditor2D } = Zondy
    [ES6引入方式]：
    import { MapView, SketchEditor2D } from "@mapgis/webclient-leaflet-plugin" <br/>
    import { SketchStyle, SimpleMarkerSymbol, Color, SketchDataType} from "@mapgis/webclient-common" <br/>
    var map = new Map()
    var mapView = new MapView({
      viewId: "mapgis-2d-viewer",
      map: this.map,
    })
    var simpleMarkerSymbol = new SimpleMarkerSymbol({
      color: new Color(24, 144, 255, 1),
      size: 10,
    });
    var sketchStyle = new SketchStyle({
      vertexStyle: simpleMarkerSymbol,
        lineStyle: undefined,
        fillStyle: undefined
      })
    var sketchEditor2D = new SketchEditor2D({
      mapView: this.mapView,
      layer: new GraphicsLayer(),
      vertexStyle: vertexStyle
    })
    SketchEditor2D.start(SketchDataType.POINT) // 绘制点
    SketchEditor2D.start(SketchDataType.POLYLINE) // 绘制线
    SketchEditor2D.start(SketchDataType.POLYGON) // 绘制区

#### # stop()

停止绘制

Overrides:
  - SketchEditorNew#stop

查看源代码 leaflet/sketchEditor/SketchEditor2D.js, line 164

#### # undo()

撤销当前编辑操作

Overrides:
  - SketchEditorNew#undo

查看源代码 leaflet/sketchEditor/SketchEditor2D.js, line 411

返回值:
类型: Geometry

##### 示例

二维草图几何分割

    // [ES5引入方式]：
    const { MapView, SketchEditor2D, Polygon, LineString, SketchDataType } = Zondy
    [ES6引入方式]：
    import { MapView, SketchEditor2D } from "@mapgis/webclient-leaflet-plugin" <br/>
    import { Polygon, LineString, SketchDataType } from "@mapgis/webclient-common" <br/>
    var map = new Map()
    var mapView = new MapView({
      viewId: "mapgis-2d-viewer",
      map: this.map,
    })
    var sketchEditor2D = new SketchEditor2D({
      mapView: this.mapView,
      layer: new GraphicsLayer()
    })
    sketchEditor2D.start(SketchDataType.POLYGON)
    console.log("是否可以进行撤销操作：" + this.sketchEditor2D.canUndo())
    const geometry = this.sketchEditor2D.undo()
    console.log("恢复后的几何对象" + geometry)

#### # union(polygons)

合并多个区几何

#### 参数:

名称 | 类型 | 描述
--- | --- | ---
`polygons` | Polygon | 被合并的区几何对象

Overrides:
  - SketchEditorNew#union

查看源代码 leaflet/sketchEditor/SketchEditor2D.js, line 309

返回值:

合并后的几何对象

类型: Polygon

##### 示例

二维草图几何合并

    // [ES5引入方式]：
    const { MapView, SketchEditor2D, polygon } = Zondy
    [ES6引入方式]：
    import { MapView, SketchEditor2D } from "@mapgis/webclient-leaflet-plugin" <br/>
    import { polygon } from "@mapgis/webclient-common" <br/>
    var map = new Map()
    var mapView = new MapView({
      viewId: "mapgis-2d-viewer",
      map: this.map,
    })
    var sketchEditor2D = new SketchEditor2D({
      mapView: this.mapView,
      layer: new GraphicsLayer()
    })
    const polygon = new Polygon({
      coordinates: [
        [
          [0, -60],
          [0, 60],
          [160, 60],
          [160, -60],
          [0, -60]
        ]
      ]
    })
    const polygon1 = new Polygon({
      coordinates: [
        [
          [10, -60],
          [10, 60],
          [170, 60],
          [170, -60],
          [10, -60]
        ]
      ]
    })
    const polygons = [polygon,polygon1]
    sketchEditor2D.union(polygons)

#### # updateVertex(point, index)

更新当前草图图形的某个顶点

#### 参数:

名称 | 类型 | 描述
--- | --- | ---
`point` | Point | 新的顶点
`index` | Number | 需更新的顶点的序号

Overrides:
  - SketchEditorNew#updateVertex

查看源代码 leaflet/sketchEditor/SketchEditor2D.js, line 197

### 事件

#### # 草图绘制完成事件

##### 属性:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`event` | Object |  |  | 事件对象
`type` | LayerEventType | <optional> | 'drawn' | 事件类型
`geometry` | Geometry | <optional> |  | 绘制的几何对象

Inherited From:
  - SketchEditorNew#event:草图绘制完成事件

查看源代码 common/sketchEditor/base/SketchEditorNew.js, line 49

##### 示例

鼠标绘制完成事件

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

#### # 草图被选中事件

##### 属性:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`event` | Object |  |  | 事件对象
`type` | LayerEventType | <optional> | 'selected' | 事件类型
`selectedSketch` | SketchEditor2D | SketchEditor3D | <optional> |  | 被选中的草图对象

Inherited From:
  - SketchEditorNew#event:草图被选中事件

查看源代码 common/sketchEditor/base/SketchEditorNew.js, line 59

##### 示例

草图被鼠标选中事件

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