feat:区域划分地图绘制相关处理

shuishen

2026-01-28 4b8b4906a8983c811954a074702b0024e7694588

 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
   }
}