Cesium MapboxGL Leaflet OpenLayers
API文档
类名 SketchEditorLeaflet

# new SketchEditorLeaflet(options)

二维场景草图编辑类

[ES5引入方式]：
const { SketchEditorLeaflet } = Zondy
[ES6引入方式]：
import { SketchEditorLeaflet } from "@mapgis/webclient-leaflet-plugin"

参数:

名称 类型 描述
options Object

构造参数
view MapView | SceneView

地图视图对象
layer GraphicsLayer

草图图层管对象
sketchStyle SketchStyle

草图符号
snapOption Object

草图捕获配置项

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

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

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

示例

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

// [ES5引入方式]：
const { SketchEditorLeaflet } = Zondy
[ES6引入方式]：
import { MapView, SketchEditorLeaflet } 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 SketchEditorLeaflet = new SketchEditorLeaflet({
  view: mapView,
  layer: new GraphicsLayer(),
  vertexStyle: vertexStyle
})
SketchEditorLeaflet.start(SketchDataType.POINT) // 绘制点
SketchEditorLeaflet.start(SketchDataType.POLYLINE) // 绘制线
SketchEditorLeaflet.start(SketchDataType.POLYGON) // 绘制区
*

继承关系

成员变量

Number

# _drawTool

草图绘制工具

Overrides:

查看源代码 sketchEditor/SketchEditorLeaflet.js, line 113

SketchStyle

# _editable

草图是否可编辑

Overrides:

查看源代码 sketchEditor/SketchEditorLeaflet.js, line 93

Number

# _sketchDataType

草图绘制类型

Overrides:

查看源代码 sketchEditor/SketchEditorLeaflet.js, line 118

GraphicsLayer

# layer

草图图层

Overrides:

查看源代码 sketchEditor/SketchEditorLeaflet.js, line 83

Number

# measureOption

草图量算配置项

Overrides:

查看源代码 sketchEditor/SketchEditorLeaflet.js, line 108

SketchStyle

# sketchStyle

草图符号

Overrides:

查看源代码 sketchEditor/SketchEditorLeaflet.js, line 88

Object

# snapOption Optional

草图捕获配置项

Overrides:

查看源代码 sketchEditor/SketchEditorLeaflet.js, line 98

方法

# addVertex(point, index)

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

参数:

名称 类型 描述
point Point

新增/插入顶点
index Number

新增/新增点的序号

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

# canRedo()

草图是否可执行恢复操作

查看源代码 sketchEditor/SketchEditorLeaflet.js, line 554

Boolean

# canUndo()

草图是否可执行撤销操作

查看源代码 sketchEditor/SketchEditorLeaflet.js, line 546

Boolean

# drawPolylineToPolygon(snapAndReferGeometries)

线拓扑造区

参数:

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

捕获参考几何对象数组

查看源代码 sketchEditor/SketchEditorLeaflet.js, line 484

示例

二维草图线拓扑造区

// [ES5引入方式]：
const { MapView, SketchEditorLeaflet, Polygon, LineString } = Zondy
[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 sketchEditorLeaflet = new SketchEditorLeaflet({
  view: mapView,
  layer: new GraphicsLayer()
})
sketchEditorLeaflet.drawPolylineToPolygon(testGeometries)

# getGeometry()

获取草图几何对象

查看源代码 sketchEditor/SketchEditorLeaflet.js, line 317

Geometry

# getSketchStyle()

获取草图样式

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

SketchStyle

# redo()

恢复被撤销的草图

查看源代码 sketchEditor/SketchEditorLeaflet.js, line 538

Geometry
示例

二维草图几何分割

// [ES5引入方式]：
const { SketchEditorLeaflet } = Zondy
[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 SketchEditorLeaflet = new SketchEditorLeaflet({
  view: mapView,
  layer: new GraphicsLayer()
})
SketchEditorLeaflet.start(SketchDataType.POLYGON)
console.log("是否可以进行恢复操作：" + this.SketchEditorLeaflet.canRedo())
const geometry = this.SketchEditorLeaflet.redo()
console.log("恢复后的几何对象" + geometry)

# remove()

移除当前草图

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

# removeVertex(index)

移除草图图形的某个顶点

参数:

名称 类型 描述
index Number

需更新的顶点的序号

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

# setSketchStyle(sketchStyle)

设置草图样式

参数:

名称 类型 描述
sketchStyle SketchStyle

查看源代码 sketchEditor/SketchEditorLeaflet.js, line 301

示例
// ES5引入方式
const { SimpleMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol } = Zondy.Symbol
const { Map, MapView, Color, SketchStyle, SketchEditorLeaflet } = Zondy
const { SketchDataType } = Zondy.Enum
// ES6引入方式
import { Map, SimpleMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol, Color, SketchStyle, SketchDataType } from "@mapgis/webclient-common"
import { MapView, SketchEditorLeaflet } 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 SketchEditorLeaflet({
   view: mapView,
   layer: graphicsLayer,
 })
sketchEditor.setSketchStyle(sketchStyle)
sketchEditor.start(SketchDataType.POLYGON)

# split(target, splitPolyline)

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

参数:

名称 类型 描述
target Polygon | SketchEditor

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

线几何对象

查看源代码 sketchEditor/SketchEditorLeaflet.js, line 408

分割后的几何对象

Array.<Polygon>
示例

二维草图几何分割

// [ES5引入方式]：
const { MapView, SketchEditorLeaflet, Polygon, LineString } = Zondy
[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 SketchEditorLeaflet = new SketchEditorLeaflet({
  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 = SketchEditorLeaflet.split(polygon,polyline)

# start(dataType)

开始绘制草图

参数:

名称 类型 描述
dataType SketchDataType

草图编辑类型

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

示例

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

// [ES5引入方式]：
const { SketchEditorLeaflet } = Zondy
[ES6引入方式]：
import { MapView, SketchEditorLeaflet } 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 SketchEditorLeaflet = new SketchEditorLeaflet({
  view: mapView,
  layer: new GraphicsLayer(),
  vertexStyle: vertexStyle
})
SketchEditorLeaflet.start(SketchDataType.POINT) // 绘制点
SketchEditorLeaflet.start(SketchDataType.POLYLINE) // 绘制线
SketchEditorLeaflet.start(SketchDataType.POLYGON) // 绘制区

# stop()

停止绘制

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

# undo()

撤销当前编辑操作

查看源代码 sketchEditor/SketchEditorLeaflet.js, line 511

Geometry
示例

二维草图几何分割

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

# union(polygons)

合并多个区几何

参数:

名称 类型 描述
polygons Polygon

被合并的区几何对象

查看源代码 sketchEditor/SketchEditorLeaflet.js, line 365

合并后的几何对象

Polygon
示例

二维草图几何合并

// [ES5引入方式]：
const { MapView, SketchEditorLeaflet, polygon } = Zondy
[ES6引入方式]：
import { MapView, SketchEditorLeaflet } 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 SketchEditorLeaflet = new SketchEditorLeaflet({
  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]
SketchEditorLeaflet.union(polygons)

# updateVertex(point, index)

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

参数:

名称 类型 描述
point Point

新的顶点
index Number

需更新的顶点的序号

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

构造函数
成员变量
方法
事件