类名 SketchEditorLeaflet

# new SketchEditorLeaflet(options)

二维Leaflet引擎草图编辑类

[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

草图捕获配置项

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

继承关系

方法

方法概述

名称 返回值类型 描述
addVertex

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

canRedo Boolean

草图是否可执行恢复操作

canUndo Boolean

草图是否可执行撤销操作

drawPolylineToPolygon

线拓扑造区

getGeometry Geometry

获取草图几何对象

getSketchStyle SketchStyle

获取草图样式

redo Geometry

恢复被撤销的草图

remove

移除当前草图

removeVertex

移除草图图形的某个顶点

setSketchStyle

设置草图样式

split Array.<Polygon>

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

start

开始绘制草图

startCustomDrawTool

开始绘制草图

stop

停止绘制

undo Geometry

撤销当前编辑操作

union Polygon

合并多个区几何

updateVertex

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

方法详情

# 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, SketchEditorLeaflet } 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, SketchEditorLeaflet } 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

需更新的顶点的序号