From e24f70ababdee2b4fdce71c6b80a9bc928fa0331 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 08 May 2023 14:45:08 +0800
Subject: [PATCH] 警情排行调整
---
src/utils/EntityDraw.js | 296 ++++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 272 insertions(+), 24 deletions(-)
diff --git a/src/utils/EntityDraw.js b/src/utils/EntityDraw.js
index c6c6a64..9c42b7f 100644
--- a/src/utils/EntityDraw.js
+++ b/src/utils/EntityDraw.js
@@ -2,16 +2,24 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2022-10-18 17:17:50
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2022-10-25 15:41:19
+ * @LastEditTime: 2022-11-18 09:22:49
* @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
@@ -22,6 +30,24 @@
drawCompletePosition = []
type = ''
+
+ emitPointLayer = null
+
+ eventHandler = null
+
+ EditMoveCenterEntity = null
+
+ Cesium = null
+
+ EditMoveCenterPositoin = null
+
+ isEditing = false
+
+ editVertext = null
+
+ lastEventData = null
+
+ cb = () => { }
constructor() {
// 去除双击
@@ -34,6 +60,12 @@
this.getLeftEvent = this.getLeftEvent.bind(this)
this.getMoveEvent = this.getMoveEvent.bind(this)
this.getRightEvent = this.getRightEvent.bind(this)
+
+ this.resizePolyLineGon = this.resizePolyLineGon.bind(this)
+
+ this.Cesium = global.DC.Namespace.Cesium
+
+ this.eventHandler = new global.DC.Namespace.Cesium.ScreenSpaceEventHandler(global.viewer.scene.canvas)
}
initLayer () {
@@ -41,12 +73,27 @@
this.drawPolygonLayer = new global.DC.VectorLayer('drawPolygonLayer')
global.viewer.addLayer(this.drawPolygonLayer)
+ // 添加线图层
+ 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)
+
+
+ // global.viewer.scene.globe.depthTestAgainstTerrain = true
}
- activate (type) {
+ // draw执行这个
+ activate (type, cb) {
+ this.cb = cb
this.type = type
this.drawCompletePosition = []
@@ -57,8 +104,12 @@
this.clickInTheProcess()
}
- //鼠标左键点击事件 鼠标左键点击拾取需要编辑的对象
this.registerEvents()
+
+
+ // this.initLeftDownEventHandler()
+ // this.initLeftUpEventHandler()
+ // this.initMouseMoveEventHandler()
}
deactivate () {
@@ -70,8 +121,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)
}
@@ -87,14 +144,27 @@
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)
- ),
- }
- })
+ if (this.type === "polyline") {
+ graph = global.viewer.entities.add({
+ polyline: {
+ material: new global.DC.Namespace.Cesium.ColorMaterialProperty(
+ global.DC.Namespace.Cesium.Color.NAVAJOWHITE.withAlpha(0.7)
+ ),
+ positions: positionData,
+ clampToGround: true,
+ width: 3,
+ },
+ })
+ } else {
+ 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
}
@@ -122,7 +192,13 @@
that.activeShapePoints.push(event.surfacePosition)
const dynamicPositions = new global.DC.Namespace.Cesium.CallbackProperty(function () {
- return new global.DC.Namespace.Cesium.PolygonHierarchy(that.activeShapePoints)
+
+ if (that.type === "polyline") {
+ return that.activeShapePoints
+ } else {
+ return new global.DC.Namespace.Cesium.PolygonHierarchy(that.activeShapePoints)
+ }
+
}, false)
that.activeShape = that.drawGraph(dynamicPositions)
@@ -153,15 +229,21 @@
}
rightEvent (event) {
- if (this.activeShapePoints.length < 4) {
- global.viewer.tooltip.showAt(event.windowPosition, '不能绘制成面，请继续添加点')
- return
+ if (this.type === "polyline") {
+ if (this.activeShapePoints.length < 2) {
+ global.viewer.tooltip.showAt(event.windowPosition, '不能绘制成线，请继续添加点')
+ return
+ }
+ } else {
+ if (this.activeShapePoints.length < 3) {
+ global.viewer.tooltip.showAt(event.windowPosition, '不能绘制成面，请继续添加点')
+ return
+ }
}
this.terminateShape()
}
- // 清除
terminateShape () {
this.activeShapePoints.pop()
@@ -173,20 +255,50 @@
})
- let polygon = new global.DC.Polygon(this.drawCompletePosition)
+ if (this.type === "polyline") {
- polygon.setStyle({
- material: new global.DC.Namespace.Cesium.ColorMaterialProperty(
- global.DC.Namespace.Cesium.Color.NAVAJOWHITE.withAlpha(0.7)
- )
- })
+ let polyline = new global.DC.Polyline(this.drawCompletePosition)
- this.drawPolygonLayer.addOverlay(polygon)
+ polyline.setStyle({
+ material: new global.DC.Namespace.Cesium.ColorMaterialProperty(
+ global.DC.Namespace.Cesium.Color.NAVAJOWHITE.withAlpha(0.7)
+ )
+ })
+
+ this.drawPolylineLayer.addOverlay(polyline)
+
+ this.addPolyLineGon(100, this.cb)
+
+ // 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)
+
+
+
+ // this.createEditMoveCenterEntity()
+ } else {
+ 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)
+ )
+ })
+
+
+ // console.log(polygon, 999)
+
+ this.drawPolygonLayer.addOverlay(polygon)
+
+ this.lastEventData = {
+ type: 'polygon',
+ data: this.drawCompletePosition
+ }
+
+ this.cb(this.lastEventData)
+ }
this.clickInTheProcess()
}
- // 清空
clickInTheProcess () {
if (this.activeShape != null) {
global.viewer.entities.remove(this.activeShape)
@@ -204,18 +316,154 @@
// 清除
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()
+
+ 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 = []
}
+
+ resizePolyLineGon (num) {
+ this.addPolyLineGon(num)
+ }
+
+ addPolyLineGon (num, cb) {
+ 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)
+
+ this.lastEventData = {
+ type: 'line',
+ data: coords,
+ lineData: this.drawCompletePosition
+ }
+
+ cb(this.lastEventData)
+ }
+
+ //场景鼠标左键按下事件
+ 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