Common Cesium-Plugin MapboxGL-Plugin Leaflet-Plugin OpenLayers-Plugin Video-Plugin
API文档
类名 SketchEditor

# new SketchEditor(options)

二维Leaflet引擎草图编辑类
继承自zondy.SketchEditor

[ES5引入方式]：
const { SketchEditor } = zondy.leaflet.tool.sketch
[ES6引入方式]：
import { SketchEditor } from "@mapgis/webclient-leaflet-plugin"

参数:

名称 类型 描述
options Object

构造参数
view MapView | SceneView

地图视图对象
layer GraphicsLayer

草图图层管对象
sketchStyle SketchStyle

草图符号
snapOption Object

草图捕获配置项
  • SketchEditor#event:草图绘制完成事件
  • SketchEditor#event:草图被选中事件

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

示例

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

// [ES5引入方式]：
const { Color } = zondy
const { SketchDataType } = zondy.enum
const { SimpleMarkerSymbol } = zondy.symbol
const { SketchStyle } = zondy.tool.sketch
const { MapView } = zondy.leaflet
const { SketchEditor } = zondy.leaflet.tool.sketch
[ES6引入方式]：
import { MapView, SketchEditor } 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: 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 sketchEditor = new SketchEditor({
  view: mapView,
  layer: new GraphicsLayer(),
  vertexStyle: vertexStyle
})
sketchEditor.start(SketchDataType.POINT) // 绘制点
sketchEditor.start(SketchDataType.POLYLINE) // 绘制线
sketchEditor.start(SketchDataType.POLYGON) // 绘制区
*

继承关系

  • zondy.SketchEditor

方法

# addVertex(point, index)

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

参数:

名称 类型 描述
point Point

新增/插入顶点
index Number

新增/新增点的序号

# canRedo()

草图是否可执行恢复操作

Boolean

# canUndo()

草图是否可执行撤销操作

Boolean

# drawPolylineToPolygon(snapAndReferGeometries)

线拓扑造区

参数:

名称 类型 描述
snapAndReferGeometries Array.<Polygon>

捕获参考几何对象数组
示例

二维草图线拓扑造区

// [ES5引入方式]：
const { Polygon, LineString } = zondy.geometry
const { MapView } = zondy.leaflet
const { SketchEditor } = zondy.leaflet.tool.sketch
[ES6引入方式]：
import { MapView, SketchEditor } 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: map,
})
var testGeometries = [
 new Polygon({
   coordinates: [
     [
       [114.0, 29.0],
       [117.0, 29.0],
       [117.0, 35.0],
       [114.0, 35.0],
       [114.0, 29.0]
     ]
   ]
 }),
 new Polygon({
   coordinates: [
     [
       [113.0, 29.0],
       [116.0, 29.0],
       [116.0, 35.0],
       [113.0, 35.0],
       [113.0, 29.0]
     ]
   ]
 })
]
testFeatures = [
new Feature({
    id: '11114',
    geometry: this.testGeometries[0],
    symbol: new SimpleFillSymbol({
      color: new Color(0, 255, 255, 0.5),
      outline: new SimpleLineSymbol({
        color: new Color(0, 255, 255, 0.8),
        width: 2
      })
    })
  }),
  new Feature({
    id: '11115',
    geometry: this.testGeometries[1],
    symbol: new SimpleFillSymbol({
      color: new Color(0, 255, 255, 0.5),
      outline: new SimpleLineSymbol({
        color: new Color(0, 255, 255, 0.8),
        width: 2
      })
    })
  }),
]
var testLayer = new GraphicsLayer({
   graphics: this.testFeatures
})
map.add(testLayer)
var sketchEditor = new SketchEditor({
  view: mapView,
  layer: new GraphicsLayer()
})
sketchEditor.drawPolylineToPolygon(testGeometries)

# getGeometry()

获取草图几何对象

Geometry

# getSketchStyle()

获取草图样式

SketchStyle

# redo()

恢复被撤销的草图

Geometry
示例

二维草图几何分割

