/*
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2022-10-18 17:17:50
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2022-10-20 10:10:26
|
* @FilePath: \srs-police-affairs\src\utils\EntityDraw.js
|
* @Description:
|
*
|
* Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
|
*/
|
|
export default class EntityDraw {
|
|
drawPolygonLayer = null
|
|
drawPointLayer = null
|
|
activeShapePoints = []
|
|
activeShape = null
|
|
drawCompletePosition = []
|
|
constructor() {
|
// 去除双击
|
this.deactivate()
|
|
// 初始化图层
|
this.initLayer()
|
|
// 修改this指向
|
this.getLeftEvent = this.getLeftEvent.bind(this)
|
this.getMoveEvent = this.getMoveEvent.bind(this)
|
this.getRightEvent = this.getRightEvent.bind(this)
|
}
|
|
initLayer () {
|
// 添加面图层
|
this.drawPolygonLayer = new global.DC.VectorLayer('drawPolygonLayer')
|
global.viewer.addLayer(this.drawPolygonLayer)
|
|
// 添加点图层
|
this.drawPointLayer = new global.DC.VectorLayer('drawPointLayer')
|
global.viewer.addLayer(this.drawPointLayer)
|
}
|
|
activate () {
|
this.drawCompletePosition = []
|
|
this.clearLayer()
|
|
if (this.activeShapePoints.length > 0) {
|
this.clickInTheProcess()
|
}
|
|
//鼠标左键点击事件 鼠标左键点击拾取需要编辑的对象
|
this.registerEvents()
|
}
|
|
deactivate () {
|
global.viewer.on(global.DC.MouseEventType.DB_CLICK, e => {
|
return
|
})
|
}
|
|
// 注册
|
registerEvents () {
|
global.viewer.tooltip.enable = true
|
global.viewer.on(global.DC.MouseEventType.CLICK, this.getLeftEvent)
|
global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, this.getMoveEvent)
|
global.viewer.on(global.DC.MouseEventType.RIGHT_CLICK, this.getRightEvent)
|
}
|
|
// 解绑
|
unRegisterEvents () {
|
global.viewer.tooltip.enable = false
|
global.viewer.off(global.DC.MouseEventType.CLICK, this.getLeftEvent)
|
global.viewer.off(global.DC.MouseEventType.MOUSE_MOVE, this.getMoveEvent)
|
global.viewer.off(global.DC.MouseEventType.RIGHT_CLICK, this.getRightEvent)
|
}
|
|
// 绘制多边形
|
drawGraph (positionData) {
|
let graph
|
|
graph = global.viewer.entities.add({
|
polygon: {
|
hierarchy: positionData,
|
material: new global.DC.Namespace.Cesium.ColorMaterialProperty(
|
global.DC.Namespace.Cesium.Color.NAVAJOWHITE.withAlpha(0.7)
|
),
|
}
|
})
|
|
return graph
|
}
|
|
// 左键
|
getLeftEvent (event) {
|
this.leftEvent(event)
|
}
|
|
leftEvent (event) {
|
const that = this
|
|
let point = new global.DC.Point(new global.DC.Position(event.wgs84SurfacePosition.lng, event.wgs84SurfacePosition.lat))
|
|
point.setStyle({
|
pixelSize: 10,
|
color: global.DC.Color.RED, //颜色
|
outlineColor: global.DC.Color.WHITE, //边框颜色
|
outlineWidth: 2, //边框大小，
|
})
|
|
that.drawPointLayer.addOverlay(point)
|
|
if (that.activeShapePoints.length === 0) {
|
that.activeShapePoints.push(event.surfacePosition)
|
|
const dynamicPositions = new global.DC.Namespace.Cesium.CallbackProperty(function () {
|
return new global.DC.Namespace.Cesium.PolygonHierarchy(that.activeShapePoints)
|
}, false)
|
|
that.activeShape = that.drawGraph(dynamicPositions)
|
|
}
|
|
that.activeShapePoints.push(event.surfacePosition)
|
}
|
|
// 移动
|
getMoveEvent (event) {
|
this.moveEvent(event)
|
}
|
|
moveEvent (event) {
|
global.viewer.tooltip.showAt(event.windowPosition, '左击选择点位，右击结束')
|
|
if (this.activeShapePoints.length >= 2) {
|
this.activeShapePoints.pop()
|
|
this.activeShapePoints.push(event.surfacePosition)
|
}
|
}
|
|
// 右键
|
getRightEvent (event) {
|
this.rightEvent(event)
|
}
|
|
rightEvent (event) {
|
if (this.activeShapePoints.length < 4) {
|
global.viewer.tooltip.showAt(event.windowPosition, '不能绘制成面，请继续添加点')
|
return
|
}
|
|
this.terminateShape()
|
}
|
|
// 清除
|
terminateShape () {
|
this.activeShapePoints.pop()
|
|
this.activeShapePoints.forEach(item => {
|
|
let pointPosition = global.DC.Transform.transformCartesianToWGS84(item)
|
|
this.drawCompletePosition.push({ lng: pointPosition.lng, lat: pointPosition.lat })
|
|
})
|
|
let polygon = new global.DC.Polygon(this.drawCompletePosition)
|
|
polygon.setStyle({
|
material: new global.DC.Namespace.Cesium.ColorMaterialProperty(
|
global.DC.Namespace.Cesium.Color.NAVAJOWHITE.withAlpha(0.7)
|
)
|
})
|
|
this.drawPolygonLayer.addOverlay(polygon)
|
|
this.clickInTheProcess()
|
}
|
|
// 清空
|
clickInTheProcess () {
|
if (this.activeShape != null) {
|
global.viewer.entities.remove(this.activeShape)
|
}
|
|
this.drawPointLayer.clear()
|
|
this.activeShape = null
|
|
this.activeShapePoints = []
|
|
this.unRegisterEvents()
|
}
|
|
// 清除
|
clearLayer () {
|
this.drawPolygonLayer.clear()
|
}
|
}
|
