import {
Zondy,
SketchEditor,
defaultValue,
SketchStyle,
Point,
SpatialReference,
Projection
} from '@mapgis/webclient-common'
/**
* 二维场景草图编辑类<br/>
* <br>[ES5引入方式]：<br/>
* const { SketchEditorLeaflet } = Zondy <br/>
* [ES6引入方式]：<br/>
* import { SketchEditorLeaflet } from "@mapgis/webclient-leaflet-plugin" <br/>
* @classdesc 二维草图编辑类
* @class SketchEditorLeaflet
* @extends SketchEditor
* @moduleEX SketchEditorModule
* @fires SketchEditor#草图绘制完成事件
* @fires SketchEditor#草图被选中事件
* @param {Object} options 构造参数
* @param {MapView|SceneView} [options.view] 地图视图对象
* @param {GraphicsLayer} [options.layer] 草图图层管对象
* @param {SketchStyle} [options.sketchStyle] 草图符号
* @param {Object} [options.snapOption] 草图捕获配置项
*
* @summary <h5>支持如下方法：</h5>
* <a href='#start'>[1、开始绘制草图]</a><br/>
* <a href='#stop'>[2、停止绘制]</a><br/>
* <a href='#remove'>[3、移除当前草图]</a><br/>
* <a href='#addVertex'>[4、向草线或面草图中插入新的顶点]</a><br/>
* <a href='#updateVertex'>[5、更新草图图形的某个顶点]</a><br/>
* <a href='#removeVertex'>[6、移除草图图形的某个顶点]</a><br/>
* <a href='#getSketchDataType'>[7、获取草图图形类型]</a><br/>
* <a href='#setSketchStyle'>[8、设置草图样式]</a><br/>
* <a href='#getSketchStyle'>[9、获取草图样式]</a><br/>
* <a href='#getGeometry'>[10、获取草图几何对象]</a><br/>
* <a href='#union'>[11、合并多个区几何]</a><br/>
* <a href='#split'>[12、分割草图对象或区几何对象]</a><br/>
* <a href='#undo'>[13、撤销当前编辑操作]</a><br/>
* <a href='#redo'>[14、恢复被撤销的草图]</a><br/>
* <a href='#drawPolylineToPolygon'>[15、拓扑线造区]</a><br/>
*
* @example <caption><h7>初始化一个二维场景草图编辑类</h7></caption>
* // [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) // 绘制区
* * */
class SketchEditorLeaflet extends SketchEditor {
constructor(options) {
super(options)
options = defaultValue(options, {})
/**
* 地图视图
* @member {MapView|SceneView} SketchEditor.prototype.this.view
*/
this.view = options.view
/**
* 草图图层
* @member {GraphicsLayer} SketchEditor.prototype.layer
*/
this.layer = defaultValue(options.layer, undefined)
/**
* 草图符号
* @member {SketchStyle} SketchEditor.prototype.sketchStyle
*/
this.sketchStyle = defaultValue(options.sketchStyle, new SketchStyle())
/**
* 草图是否可编辑
* @member {SketchStyle} SketchEditor.prototype._editable
*/
this._editable = defaultValue(options.editable, true)
/**
* 草图捕获配置项
* @member {Object} [SketchEditor.prototype.snapOption = undefined]
* @param {Boolean} [snapOption.isSnapVertexCoincident = false] 是否自动捕捉顶点重合
* @param {Boolean} [snapOption.isSnapVertexInLine = false] 是否自动捕捉线上的点
* @param {Boolean} [snapOption.isSnapPerpendicular = false] 是否自动捕捉垂线垂点
* @param {Boolean} [snapOption.isSnapParallel = false] 是否自动捕捉平行线
* @param {Boolean} [snapOption.snapSketchGeometry = false] 是否捕捉正在绘制的图形的边界
*/
this.snapOption = defaultValue(options.snapOption, {})
/**
* 草图量算配置项
* @member {Number} SketchEditor.prototype.measureOption
*/
this.measureOption = defaultValue(options.measureOption, undefined)
/**
* 草图绘制工具
* @member {Number} SketchEditor.prototype._drawTool
*/
this._drawTool = null
/**
* 草图绘制类型
* @member {Number} SketchEditor.prototype._sketchDataType
*/
this._sketchDataType = null
}
/**
* 开始绘制草图<a id='start'></a>
* @param {SketchDataType} dataType 草图编辑类型
* @example <caption><h7>初始化一个二维场景草图编辑类</h7></caption>
* // [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) // 绘制区
*/
start(dataType) {
super.start(dataType)
}
/**
* 停止绘制<a id='stop'></a>
*/
stop() {
super.stop()
}
/**
* 移除当前草图<a id='remove'></a>
*/
remove() {
super.remove()
}
/**
* 更新当前选中的草图
* @private
*/
update(data, featureId) {
super.updateFeature(data, featureId)
}
/**
* 向当前线或区草图中插入新的顶点<a id='addVertex'></a>
* @param {Point} point 新增/插入顶点
* @param {Number} index 新增/新增点的序号
*/
addVertex(point, index) {
super.addVertex(point, index)
}
/**
* 更新当前草图图形的某个顶点<a id='updateVertex'></a>
* @param {Point} point 新的顶点
* @param {Number} index 需更新的顶点的序号
*/
updateVertex(point, index) {
super.updateVertex(point, index)
}
/**
* 移除草图图形的某个顶点<a id='removeVertex'></a>
* @param {Number} index 需更新的顶点的序号
*/
removeVertex(index) {
super.removeVertex(index)
}
/**
* 获取草图图形类型<a id='getSketchDataType'></a>
* @private
*/
getSketchDataType() {
super.getSketchDataType()
}
/**
* 设置草图样式<a id='setSketchStyle'></a>
* @param {SketchStyle} sketchStyle
* @example
* // 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)
*/
setSketchStyle(sketchStyle) {
super.setSketchStyle(sketchStyle)
}
/**
* 获取草图样式<a id='getSketchStyle'></a>
* @returns {SketchStyle}
*/
getSketchStyle() {
return super.getSketchStyle()
}
/**
* 获取草图几何对象<a id='getGeometry'></a>
* @returns {Geometry}
*/
getGeometry() {
return super.getGeometry()
}
/**
* 合并多个区几何<a id='union'></a>
* @param {Polygon} polygons 被合并的区几何对象
* @returns {Polygon} 合并后的几何对象
* @example <caption><h7>二维草图几何合并</h7></caption>
* // [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)
*/
union(polygons) {
return super.union(polygons)
}
/**
* 分割草图对象或区几何对象<a id='split'></a>
* @param {Polygon|SketchEditor} target 被分割的几何/草图对象
* @param {Polyline} splitPolyline 线几何对象
* @returns {Array<Polygon>} 分割后的几何对象
* @example <caption><h7>二维草图几何分割</h7></caption>
* // [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)
*/
split(target, splitPolyline) {
return super.split(target, splitPolyline)
}
/**
* 线拓扑造区<a id='drawPolylineToPolygon'></a>
* @param {Array<Polygon>} snapAndReferGeometries 捕获参考几何对象数组
* @example <caption><h7>二维草图线拓扑造区</h7></caption>
* // [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)
*/
drawPolylineToPolygon(snapAndReferGeometries) {
super.drawPolylineToPolygon(snapAndReferGeometries)
}
/**
* 撤销当前编辑操作<a id='undo'></a>
* @returns {Geometry}
* @example <caption><h7>二维草图几何分割</h7></caption>
* // [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)
*/
undo() {
return super.undo()
}
/**
* 恢复被撤销的草图<a id='redo'></a>
* @returns {Geometry}
* @example <caption><h7>二维草图几何分割</h7></caption>
* // [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)
*/
redo() {
return super.redo()
}
/**
* 草图是否可执行撤销操作<a id='canUndo'></a>
* @returns {Boolean}
*/
canUndo() {
return super.canUndo()
}
/**
* 草图是否可执行恢复操作<a id='canRedo'></a>
* @returns {Boolean}
*/
canRedo() {
return super.canRedo()
}
/**
* 二维leaflet草图拾取事件
* @private
*/
// featureLoaded：当图形已显示在视图上，可设featureLoaded为true。当图形已显示未视图上，可设featureLoaded为false。
// 实例化sketchEditor之后，将拾取事件注册
_hitTestSketchEvent() {
const self = this
self.testNum = 0
// 拾取草图：1.监听layer的update/add 事件 2.
const targetLayer = this.view._mapCollection.filter(
(item) => item.id === this.layer.id
)
if (targetLayer.length > 0) {
targetLayer[0].innerLayer.on('layeradd', (event) => {
const iLayer = event.layer
if (!iLayer || !iLayer.commonFeatureId || !self._drawTool) return
let curDrawTool = self._drawTool._getDrawToolByFeatureId(
iLayer.commonFeatureId
)
if (!curDrawTool) {
if (
self._drawTool.sketchStage.entityGraphic &&
self._drawTool.state === 'drawn'
) {
const layer = self.view.getLayer(iLayer.commonLayerId)
const features = layer.graphics.filter((item) => {
if (item.id === iLayer.commonFeatureId) {
return item
}
})
const feature =
features && features.items.length > 0 ? features.items[0] : null
this._addFeatureToSketchEditor(feature)
curDrawTool = self._drawTool._getDrawToolByFeatureId(
iLayer.commonFeatureId
)
} else {
return
}
}
if (curDrawTool === self._drawTool && curDrawTool.state !== 'drawn') {
// 如果是绘制时触发的事件，则不是拾取 返回
return
}
self._bindHit(curDrawTool, iLayer)
})
}
}
_bindHit(curDrawTool, iLayer) {
const self = this
const feature = curDrawTool.sketchStage.entityGraphic
const mode = curDrawTool.editOption._hitTestMode
if (!iLayer) {
const targetLayer = this.view._mapCollection.filter(
(item) => item.id === this.layer.id
)
for (const key in targetLayer[0].innerLayer._layers) {
const item = targetLayer[0].innerLayer._layers[key]
if (item.commonFeatureId === feature.id) {
iLayer = item
break
}
}
if (!iLayer) return
}
const callbackFun = function (event) {
const _spatialReference = new SpatialReference(self.view.crs.code)
let mapPoint
if (!_spatialReference.isGeographic) {
mapPoint = Projection.project(
new Point({
coordinates: [event.latlng.lng, event.latlng.lat]
}),
new SpatialReference(self.view.crs.code)
)
} else {
mapPoint = new Point({
coordinates: [event.latlng.lng, event.latlng.lat]
})
}
event.mapPoint = mapPoint
// 切换图形drawTool和编辑器drawTool不同，则此时编辑器drawTool为当前图形drawTool改变
// 拾取时：情景1.（同一个图形）拾取到的当前drawTool为该草图本图entityGraphic的drawTool，则该草图进入整体图形编辑状态，编辑器drawTool不变）
// 情景2.（同一个图形）拾取到的当前drawTool有parent，且parent的草图本图entityGraphic和编辑器的drawTool相同，则该草图进由整体图形编辑切换到顶点编辑状态，编辑器drawTool不变）
// 情景3.（切换到其他已绘制的图形时）拾取到的当前drawTool为该图形草图本图entityGraphic的drawTool，编辑器drawTool需变为当前drawTool
if (!curDrawTool._parent) {
// 如果当前拾取的图形有parent，则拾取的是编辑辅助图形，判断当编辑辅助图形的草图本图和草图编辑器本图是否是同一个：
// 如果相同，即为情景1，不需要特殊处理；
// 如果不相同，即为情景3，则需清空上次草图编辑时的辅助图形，然后将编辑器drawTool赋值为当前图形草图本图drawTool。
if (!self._drawTool) {
self._drawTool = curDrawTool
self._undoRedoManager.reset()
self._drawTools = [self._drawTool]
} else if (self._drawTool._id !== curDrawTool._id) {
self._drawTool._clearEditGraphics(self._editMode)
self._drawTool = curDrawTool
self._undoRedoManager.reset()
self._drawTools = [self._drawTool]
}
} else {
// 如果当前拾取的图形没有parent，即为情景2，则需清空上次草图编辑时的辅助图形。
if (self._drawTool._id !== curDrawTool._parent._id) {
self._drawTool._clearEditGraphics(self._editMode)
}
}
// 发送草图被选中事件
self.fire(
'selected',
{
isSelected: true,
selectedDrawTool: self._drawTool,
selectedGeometry: self._drawTool.sketchStage.entityGraphic.geometry
},
self
)
curDrawTool.hitTestFeature(feature, event)
}
if (mode === 0) {
iLayer.on('click', (event) => {
callbackFun(event)
})
} else {
iLayer.on('mousedown', (event) => {
// mouseDown拖动点图形时，地图拖拽事件会触发
// self._disableMapDrag()
callbackFun(event)
})
}
}
/**
* 根据两个坐标获取坐标中点
* @private
* @param {Array} coordinate1 第一个坐标
* @param {Array} coordinates2 第一个坐标
* @returns {Array} 中点坐标
* */
_getCenterCoordinate(coordinate1, coordinates2) {
return [
(coordinate1[0] + coordinates2[0]) / 2,
(coordinate1[1] + coordinates2[1]) / 2
]
}
}
Zondy.SketchEditorLeaflet = SketchEditorLeaflet
export default SketchEditorLeaflet
