MapGIS Client for JavaScript API

new SketchEditor(options)

sketchEditor/SketchEditor.js, line 14

支持如下方法：

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

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

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

Name Type Description

options

Object

构造参数

Name	Type	Description
`view`	MapView \| SceneView	可选地图视图对象
`layer`	GraphicsLayer	可选草图图层管对象
`sketchStyle`	SketchStyle	可选草图符号
`snapOption`	Object	可选草图捕获配置项

Fires

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

Example

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

// [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" 

import { SketchStyle, SimpleMarkerSymbol, Color, SketchDataType} from "@mapgis/webclient-common" 

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) // 绘制区
*

Extends

zondy.SketchEditor

Methods

addVertex(point, index) sketchEditor/SketchEditor.js, line 199

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

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

canRedo(){Boolean} sketchEditor/SketchEditor.js, line 580

草图是否可执行恢复操作

Returns:

Type	Description
Boolean

canUndo(){Boolean} sketchEditor/SketchEditor.js, line 572

草图是否可执行撤销操作

Returns:

Type	Description
Boolean

drawPolylineToPolygon(snapAndReferGeometries) sketchEditor/SketchEditor.js, line 504

线拓扑造区

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

Example

二维草图线拓扑造区

// [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" 

import { Polygon, LineString } from "@mapgis/webclient-common" 

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} sketchEditor/SketchEditor.js, line 331

获取草图几何对象

Returns:

Type	Description
Geometry

getSketchStyle(){SketchStyle} sketchEditor/SketchEditor.js, line 323

获取草图样式

Returns:

Type	Description
SketchStyle

redo(){Geometry} sketchEditor/SketchEditor.js, line 564

恢复被撤销的草图

Returns:

Type	Description
Geometry

Example

二维草图几何分割

// [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" 

import { Polygon, LineString, SketchDataType } from "@mapgis/webclient-common" 

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() sketchEditor/SketchEditor.js, line 182

移除当前草图

removeVertex(index) sketchEditor/SketchEditor.js, line 216

移除草图图形的某个顶点

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

setSketchStyle(sketchStyle) sketchEditor/SketchEditor.js, line 315

设置草图样式

Name	Type	Description
`sketchStyle`	SketchStyle

Example

// 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" 

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){Array.<Polygon>} sketchEditor/SketchEditor.js, line 426

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

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

Returns:

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

Example

二维草图几何分割

// [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" 

import { Polygon, LineString } from "@mapgis/webclient-common" 

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) sketchEditor/SketchEditor.js, line 128

开始绘制草图

Name	Type	Description
`dataType`	SketchDataType	草图编辑类型
`extensionOptions`	Object	草图编辑的扩展属性，可以通过该属性传入草图编辑额外需要的参数

Example

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

// [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" 

import { SketchStyle, SimpleMarkerSymbol, Color, SketchDataType} from "@mapgis/webclient-common" 

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) sketchEditor/SketchEditor.js, line 168

开始绘制草图

Name	Type	Description
`dataType`	SketchDataType	草图编辑类型

Example

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

// [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" 

import { SketchStyle, SimpleMarkerSymbol, Color, SketchDataType} from "@mapgis/webclient-common" 

import SketchEllipseDrawTool from "./SketchEllipseDrawTool" 

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() sketchEditor/SketchEditor.js, line 175

停止绘制

undo(){Geometry} sketchEditor/SketchEditor.js, line 534

撤销当前编辑操作

Returns:

Type	Description
Geometry

Example

二维草图几何分割

// [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" 

import { Polygon, LineString, SketchDataType } from "@mapgis/webclient-common" 

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){Polygon} sketchEditor/SketchEditor.js, line 381

合并多个区几何

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

Returns:

Type	Description
Polygon	合并后的几何对象

Example

二维草图几何合并

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

import { polygon } from "@mapgis/webclient-common" 

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) sketchEditor/SketchEditor.js, line 208

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

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

Class: SketchEditor

new SketchEditor(options)

支持如下方法：

Fires

Example

Extends

Methods

addVertex(point, index)

canRedo(){Boolean}

Returns:

canUndo(){Boolean}

Returns:

drawPolylineToPolygon(snapAndReferGeometries)

Example

getGeometry(){Geometry}

Returns:

getSketchStyle(){SketchStyle}

Returns:

redo(){Geometry}

Returns:

Example

remove()

removeVertex(index)

setSketchStyle(sketchStyle)

Example

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

Returns:

Example

start(dataType, extensionOptions)

Example

startCustomDrawTool(dataType)

Example

stop()

undo(){Geometry}

Returns:

Example

union(polygons){Polygon}

Returns:

Example

updateVertex(point, index)