无人机管理后台前端(已迁走)
张含笑
2025-12-09 5808f76456ca0d40de5074f132b73a5a488e3e13
src/views/layerManagement/components/utils.js
@@ -14,6 +14,8 @@
 */
export class DrawPolygon {
   constructor() {
      // 是否绘制
      this.whetherToDraw =false
      // 图斑预览模式标记
      this.isPureSpotPreview = false
      // 是否删除测区
@@ -61,6 +63,7 @@
      this.delPoint = this.delPoint.bind(this)
      // 外部订阅者
      this.listeners = []
   }
   // 实体命名常量
@@ -96,6 +99,10 @@
   editThePatch(data) {
      this.isPreviewMode = data
   }
   // 绘制
   drawTheArea(data){
      this.whetherToDraw = data
   }
   // 删除测区
   deleteTheArea(data) {
      this.isDeleteTheArea = data
@@ -103,6 +110,12 @@
   // 开始绘制
   startDrawing() {
      if (!this.whetherToDraw) {
         return;
        }
      this.drawingMode = true
      this.curPolygon = new Cesium.PolygonHierarchy()
@@ -164,36 +177,10 @@
            ind: pointIndex, // 索引记录
         },
      })
   }
   // 清除不在范围内的点
   removeLastInvalidPoint() {
      const posLen = this.curPolygon.positions.length
      if (posLen === 0) return
      let targetPointId = ''
      let removeCount = 0
      if (posLen === 2) {
         removeCount = 2
         targetPointId = `${DrawPolygon.ENTITY_NAMES.POINT_ID_PREFIX}0`
      } else if (posLen > 2) {
         removeCount = 1
         const pointIndex = posLen - 2
         targetPointId = `${DrawPolygon.ENTITY_NAMES.POINT_ID_PREFIX}${pointIndex}`
      }
      this.curPolygon.positions.splice(posLen - removeCount, removeCount)
      const invalidPoint = this.editPolygonPointDataSource.entities.getById(targetPointId)
      if (invalidPoint) {
         this.editPolygonPointDataSource.entities.remove(invalidPoint)
      }
      if (this.curPolygon.positions.length === 0 && this.polygonEntity) {
         this.editPolygonDataSource.entities.remove(this.polygonEntity)
         this.polygonEntity = null
      }
   }
   // 添加一个点
   addPosition(position, isAdd = true) {
      // 第一个点要重复压入一次,形成动态绘制效果
@@ -275,7 +262,7 @@
      // 编辑模式下,拖拽点实时更新
      if (this.editingMode && this.draggedEntity?.customData) {
         this.draggedEntity.position = cartesian
         this.curPolygon.positions[this.draggedEntity?.customData.ind] = cartesian
         this.curPolygon.positions[this.draggedEntity?.customData.ind] = cartesian
      }
      // 绘制模式下,实时更新最后一个点
@@ -306,23 +293,25 @@
   // 鼠标左键点击
   handleLeftClick(click) {
      this.removeMenuPopup()
      const pickedAllEntity = this.viewer.scene.drillPick(click.position).filter(i => i.id)
      const isStartPoint = pickedAllEntity.find(i => i.id.name === '起飞点')
      const isPolygonPoint = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POINT)
      const isPolygon = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POLYGON)
      if (isStartPoint) return
      if (this.drawingMode && !this.whetherToDraw) {
         return; // 阻断后续绘制逻辑
        }
      // 如果不是绘制模式
      if (!this.drawingMode) {
         if (!isPolygon) {
            this.editingMode = false
            this.editPolygonPointDataSource.entities.show = false
            return
         }
         if (isPolygon) {
            this.editingMode = true
            this.editPolygonPointDataSource.entities.show = true
         }
@@ -349,10 +338,9 @@
   }
   // 鼠标右键点击(弹出菜单)
   handleRightClick(click) {
   handleRightClick(click) {
      const that = this
      if (that.drawingMode) return
      that.removeMenuPopup()
      const pickedAllEntity = that.viewer.scene.drillPick(click.position).filter(i => i.id)
@@ -367,10 +355,12 @@
         pickedEntity = isPolygon
         tooltipEvent = that.delPolygon
         menuType = 'polygon'
      } else if (isEditPoint) {
         pickedEntity = isEditPoint
         tooltipEvent = that.delPoint
         menuType = 'edit-point'
      }
      if (pickedEntity && this.isDeleteTheArea) {
@@ -431,12 +421,7 @@
      this.notify('getPolygonPositions', [])
      this.startDrawing()
   }
   // 删除图斑
   delSpot() {
      this.removeEntities()
      this.isPreviewMode = true
      this.startDrawing()
   }
   // 删除端点
   delPoint() {
      if (this.curPolygon.positions.length <= 3) {
@@ -469,6 +454,7 @@
      menuPopup.id = 'planarPolygonEditMenu'
      menuPopup.className = 'planar-polygon-edit-menu'
      const menuItems =
         type === 'polygon'
            ? [{ title: '删除测区', class: 'del-planar-polygon' }]
@@ -480,6 +466,7 @@
         titleDiv.className = item.class
         menuPopup.appendChild(titleDiv)
      })
      this.isPreviewMode = true
      menuPopupVBox.appendChild(menuPopup)
      return menuPopupVBox
@@ -539,15 +526,19 @@
   // 初始化已有多边形
   initPolygon(viewer, positions, isPurePreview = false) {
      this.initHandler(viewer)
      this.isPureSpotPreview = isPurePreview
      this.startDrawing()
      if (this.whetherToDraw) {
         this.startDrawing();
        } else {
         // 新增:不允许绘制时,确保绘制模式为 false,避免误触发
         this.drawingMode = false;
        }
      let newPosition = positions.map(item => {
         return Cesium.Cartesian3.fromDegrees(Number(item.lng), Number(item.lat), Number(item.height))
      })
      // 预览航线的时候调用
      if (!this.isPureSpotPreview) {
         this.notify('getPolygonPositions', newPosition)
      }
      newPosition.forEach(item => {
         this.addPosition(item, false)
@@ -571,7 +562,10 @@
   // 初始化事件处理器
   initHandler(viewer) {
      this.viewer = viewer
      this.startDrawing()
      if(this.whetherToDraw){
         this.startDrawing()
      }
      if (!this.handler) {
         this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)