import { Feature, ViewEventType } from '../../base'
import { Point, LineString, Circle } from '../../base/geometry'
import SketchBaseDrawTool from './SketchBaseDrawTool'
import SketchPointDrawTool from './SketchPointDrawTool'
import SketchPolygonDrawTool from './SketchPolygonDrawTool'
import SketchStyle from './SketchStyle'
import GeometryEngine from '../../base/geometry/GeometryEngine'
/**
* 面绘图工具类
* @class SketchCircleDrawTool
* @moduleEX SketchEditorModule
* @extends SketchBaseDrawTool
* @param {Object} options 构造参数
* @param {MapView|SceneView} [options.view] 地图视图对象
* @param {GraphicsLayer} [options.layer] 草图图层管对象
* @param {SketchStyle} [options.sketchStyle] 草图符号
*/
class SketchCircleDrawTool extends SketchBaseDrawTool {
constructor(options) {
super(options)
this._drawTools = [this]
this._otherDrawTools = []
// 初始化事件
this._initEvent()
}
/**
* @description 初始化事件
* @private
*/
_initEvent() {
this._processEvent = this._processEvent.bind(this)
this.on('pan', this._processEvent)
this.on('circleVertexScale', this._processEvent)
}
/**
* @description 鼠标绘制图形：鼠标按下确定圆心，以左键拖动距离为半径生成圆，鼠标抬起确定圆
*/
drawFeature() {
// 屏蔽地图默认拖拽事件
this.view._mapActionControl('drag-pan', false)
// 控制鼠标移动事件频率
const timer = null
// 当前正在绘制的图形对象
let feature = null
// 图形初始半径
let radius = 0
// 图形初始中心坐标
let centerCoord = null
// 处理鼠标点击事件。点击后渲染端点图形，渲染区图形
const handlerDrag = (options) => {
clearTimeout(timer)
if (options.button === 0) {
if (options.action === 'start') {
centerCoord = centerCoord || this.view.toMap(options.origin)
} else if (options.action === 'update') {
const curCoord = this.view.toMap({ x: options.x, y: options.y })
radius = GeometryEngine.planarLength(
new LineString({
coordinates: [centerCoord.coordinates, curCoord.coordinates],
spatialReference: this._spatialReference
})
)
if (!feature) {
feature = this._getFeature(centerCoord, radius)
this._addFeaturesToMap(feature)
this.sketchStage.entityGraphic = feature
} else {
feature.geometry.radius = radius
}
} else if (options.action === 'end') {
// 停止绘制
this.stop()
// 清除捕获效果
if (this.sketchStage.snapGraphics.length > 0) {
this.sketchStage.snapGraphics.forEach((feature) => {
this._removeFeatureFromMap(feature)
})
this.sketchStage.snapGraphics = []
}
this._editMode = 0
// 发送绘制完成事件
this.fire('drawn', { geometry: feature.geometry }, self)
// 恢复地图默认拖拽事件
this.view._mapActionControl('drag-pan', true)
}
}
}
// 注册绘制事件
this._drawEventHandlers.push(handlerDrag)
this.view.on(ViewEventType.drag, handlerDrag)
}
/**
* @description 添加图形
* @param {Array} points 生成面的点地理坐标集
* @param {SketchStyle} sketchStyle 面的符号样式
*/
addFeature(points, sketchStyle, attributes) {
let lineStyle = null
if (!sketchStyle || !sketchStyle.lineStyle) {
lineStyle = this.sketchStyle.lineStyle
} else {
lineStyle = sketchStyle.lineStyle
}
const feature = this._getFeature(points, lineStyle)
if (attributes) {
feature.attributes = attributes
}
this.sketchStage.entityGraphic = feature
// 更新图层图形
this._addFeaturesToMap(feature)
}
addFeatureByGeometry(geometry, sketchStyle, attributes) {
let symbol = null
if (!sketchStyle || !sketchStyle.lineStyle) {
symbol = this.sketchStyle.lineStyle
} else {
symbol = sketchStyle.lineStyle
}
const feature = new Feature({
geometry,
symbol
})
if (attributes) {
feature.attributes = attributes
}
this.sketchStage.entityGraphic = feature
// 更新图层图形
this._addFeaturesToMap(feature)
}
/**
* @description 获取feature实例
* @private
* @param {Point} point 生成面的点地理坐标集
* @param {Symbol} symbol 点的符号样式
*/
_getFeature(center, radius) {
if (center) {
if (center instanceof Array) {
center = new Point({
coordinates: center,
spatialReference: this._spatialReference
})
} else if (!(center instanceof Point)) {
center = new Point({
coordinates: [0, 0],
spatialReference: this._spatialReference
})
}
} else {
center = new Point({
coordinates: [0, 0],
spatialReference: this._spatialReference
})
}
radius = radius !== undefined ? radius : 0
const geometry = new Circle({
center,
radius,
spatialReference: this._spatialReference
})
const symbol = this.sketchStyle.fillStyle
const circleGeometry = new Feature({
geometry,
symbol
})
return circleGeometry
}
/**
* @description 捕获草图
* @param {Feature} feature 被选中feature对象
* @param {Object} event 选中事件参数
*/
hitTestFeature(feature) {
if (!this._parent && this.editOption.showSelectBox) {
if (this._editMode === 0) {
this._editMode = 1
}
// 进入图形编辑状态，高亮点元素,用新图形代替高亮，展示选中图形时的辅助图形
this.selectFeature(feature)
}
}
/**
* @description 选中草图feature
* @param {Feature} feature 被选中草图feature对象
*/
selectFeature(feature) {
if (!this.editOption.showSelectBox) return
// 1.删除当前编辑图形状态的辅助图形
// 2.添加顶点编辑状态的辅助图形
this._clearEditGraphics(2)
// 加载选时的辅助图形，外包盒
const extent = feature.geometry.extent
const polygonDrawTool = new SketchPolygonDrawTool({
view: this.view,
layer: this.layer,
sketchStyle: new SketchStyle({
fillStyle: this.sketchStyle._selectBoxStyle,
isShowSegmentLength: true,
isShowArea: true
}),
editOption: {
showSelectBox: false,
_hitTestMode: 1
},
_parent: this // 或者只传父级相应pan的事件
})
this._drawTools.push(polygonDrawTool)
polygonDrawTool.addFeature([
[extent.xmax, extent.ymax],
[extent.xmax, extent.ymin],
[extent.xmin, extent.ymin],
[extent.xmin, extent.ymax],
[extent.xmax, extent.ymax]
])
this.sketchStage.selectBoxGraphics = [
polygonDrawTool.sketchStage.entityGraphic
]
// 外包盒顶点和终点
let boxVertexPoints = []
if (this._sketchEditor && this._sketchEditor._getCenterCoordinate) {
const midVertexPoints = [
{
point: new Point({
coordinates: this._sketchEditor._getCenterCoordinate(
[extent.xmax, extent.ymax],
[extent.xmax, extent.ymin]
),
spatialReference: this._spatialReference
}),
direction: 'e',
type: 'circleVertex'
}
]
boxVertexPoints = boxVertexPoints.concat(midVertexPoints)
}
const pointDrawTools = []
const boxVertexGraphics = []
boxVertexPoints.forEach((item) => {
const pointDrawTool = new SketchPointDrawTool({
view: this.view,
layer: this.layer,
sketchStyle: new SketchStyle({
vertexStyle: this.sketchStyle._selectBoxVertexStyle
}),
editOption: {
showSelectBox: false,
_hitTestMode: 1
},
_parent: this
})
this._drawTools.push(pointDrawTool)
pointDrawTool.addFeature(item.point, this.sketchStage, {
direction: item.direction,
type: item.type
})
pointDrawTools.push(pointDrawTool)
boxVertexGraphics.push(pointDrawTool.sketchStage.entityGraphic)
})
this.sketchStage.selectBoxVertexGraphics = boxVertexGraphics
if (this._otherDrawTools) {
this._otherDrawTools.push(polygonDrawTool)
} else {
this._otherDrawTools = [polygonDrawTool]
}
this._otherDrawTools = this._otherDrawTools.concat(pointDrawTools)
// 将当前草图状态添加到undoRedoManager记录中
if (this.undoRedoManager) {
this.undoRedoManager.addProcess('add', this.sketchStage)
}
// 点击到地图没有feature图形区域，退出编辑
if (
!this._mapClickEvent &&
(!this._parent || (this._parent && !this._parent._mapClickEvent))
) {
this._mapClickEvent = () => {
if (this._preventFirstCall) {
this._preventFirstCall = undefined
return
}
const removedFeatures = this.sketchStage.selectBoxGraphics
.concat(this.sketchStage.selectBoxVertexGraphics)
.concat(this.sketchStage.vertexGraphics)
.concat(this.sketchStage.midVertexGraphics)
removedFeatures.forEach((feature) => {
this._removeFeatureFromMap(feature)
})
this.view.off(ViewEventType.immediateClick, this._mapClickEvent)
this.view._mapActionControl('drag-pan', true)
this._mapClickEvent = null
// 发送草图没有被选中状态
this.fire('selected', { isSelected: false }, self)
this.sketchStage.selectBoxGraphics = []
this.sketchStage.selectBoxVertexGraphics = []
this.sketchStage.vertexGraphics = []
this.sketchStage.midVertexGraphics = []
}
this._hitTestEventHandlers.push(this._mapClickEvent)
this._preventFirstCall = true
this.view.on(ViewEventType.immediateClick, this._mapClickEvent)
}
}
/**
* @description 响应图形平移事件
* @private
* @param {Object} event 拾取事件参数
*/
_processEvent(event) {
if (event.type === 'pan') {
// 处理平移逻辑
this._handlerPanEvent(event)
} else if (event.type === 'circleVertexScale') {
// 处理中点缩放逻辑
this._handlerCircleVertexScaleEvent(event)
}
}
/**
* @description 响应平移事件
* @private
* @param {Object} event 拾取事件参数
*/
_handlerPanEvent(event) {
// 更新当前草图的图形位置
const center = this.sketchStage.entityGraphic.geometry.center
this.sketchStage.entityGraphic.geometry.center = this.getPanCoordinates(
center,
event.deltaPosition.x,
event.deltaPosition.y
)
// 更新同级的辅助草图的图形位置
if (this._otherDrawTools) {
this._otherDrawTools.forEach((drawTool) => {
drawTool._processEvent(event)
})
}
}
/**
* @description 响应顶点缩放事件
* @private
* @param {Object} event 传入事件参数
*/
_handlerCircleVertexScaleEvent(event) {
if (event.action === 'scale') {
// 更新当前草图的图形位置
const newRadius = GeometryEngine.planarLength(
new LineString({
coordinates: [
this.sketchStage.entityGraphic.geometry.center,
[
event.movePoint.coordinates[0],
this.sketchStage.entityGraphic.geometry.center[1]
]
],
spatialReference: this._spatialReference
})
)
const newGeometry = new Circle({
center: this.sketchStage.entityGraphic.geometry.center,
radius: newRadius,
spatialReference: this._spatialReference
})
this.sketchStage.entityGraphic.geometry = newGeometry
// 更新同级的辅助草图的图形位置
if (this._otherDrawTools) {
this._otherDrawTools.forEach((drawTool) => {
// 传给子草图的extent应该是草图改变前的，不是草图改变后的extent
// event.extent = extent
drawTool._processEvent(event)
})
}
} else if (event.action === 'stop') {
if (this._otherDrawTools) {
this._otherDrawTools.forEach((drawTool) => {
// if (drawTool.sketchStage.entityGraphic.id !== event.feature.id) {
drawTool._processEvent(event)
// }
})
}
}
}
}
export default SketchCircleDrawTool
