吉安感知网项目-前端
张含笑
2026-02-05 0d52b486d651e2bc4eaa278f1bc383fc3848e580
applications/drone-command/src/utils/cesium/shapeTools/edit/EditPolygonTool.js
@@ -3,6 +3,7 @@
import { ToolBase } from '../ToolBase'
const POINT_ENTITY_NAME = 'edit-polygon-point'
const MIDPOINT_ENTITY_NAME = 'edit-polygon-midpoint'
const DEFAULT_STYLE = {
   fill: Cesium.Color.fromBytes(45, 140, 240, 99),
   outline: Cesium.Color.fromBytes(45, 140, 240, 255),
@@ -57,7 +58,20 @@
   handleLeftDown(click) {
      const pickedEntity = this.viewer.scene.pick(click.position)?.id
      if (!pickedEntity || pickedEntity.name !== POINT_ENTITY_NAME) return
      if (!pickedEntity) return
      if (pickedEntity.name === MIDPOINT_ENTITY_NAME) {
         const leftIndex = pickedEntity.customData?.leftIndex
         const rightIndex = pickedEntity.customData?.rightIndex
         if (typeof leftIndex !== 'number' || typeof rightIndex !== 'number') return
         const midpoint = this.getMidpointPosition(leftIndex, rightIndex)
         this.positions.splice(rightIndex, 0, midpoint)
         this.rebuildPointEntities()
         this.isDragging = true
         this.draggedIndex = rightIndex
         this.disableMapControl()
         return
      }
      if (pickedEntity.name !== POINT_ENTITY_NAME) return
      const index = pickedEntity.customData?.index
      if (typeof index !== 'number') return
      this.isDragging = true
@@ -74,10 +88,11 @@
   }
   handleMouseMove(movement) {
      const tooltipText = '拖动顶点编辑,拖动中点插入新点,右键删除顶点'
      if (!this.tooltip?.isVisible) {
         this.tooltip.show('拖动顶点编辑', movement.endPosition)
         this.tooltip.show(tooltipText, movement.endPosition)
      } else {
         this.tooltip.show('拖动顶点编辑')
         this.tooltip.show(tooltipText)
         this.tooltip.move(movement.endPosition)
      }
      if (!this.isDragging || this.draggedIndex < 0) return
@@ -131,7 +146,7 @@
   rebuildPointEntities() {
      this.dataSource.entities.values
         .slice()
         .filter(entity => entity?.name === POINT_ENTITY_NAME)
         .filter(entity => entity?.name === POINT_ENTITY_NAME || entity?.name === MIDPOINT_ENTITY_NAME)
         .forEach(entity => this.dataSource.entities.remove(entity))
      this.positions.forEach((position, index) => {
@@ -151,6 +166,30 @@
            },
         })
      })
      const count = this.positions.length
      if (count < 2) return
      const segmentCount = count === 2 ? 1 : count
      for (let i = 0; i < segmentCount; i += 1) {
         const leftIndex = i
         const rightIndex = i + 1 < count ? i + 1 : 0
         this.dataSource.entities.add({
            name: MIDPOINT_ENTITY_NAME,
            position: new Cesium.CallbackProperty(() => this.getMidpointPosition(leftIndex, rightIndex), false),
            point: {
               pixelSize: 8,
               color: Cesium.Color.WHITE.withAlpha(0.6),
               outlineColor: this.style.outline.withAlpha(0.6),
               outlineWidth: 2,
               heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
               disableDepthTestDistance: Number.POSITIVE_INFINITY,
            },
            customData: {
               leftIndex,
               rightIndex,
            },
         })
      }
   }
   getPositions() {
@@ -164,6 +203,13 @@
      return scene.camera.pickEllipsoid(screenPosition, scene.globe.ellipsoid)
   }
   getMidpointPosition(leftIndex, rightIndex) {
      const left = this.positions[leftIndex]
      const right = this.positions[rightIndex]
      if (!left || !right) return left || right
      return Cesium.Cartesian3.midpoint(left, right, new Cesium.Cartesian3())
   }
   setStyle(style) {
      this.style = resolveStyle(style)
      if (this.polygonEntity?.polygon) {