From e236ac88fb02fb685d2c8757cd100a9f85941905 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 17 Nov 2022 16:30:41 +0800
Subject: [PATCH] 1
---
src/utils/EntityDraw.js | 206 +++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 183 insertions(+), 23 deletions(-)
diff --git a/src/utils/EntityDraw.js b/src/utils/EntityDraw.js
index cd75167..ec9ad67 100644
--- a/src/utils/EntityDraw.js
+++ b/src/utils/EntityDraw.js
@@ -2,17 +2,24 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2022-10-18 17:17:50
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2022-10-28 16:08:49
+ * @LastEditTime: 2022-11-17 16:29:06
* @FilePath: \srs-police-affairs\src\utils\EntityDraw.js
* @Description:
*
* Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
*/
+// 1m的经度
+const lngOneM = 0.00001141
+// 1m的纬度
+const latOneM = 0.00000899
+
export default class EntityDraw {
drawPolygonLayer = null
drawPolylineLayer = null
+
+ drawPolyLineGonLayer = null
drawPointLayer = null
@@ -23,6 +30,24 @@
drawCompletePosition = []
type = ''
+
+ emitPointLayer = null
+
+ eventHandler = null
+
+ EditMoveCenterEntity = null
+
+ Cesium = null
+
+ EditMoveCenterPositoin = null
+
+ isEditing = false
+
+ editVertext = null
+
+ lastEventData = null
+
+ cb = () => { }
constructor() {
// 去除双击
@@ -35,6 +60,10 @@
this.getLeftEvent = this.getLeftEvent.bind(this)
this.getMoveEvent = this.getMoveEvent.bind(this)
this.getRightEvent = this.getRightEvent.bind(this)
+
+ this.Cesium = global.DC.Namespace.Cesium
+
+ this.eventHandler = new global.DC.Namespace.Cesium.ScreenSpaceEventHandler(global.viewer.scene.canvas)
}
initLayer () {
@@ -45,14 +74,21 @@
// 添加线图层
this.drawPolylineLayer = new global.DC.VectorLayer('drawPolylineLayer')
global.viewer.addLayer(this.drawPolylineLayer)
-
+ this.drawPolyLineGonLayer = new global.DC.VectorLayer('drawPolyLineGonLayer')
+ global.viewer.addLayer(this.drawPolyLineGonLayer)
// 添加点图层
this.drawPointLayer = new global.DC.VectorLayer('drawPointLayer')
global.viewer.addLayer(this.drawPointLayer)
+
+ // 添加编辑点图层
+ this.emitPointLayer = new global.DC.VectorLayer('emitPointLayer')
+ global.viewer.addLayer(this.emitPointLayer)
}
- activate (type) {
+ // draw执行这个
+ activate (type, cb) {
+ this.cb = cb
this.type = type
this.drawCompletePosition = []
@@ -63,8 +99,13 @@
this.clickInTheProcess()
}
- //鼠标左键点击事件 鼠标左键点击拾取需要编辑的对象
this.registerEvents()
+
+
+ this.initLeftDownEventHandler()
+ this.initLeftUpEventHandler()
+
+ this.initMouseMoveEventHandler()
}
deactivate () {
@@ -76,8 +117,14 @@
// 注册
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)
}
@@ -178,7 +225,6 @@
}
rightEvent (event) {
-
if (this.type === "polyline") {
if (this.activeShapePoints.length < 2) {
global.viewer.tooltip.showAt(event.windowPosition, '不能绘制成线，请继续添加点')
@@ -190,12 +236,15 @@
return
}
}
-
-
+ this.lastEventData = event.windowPosition
+ this.cb(this.lastEventData)
this.terminateShape()
}
- // 清除
+ getLastEventData () {
+ return this.lastEventData
+ }
+
terminateShape () {
this.activeShapePoints.pop()
@@ -207,8 +256,6 @@
})
- console.log(JSON.stringify(this.drawCompletePosition), 456)
-
if (this.type === "polyline") {
let polyline = new global.DC.Polyline(this.drawCompletePosition)
@@ -219,17 +266,15 @@
)
})
- let coords = global.DC.GeoTools.polylineBuffer(this.drawCompletePosition, 100)
-
- let polygon = new global.DC.Polygon(coords)
-
- polygon.setStyle({
- material: global.DC.Color.RED.withAlpha(0.4)
- })
-
- this.drawPolylineLayer.addOverlay(polygon)
-
this.drawPolylineLayer.addOverlay(polyline)
+
+ this.addPolyLineGon(100)
+
+ this.EditMoveCenterPositoin = this.Cesium.Cartesian3.fromDegrees(this.drawCompletePosition[this.drawCompletePosition.length - 1].lng + 200 * lngOneM, this.drawCompletePosition[this.drawCompletePosition.length - 1].lat + 200 * latOneM, 0)
+
+ global.viewer.scene.globe.depthTestAgainstTerrain = true
+
+ this.createEditMoveCenterEntity()
} else {
let polygon = new global.DC.Polygon(this.drawCompletePosition)
@@ -242,12 +287,9 @@
this.drawPolygonLayer.addOverlay(polygon)
}
-
-
this.clickInTheProcess()
}
- // 清空
clickInTheProcess () {
if (this.activeShape != null) {
global.viewer.entities.remove(this.activeShape)
@@ -266,11 +308,17 @@
clearLayer () {
this.drawPolygonLayer.clear()
this.drawPolylineLayer.clear()
+ this.drawPolyLineGonLayer.clear()
+
+ this.removeViewerEvent()
+
+ global.viewer.entities.removeAll()
}
// 销毁
destroy () {
this.unRegisterEvents()
+ this.removeViewerEvent()
this.drawPolygonLayer.clear()
this.drawPolygonLayer.remove()
@@ -278,11 +326,123 @@
this.drawPolylineLayer.clear()
this.drawPolylineLayer.remove()
+ this.drawPolyLineGonLayer.clear()
+ this.drawPolyLineGonLayer.remove()
+
this.drawPointLayer.clear()
this.drawPointLayer.remove()
+
+ global.viewer.entities.removeAll()
this.activeShape = null
this.activeShapePoints = []
this.drawCompletePosition = []
}
+
+ addPolyLineGon (num) {
+ this.drawPolyLineGonLayer.clear()
+
+ let coords = global.DC.GeoTools.polylineBuffer(this.drawCompletePosition, num)
+
+ let polygon = new global.DC.Polygon(coords)
+
+ polygon.setStyle({
+ material: global.DC.Color.RED.withAlpha(0.4)
+ })
+
+ this.drawPolyLineGonLayer.addOverlay(polygon)
+ }
+
+ //场景鼠标左键按下事件
+ initLeftDownEventHandler () {
+ const that = this
+ that.eventHandler.setInputAction((e) => {
+ let id = global.viewer.scene.pick(e.position)
+ // 拾取到对象 判断拾取到的对象类型
+ if (!id || !id.id || !id.id.type) return
+ //拾取到具有type 属性的entity对象
+ if (id.id.type == "EditVertex" || id.id.type == "EditMove") {
+ that.isEditing = true
+ //禁用场景的旋转移动功能 保留缩放功能
+ global.viewer.scene.screenSpaceCameraController.enableRotate = false
+ //改变鼠标状态
+ global.viewer.enableCursorStyle = false
+ document.body.style.cursor = "move"
+ that.editVertext = id.id
+ }
+
+ }, that.Cesium.ScreenSpaceEventType.LEFT_DOWN)
+ }
+
+ //场景鼠标左键抬起事件
+ initLeftUpEventHandler () {
+ const that = this
+ that.eventHandler.setInputAction(((e) => {
+ if (!that.isEditing) return
+ that.isEditing = false
+ global.viewer.scene.screenSpaceCameraController.enableRotate = true
+ global.viewer.enableCursorStyle = true
+ document.body.style.cursor = "default"
+ }), that.Cesium.ScreenSpaceEventType.LEFT_UP)
+ }
+
+ getScope (position) {
+ let Scope = Math.abs(position.lng - this.drawCompletePosition[this.drawCompletePosition.length - 1].lng) / lngOneM - 200
+
+ return Scope > 100 ? Scope : 100
+ }
+
+ //场景鼠标移动事件
+ initMouseMoveEventHandler () {
+ const that = this
+ that.eventHandler.setInputAction(((e) => {
+ // 鼠标移动的位置
+ let pickPosition = global.viewer.scene.pickPosition(e.endPosition)
+ if (!pickPosition) return
+ if (!that.isEditing) return
+
+ if (that.editVertext.type == "EditMove") {
+
+ let startPosition = that.EditMoveCenterPositoin
+
+ if (!startPosition) return
+
+ let position = global.DC.Transform.transformCartesianToWGS84(pickPosition)
+
+ that.addPolyLineGon(that.getScope(position))
+ }
+
+ that.isEdited = true
+
+ that.EditMoveCenterPositoin = pickPosition
+ }), that.Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+ }
+
+ removeViewerEvent () {
+ if (this.eventHandler && this.eventHandler != null) {
+ this.eventHandler.removeInputAction(this.Cesium.ScreenSpaceEventType.LEFT_DOWN)
+ this.eventHandler.removeInputAction(this.Cesium.ScreenSpaceEventType.LEFT_UP)
+ this.eventHandler.removeInputAction(this.Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+ }
+ }
+
+ createEditMoveCenterEntity () {
+ const that = this
+ that.EditMoveCenterEntity = global.viewer.entities.add({
+ position: new that.Cesium.CallbackProperty(e => {
+ return that.EditMoveCenterPositoin
+ }, false),
+
+ type: "EditMove",
+
+ point: {
+ color: that.Cesium.Color.RED.withAlpha(0.8),
+ pixelSize: 12,
+ outlineColor: that.Cesium.Color.WHITE.withAlpha(0.6),
+ outlineWidth: 4,
+ disableDepthTestDistance: 2000,
+ heightReference: that.Cesium.HeightReference.CLAMP_TO_GROUND
+ },
+ })
+ }
}
\ No newline at end of file
--
Gitblit v1.9.3