// [ES5引入方式]：
const { Polygon, LineString } = zondy.geometry
const { SketchDataType } = zondy.enum
const { MapView } = zondy.leaflet
const { SketchEditor } = zondy.leaflet.tool.sketch
[ES6引入方式]：
import { MapView, SketchEditor } 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: map,
})
var sketchEditor = new SketchEditor({
  view: mapView,
  layer: new GraphicsLayer()
})
sketchEditor.start(SketchDataType.POLYGON)
console.log("是否可以进行恢复操作：" + sketchEditor.canRedo())
const geometry = sketchEditor.redo()
console.log("恢复后的几何对象" + geometry)

# remove()

移除当前草图

# removeVertex(index)

移除草图图形的某个顶点

参数:

名称 类型 描述
index Number

需更新的顶点的序号

# setSketchStyle(sketchStyle)

设置草图样式

参数:

名称 类型 描述
sketchStyle SketchStyle
示例
// ES5引入方式
const { SimpleMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol } = zondy.Symbol
const { Map, Color } = zondy
const { MapView } = zondy.leaflet
const { SketchStyle } = zondy.tool.sketch
const { SketchEditor } = zondy.leaflet.tool.sketch
const { SketchDataType } = zondy.Enum
// ES6引入方式
import { Map, SimpleMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol, Color, SketchStyle, SketchDataType } from "@mapgis/webclient-common"
import { MapView, SketchEditor } from "@mapgis/webclient-leaflet-plugin" <br/>
var map = new Map()
var mapView = new MapView({
  viewId: "mapgis-2d-viewer",
  map: map,
})
// 新建一个填充样式
var fillStyle = new SimpleFillSymbol({
  color: new Color(0, 255, 255, 1),
  outline: new SimpleLineSymbol({
    color: new Color(255, 0, 0, 1),
    width: 2
  })
})
// 新建一个草图样式
var sketchStyle = new SketchStyle({
  vertexStyle: new SimpleMarkerSymbol({
    color: new Color(0, 255, 255, 1),
    size: 10,
    outline: new SimpleLineSymbol({
      color: new Color(255, 255, 255, 1),
      width: 3
    })
  }),
  lineStyle: new SimpleLineSymbol({
    color: new Color(0, 255, 255, 0.8),
    width: 3
  }),
  fillStyle: new SimpleFillSymbol({
    color: new Color(0, 255, 255, 0.5),
    outline: new SimpleLineSymbol({
      color: new Color(0, 255, 255, 0.8),
      width: 2
    })
  }),
  selectBoxStyle: new SimpleFillSymbol({
    color: new Color(122, 22, 255, 0.5),
    outline: new SimpleLineSymbol({
      color: new Color(122, 22, 255, 0.8),
      width: 1
    })
  }),
  selectVertexStyle: new SimpleMarkerSymbol({
    color: new Color(122, 22, 255, 1),
    size: 12,
    outline: new SimpleLineSymbol({
      color: new Color(255, 255, 255, 1),
      width: 1
    })
  }),
  selectVertexStyle: new SimpleMarkerSymbol({
    color: new Color(0, 188, 0, 1),
    size: 11,
    outline: new SimpleLineSymbol({
      color: new Color(255, 255, 255, 1),
      width: 1
    })
  }),
  selectMidVertexStyle: new SimpleMarkerSymbol({
    color: new Color(0, 0, 255, 1),
    size: 8,
    outline: new SimpleLineSymbol({
      color: new Color(255, 255, 255, 1),
      width: 1
    })
  })
})
var sketchEditor = new SketchEditor({
   view: mapView,
   layer: graphicsLayer,
 })
sketchEditor.setSketchStyle(sketchStyle)
sketchEditor.start(SketchDataType.POLYGON)

# split(target, splitPolyline)

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

参数:

名称 类型 描述
target Polygon | SketchEditor

被分割的几何/草图对象
splitPolyline Polyline

线几何对象

分割后的几何对象

Array.<Polygon>
示例

二维草图几何分割

