From 4b8b4906a8983c811954a074702b0024e7694588 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 28 Jan 2026 16:06:50 +0800
Subject: [PATCH] feat:区域划分地图绘制相关处理
---
applications/drone-command/src/views/areaManage/partition/shapeTools/draw/DrawEllipseTool.js | 91 +++++++++++++++++++++++----------------------
1 files changed, 47 insertions(+), 44 deletions(-)
diff --git a/applications/drone-command/src/views/areaManage/partition/shapeTools/draw/DrawEllipseTool.js b/applications/drone-command/src/views/areaManage/partition/shapeTools/draw/DrawEllipseTool.js
index 9ab98fb..1b33090 100644
--- a/applications/drone-command/src/views/areaManage/partition/shapeTools/draw/DrawEllipseTool.js
+++ b/applications/drone-command/src/views/areaManage/partition/shapeTools/draw/DrawEllipseTool.js
@@ -1,12 +1,7 @@
import * as Cesium from 'cesium'
import { MapTooltip } from '../Tooltip'
import { ToolBase } from '../ToolBase'
-import {
- getBoundsFromCartesians,
- getCenterFromBounds,
- getMetersBetween,
- buildEllipsePositions,
-} from '../shapeUtils'
+import { buildEllipsePositions } from '../shapeUtils'
export class DrawEllipseTool extends ToolBase {
constructor(viewer) {
@@ -14,12 +9,13 @@
this.tooltip = new MapTooltip(viewer)
this.dataSource = null
this.ellipseEntity = null
- this.startPosition = null
- this.endPosition = null
this.centerCartesian = null
+ this.majorPoint = null
+ this.minorPoint = null
this.semiMajor = 0
this.semiMinor = 0
this.isDrawing = false
+ this.drawStep = 0
}
start() {
@@ -28,26 +24,37 @@
this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
this.handler.setInputAction(click => this.handleLeftClick(click), Cesium.ScreenSpaceEventType.LEFT_CLICK)
this.handler.setInputAction(movement => this.handleMouseMove(movement), Cesium.ScreenSpaceEventType.MOUSE_MOVE)
- this.tooltip.show('单击设置起点', { x: 0, y: 0 })
+ this.drawStep = 0
+ this.tooltip.show('单击设置中心点', { x: 0, y: 0 })
}
handleLeftClick(click) {
const position = this.getPositionFromScreen(click.position)
if (!position) return
-
- if (!this.startPosition) {
- this.startPosition = position
- this.endPosition = position
+ if (this.drawStep === 0) {
+ this.centerCartesian = position
+ this.semiMajor = 1
+ this.semiMinor = 1
this.isDrawing = true
+ this.drawStep = 1
this.createEntities()
- this.tooltip.show('单击结束绘制', click.position)
+ this.tooltip.show('单击设置长轴', click.position)
return
}
-
- if (this.isDrawing) {
- this.endPosition = position
- this.updateEllipseByBounds()
+ if (this.drawStep === 1) {
+ this.majorPoint = position
+ this.semiMajor = Math.max(1, this.getSurfaceDistance(this.centerCartesian, this.majorPoint))
+ this.semiMinor = this.semiMajor
+ this.drawStep = 2
+ this.tooltip.show('单击设置短轴', click.position)
+ return
+ }
+ if (this.drawStep === 2) {
+ this.minorPoint = position
+ const minorRadius = Math.max(1, this.getSurfaceDistance(this.centerCartesian, this.minorPoint))
+ this.semiMinor = Math.min(minorRadius, this.semiMajor)
this.isDrawing = false
+ this.drawStep = 0
const positions = buildEllipsePositions(this.centerCartesian, this.semiMajor, this.semiMinor)
this.notify('getPolygonPositions', positions)
this.tooltip.hide()
@@ -56,32 +63,20 @@
}
handleMouseMove(movement) {
- if (!this.isDrawing) {
- this.tooltip.move(movement.endPosition)
- return
- }
+ this.tooltip.move(movement.endPosition)
+ if (!this.isDrawing) return
const position = this.getPositionFromScreen(movement.endPosition)
if (!position) return
- this.endPosition = position
- this.updateEllipseByBounds()
- this.tooltip.move(movement.endPosition)
- }
-
- updateEllipseByBounds() {
- const bounds = getBoundsFromCartesians([this.startPosition, this.endPosition])
- const center = getCenterFromBounds(bounds)
- if (!bounds || !center) return
- this.centerCartesian = Cesium.Cartesian3.fromRadians(center.longitude, center.latitude)
- const eastWest = getMetersBetween(
- new Cesium.Cartographic(bounds.west, center.latitude),
- new Cesium.Cartographic(bounds.east, center.latitude)
- )
- const northSouth = getMetersBetween(
- new Cesium.Cartographic(center.longitude, bounds.south),
- new Cesium.Cartographic(center.longitude, bounds.north)
- )
- this.semiMajor = Math.max(1, eastWest / 2)
- this.semiMinor = Math.max(1, northSouth / 2)
+ if (this.drawStep === 1) {
+ const radius = Math.max(1, this.getSurfaceDistance(this.centerCartesian, position))
+ this.semiMajor = radius
+ this.semiMinor = radius
+ return
+ }
+ if (this.drawStep === 2) {
+ const minorRadius = Math.max(1, this.getSurfaceDistance(this.centerCartesian, position))
+ this.semiMinor = Math.min(minorRadius, this.semiMajor)
+ }
}
createEntities() {
@@ -98,6 +93,13 @@
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
})
+ }
+
+ getSurfaceDistance(startCartesian, endCartesian) {
+ const start = Cesium.Cartographic.fromCartesian(startCartesian)
+ const end = Cesium.Cartographic.fromCartesian(endCartesian)
+ const geodesic = new Cesium.EllipsoidGeodesic(start, end)
+ return geodesic.surfaceDistance
}
clearPreviewEntities() {
@@ -127,9 +129,10 @@
}
this.tooltip?.destroy()
this.tooltip = null
- this.startPosition = null
- this.endPosition = null
this.centerCartesian = null
+ this.majorPoint = null
+ this.minorPoint = null
this.isDrawing = false
+ this.drawStep = 0
}
}
--
Gitblit v1.9.3