Cesium MapboxGL Leaflet OpenLayers
API文档
类名 SketchEditor2D

# 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

支持如下方法：
[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) // 绘制区
*

继承关系

方法

# addVertex(point, index)

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

参数:

名称 类型 描述
point Point

新增/插入顶点
index Number

新增/新增点的序号
Overrides:

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

# canRedo()

草图是否可执行恢复操作

Overrides:

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

Boolean

# canUndo()

草图是否可执行撤销操作

Overrides:

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

Boolean

# getGeometry()

获取草图几何对象

Overrides:

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

Geometry

# getSketchStyle()

获取草图样式

Overrides:

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

SketchStyle

# redo()

恢复被撤销的草图

Overrides:

查看源代码 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:

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

# removeVertex(index)

移除草图图形的某个顶点

参数:

名称 类型 描述
index Number

需更新的顶点的序号
Overrides:

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

# setSketchStyle(sketchStyle)

设置草图样式

参数:

名称 类型 描述
sketchStyle SketchStyle
Overrides:

查看源代码 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:

查看源代码 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:

查看源代码 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:

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

# undo()

撤销当前编辑操作

Overrides:

查看源代码 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:

查看源代码 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:

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

事件

# 草图绘制完成事件

属性:
Name Type Attributes Default Description
event Object

事件对象
type LayerEventType <optional>
 'drawn'

事件类型
geometry Geometry <optional>

绘制的几何对象
Inherited From:

查看源代码 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:

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

示例

草图被鼠标选中事件

sketchEditor.on('selected', (event) => {
  console.log("被选中事件:", event.selectedSketch)
})
构造函数
成员变量
方法
事件