无人机管理后台前端(已迁走)
张含笑
2025-10-29 308a34f2f9fe60b83a9942e1dd661e58b732dcb8
feat:是否允许绘制
2 files modified
52 ■■■■ changed files
src/views/layerManagement/components/utils.js 49 ●●●●● patch | view | raw | blame | history
src/views/layerManagement/index.vue 3 ●●●●● patch | view | raw | blame | history
src/views/layerManagement/components/utils.js
@@ -14,6 +14,8 @@
 */
export class DrawPolygon {
    constructor() {
        // 是否绘制
        this.whetherToDraw =false
        // 图斑预览模式标记
        this.isPureSpotPreview = false
        // 是否删除测区
@@ -61,8 +63,7 @@
        this.delPoint = this.delPoint.bind(this)
        // 外部订阅者
        this.listeners = []
        this.polygons = []; // 存储所有多边形数据 { id, positions, entity, pointsEntity }
        this.currentPolygonIndex = -1; // 当前操作的多边形索引
    }
    // 实体命名常量
@@ -98,6 +99,12 @@
    editThePatch(data) {
        this.isPreviewMode = data
    }
    // 绘制
    drawTheArea(data){
        this.whetherToDraw = data
        console.log('this',this.whetherToDraw);
    }
    // 删除测区
    deleteTheArea(data) {
        this.isDeleteTheArea = data
@@ -105,6 +112,10 @@
    // 开始绘制
    startDrawing() {
        if (!this.whetherToDraw) {
            console.log('当前不允许绘制,whetherToDraw 为 false');
            return;
          }
        this.drawingMode = true
        this.curPolygon = new Cesium.PolygonHierarchy()
@@ -228,7 +239,8 @@
        const pickedEntity = this.viewer.scene.pick(movement.position)?.id
        const isPoint = pickedEntity?.name === DrawPolygon.ENTITY_NAMES.POINT
console.log('pickedEntity',pickedEntity);
console.log('isPoint',isPoint);
        if (pickedEntity && isPoint) {
            this.isDragging = true
            this.draggedEntity = pickedEntity
@@ -280,6 +292,8 @@
        if (this.editingMode && this.draggedEntity?.customData) {
            this.draggedEntity.position = cartesian
            this.curPolygon.positions[this.draggedEntity?.customData.ind] = cartesian
            console.log('拖拽');
        }
        // 绘制模式下,实时更新最后一个点
@@ -310,14 +324,13 @@
    // 鼠标左键点击
    handleLeftClick(click) {
        this.removeMenuPopup()
        const pickedAllEntity = this.viewer.scene.drillPick(click.position).filter(i => i.id)
        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 (this.drawingMode && !this.whetherToDraw) {
            console.log('当前不允许绘制,无法添加点或闭合多边形');
            return; // 阻断后续绘制逻辑
          }
        // 如果不是绘制模式
        if (!this.drawingMode) {
            if (!isPolygon) {
@@ -546,16 +559,19 @@
    // 初始化已有多边形
    initPolygon(viewer, positions, isPurePreview = false) {
        this.initHandler(viewer)
        this.isPureSpotPreview = isPurePreview
        this.startDrawing()
        if (this.whetherToDraw) {
            this.startDrawing();
          } else {
            // 新增:不允许绘制时,确保绘制模式为 false,避免误触发
            this.drawingMode = false;
            console.log('当前不允许绘制,初始化事件处理器但不启动绘制');
          }
        
        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)
@@ -579,7 +595,10 @@
    // 初始化事件处理器
    initHandler(viewer) {
        this.viewer = viewer
        this.startDrawing()
        if(this.whetherToDraw){
            this.startDrawing()
        }
        if (!this.handler) {
            this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
src/views/layerManagement/index.vue
@@ -80,11 +80,14 @@
  drawPolygonExample.editThePatch(true);
  const positions = parseGeoDataToPositions(val.geo_data, val.altitude);
  if (positions.length < 3) return; // 少于3个点无法构成多边形
   drawPolygonExample.drawTheArea(true)
  drawPolygonExample.initPolygon(viewer, positions, true);
};
// 清除地图数据
const parentMethod = () => {
drawPolygonExample.delPolygon()
drawPolygonExample.drawTheArea(false)
};
// 点击显示区域
const handleCoverDataUpdate = data => {