// [ES5引入方式]：
const { Polygon, LineString } = zondy.geometry
const { MapView } = zondy.leaflet
const { SketchEditor } = zondy.leaflet.tool.sketch
[ES6引入方式]：
import { MapView, SketchEditor } 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: map,
})
var sketchEditor = new SketchEditor({
  view: 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 = SketchEditor.split(polygon,polyline)

# start(dataType, extensionOptions)

开始绘制草图

参数:

名称 类型 描述
dataType SketchDataType

草图编辑类型
extensionOptions Object

草图编辑的扩展属性，可以通过该属性传入草图编辑额外需要的参数
示例

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

// [ES5引入方式]：
const { Color } = zondy
const { SketchDataType } = zondy.enum
const { SimpleMarkerSymbol } = zondy.symbol
const { SketchStyle } = zondy.tool.sketch
const { MapView } = zondy.leaflet
const { SketchEditor } = zondy.leaflet.tool.sketch
[ES6引入方式]：
import { MapView, SketchEditor } 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: 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 sketchEditor = new SketchEditor({
  view: mapView,
  layer: new GraphicsLayer(),
  vertexStyle: vertexStyle
})
sketchEditor.start(SketchDataType.POINT) // 绘制点
sketchEditor.start(SketchDataType.POLYLINE) // 绘制线
sketchEditor.start(SketchDataType.POLYGON) // 绘制区

# startCustomDrawTool(dataType)

开始绘制草图

参数:

名称 类型 描述
dataType SketchDataType

草图编辑类型
示例

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

// [ES5引入方式]：
const { Color } = zondy
const { SketchDataType } = zondy.enum
const { SimpleMarkerSymbol } = zondy.symbol
const { SketchStyle } = zondy.tool.sketch
const { MapView } = zondy.leaflet
const { SketchEditor } = zondy.leaflet.tool.sketch
[ES6引入方式]：
import { MapView, SketchEditor } from "@mapgis/webclient-leaflet-plugin" <br/>
import { SketchStyle, SimpleMarkerSymbol, Color, SketchDataType} from "@mapgis/webclient-common" <br/>
import SketchEllipseDrawTool from "./SketchEllipseDrawTool" <br/>
var map = new Map()
var mapView = new MapView({
  viewId: "mapgis-2d-viewer",
  map: 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 sketchEditor = new SketchEditor({
  view: mapView,
  layer: new GraphicsLayer(),
  vertexStyle: vertexStyle
})
sketchEditor.startCustomDrawTool(SketchEllipseDrawTool, "ellipse") // 绘制椭圆

# stop()

停止绘制

# undo()

撤销当前编辑操作

Geometry
示例

二维草图几何分割

// [ES5引入方式]：
const { Polygon, LineString } = zondy.geometry
const { MapView } = zondy.leaflet
const { SketchDataType } = zondy.enum
const { SketchEditor } = zondy.leaflet.tool.sketch
[ES6引入方式]：
import { MapView, SketchEditor } 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: map,
})
var sketchEditor = new SketchEditor({
  view: mapView,
  layer: new GraphicsLayer()
})
sketchEditor.start(SketchDataType.POLYGON)
console.log("是否可以进行撤销操作：" + sketchEditor.canUndo())
const geometry = sketchEditor.undo()
console.log("恢复后的几何对象" + geometry)

# union(polygons)

合并多个区几何

参数:

名称 类型 描述
polygons Polygon

被合并的区几何对象

合并后的几何对象

Polygon
示例

二维草图几何合并

// [ES5引入方式]：
const { Polygon } = zondy.geometry
const { MapView } = zondy.leaflet
const { SketchEditor } = zondy.leaflet.tool.sketch
[ES6引入方式]：
import { MapView, SketchEditor } 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: map,
})
var sketchEditor = new SketchEditor({
  view: 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]
sketchEditor.union(polygons)

# updateVertex(point, index)

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

参数:

名称 类型 描述
point Point

新的顶点
index Number

需更新的顶点的序号
构造函数
成员变量
方法
事件