4.6 交互式编辑

📦 基于 OpenLayers 10.5.0+ 最新 API
✅ Context7 文档验证通过
🔄 包含最新编辑交互特性

🎯 学习目标

本章节将深入介绍 OpenLayers 的交互式编辑功能，包括 Modify 交互的高级应用、Snap 交互的精确控制、撤销重做功能等。完成本章学习后，你将掌握：

• Modify 交互的创建和高级配置
• Snap 交互的精确控制和优化
• 撤销重做功能的实现
• 编辑工具集成和工作流
• 多用户协作编辑
• 编辑性能优化和最佳实践

🌟 交互式编辑概述

交互式编辑是 GIS 应用的核心功能，允许用户直接在地图上修改几何图形。OpenLayers 10.x 提供了强大的编辑交互，支持顶点编辑、形状调整、精确捕捉等功能。

🆕 OpenLayers 10.5.0+ 编辑新特性

Context7 验证的最新 API

// ✅ 最新的 Modify 交互配置
import { Modify, Snap } from 'ol/interaction';
import { altKeyOnly, shiftKeyOnly } from 'ol/events/condition';

const modifyInteraction = new Modify({
  source: vectorSource,

  // ✅ 删除条件：Context7 验证的默认行为变更
  // 注意：OpenLayers 10.5.0+ 中，默认需要 Alt 键删除顶点
  // 这里自定义为 Shift 键删除，更符合用户习惯
  deleteCondition: (event) => {
    return shiftKeyOnly(event) && event.type === 'singleclick';
  },

  // ✅ 插入顶点条件：Alt + 点击边缘插入新顶点
  insertVertexCondition: (event) => {
    return altKeyOnly(event);
  },

  // ✅ 像素容差：使用 CSS 像素，提高触摸设备的精度
  pixelTolerance: 10,

  // ✅ 样式配置：自定义修改时的视觉反馈
  style: modifyStyle
});

// ✅ 最新的 Snap 交互配置 (Context7 验证 2024-12-19)
const snapInteraction = new Snap({
  source: vectorSource,

  // ✅ 像素容差：使用 CSS 像素，改进的捕捉精度
  pixelTolerance: 12,

  // ✅ 顶点捕捉：吸附到现有要素的顶点
  vertex: true,

  // ✅ 边缘捕捉：吸附到现有要素的边缘
  edge: true
});

// ✅ Context7 验证的最新 Snap 事件处理
snapInteraction.on('snap', (event) => {
  // 🆕 重要变更：feature 属性现在总是返回捕捉的要素，不再返回 null
  const snappedFeature = event.feature; // 总是有值，不需要 null 检查

  // 🆕 新增：通过 segment 属性区分顶点捕捉和边缘捕捉
  if (event.segment) {
    // 边缘捕捉：segment 包含捕捉的线段坐标
    console.log('捕捉到边缘:', event.segment);
    console.log('捕捉的要素:', snappedFeature.get('name'));
  } else {
    // 顶点捕捉：segment 为 null
    console.log('捕捉到顶点');
    console.log('捕捉的要素:', snappedFeature.get('name'));
  }

  // 可以安全地访问要素属性，无需 null 检查
  const featureId = snappedFeature.getId();
  const featureName = snappedFeature.get('name');

  // 触发自定义事件
  map.dispatchEvent({
    type: 'snap:detected',
    feature: snappedFeature,
    isVertexSnap: !event.segment,
    isEdgeSnap: !!event.segment,
    segment: event.segment
  });
});

// ✅ 新增：unsnap 事件处理
snapInteraction.on('unsnap', (event) => {
  console.log('取消捕捉');

  // 触发自定义事件
  map.dispatchEvent({
    type: 'snap:released'
  });
});

// ✅ Context7 验证的重要变更说明
/*
OpenLayers 10.5.0+ Modify 交互的重要变更：

1. 默认删除条件变更：
   - 旧版本：单击即可删除顶点
   - 新版本：需要 Alt + 单击删除顶点
   - 建议：自定义为 Shift + 单击，更符合用户习惯

2. 像素容差改进：
   - 现在使用 CSS 像素而不是设备像素
   - 在高 DPI 设备上提供更一致的体验

3. 触摸设备优化：
   - 改进的触摸事件处理
   - 更大的默认容差值适配手指操作
*/

🔧 基础编辑功能

创建编辑管理器

import { Map, View, Feature } from 'ol';
import { Modify, Snap, Select } from 'ol/interaction';
import { Vector as VectorLayer } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import { Style, Fill, Stroke, Circle } from 'ol/style';
import { altKeyOnly, shiftKeyOnly } from 'ol/events/condition';

class EditingManager {
  constructor(map, options = {}) {
    this.map = map;
    this.options = {
      pixelTolerance: 10,
      snapTolerance: 12,
      enableSnap: true,
      enableHistory: true,
      ...options
    };
    
    this.editingLayer = null;
    this.selectInteraction = null;
    this.modifyInteraction = null;
    this.snapInteraction = null;
    
    this.history = [];
    this.historyIndex = -1;
    this.maxHistorySize = 50;
    
    this.isEditing = false;
    this.selectedFeatures = new Set();
    
    this.initializeInteractions();
    this.setupEventHandlers();
  }

  // 初始化交互
  initializeInteractions() {
    // 创建选择交互
    this.selectInteraction = new Select({
      style: this.createSelectionStyle(),
      filter: (feature, layer) => {
        return layer === this.editingLayer;
      }
    });

    // 创建修改交互
    this.modifyInteraction = new Modify({
      features: this.selectInteraction.getFeatures(),
      deleteCondition: (event) => {
        // Shift + 点击删除顶点
        return shiftKeyOnly(event) && event.type === 'singleclick';
      },
      insertVertexCondition: (event) => {
        // Alt + 点击插入顶点
        return altKeyOnly(event);
      },
      pixelTolerance: this.options.pixelTolerance,
      style: this.createModifyStyle()
    });

    // 创建捕捉交互
    if (this.options.enableSnap) {
      this.snapInteraction = new Snap({
        source: this.editingLayer?.getSource(),
        pixelTolerance: this.options.snapTolerance,
        vertex: true,
        edge: true
      });
    }

    // 添加到地图
    this.map.addInteraction(this.selectInteraction);
    this.map.addInteraction(this.modifyInteraction);
    if (this.snapInteraction) {
      this.map.addInteraction(this.snapInteraction);
    }
  }

  // 设置编辑图层
  setEditingLayer(layer) {
    this.editingLayer = layer;
    
    // 更新捕捉交互的源
    if (this.snapInteraction) {
      this.map.removeInteraction(this.snapInteraction);
      this.snapInteraction = new Snap({
        source: layer.getSource(),
        pixelTolerance: this.options.snapTolerance,
        vertex: true,
        edge: true
      });
      this.map.addInteraction(this.snapInteraction);
    }
  }

  // 创建选择样式
  createSelectionStyle() {
    return new Style({
      fill: new Fill({
        color: 'rgba(255, 255, 0, 0.3)'
      }),
      stroke: new Stroke({
        color: '#ffff00',
        width: 3
      }),
      image: new Circle({
        radius: 8,
        fill: new Fill({
          color: '#ffff00'
        }),
        stroke: new Stroke({
          color: '#ffffff',
          width: 2
        })
      })
    });
  }

  // 创建修改样式
  createModifyStyle() {
    return new Style({
      image: new Circle({
        radius: 6,
        fill: new Fill({
          color: '#ff0000'
        }),
        stroke: new Stroke({
          color: '#ffffff',
          width: 2
        })
      }),
      stroke: new Stroke({
        color: '#ff0000',
        width: 2,
        lineDash: [5, 5]
      })
    });
  }

  // 设置事件处理器
  setupEventHandlers() {
    // 选择事件
    this.selectInteraction.on('select', (event) => {
      this.handleSelection(event);
    });

    // 修改开始事件
    this.modifyInteraction.on('modifystart', (event) => {
      this.handleModifyStart(event);
    });

    // 修改结束事件
    this.modifyInteraction.on('modifyend', (event) => {
      this.handleModifyEnd(event);
    });

    // 键盘事件
    document.addEventListener('keydown', (event) => {
      this.handleKeyDown(event);
    });
  }

  // 处理选择事件
  handleSelection(event) {
    const selected = event.selected;
    const deselected = event.deselected;

    // 更新选择集合
    deselected.forEach(feature => {
      this.selectedFeatures.delete(feature);
    });

    selected.forEach(feature => {
      this.selectedFeatures.add(feature);
    });

    // 触发选择事件
    this.map.dispatchEvent({
      type: 'editing:select',
      selected: selected,
      deselected: deselected,
      allSelected: Array.from(this.selectedFeatures)
    });
  }

  // 处理修改开始事件
  handleModifyStart(event) {
    this.isEditing = true;
    
    // 保存修改前的状态
    if (this.options.enableHistory) {
      this.saveState();
    }

    // 触发修改开始事件
    this.map.dispatchEvent({
      type: 'editing:modifystart',
      features: event.features.getArray()
    });
  }

  // 处理修改结束事件
  handleModifyEnd(event) {
    this.isEditing = false;

    // 触发修改结束事件
    this.map.dispatchEvent({
      type: 'editing:modifyend',
      features: event.features.getArray()
    });
  }

  // 处理键盘事件
  handleKeyDown(event) {
    if (event.ctrlKey || event.metaKey) {
      switch (event.key) {
        case 'z':
          event.preventDefault();
          if (event.shiftKey) {
            this.redo();
          } else {
            this.undo();
          }
          break;
        case 'y':
          event.preventDefault();
          this.redo();
          break;
        case 'a':
          event.preventDefault();
          this.selectAll();
          break;
      }
    }

    if (event.key === 'Delete' || event.key === 'Backspace') {
      event.preventDefault();
      this.deleteSelected();
    }

    if (event.key === 'Escape') {
      this.clearSelection();
    }
  }

  // 保存状态（用于撤销重做）
  saveState() {
    if (!this.editingLayer) return;

    const features = this.editingLayer.getSource().getFeatures();
    const state = {
      features: features.map(feature => feature.clone()),
      timestamp: Date.now()
    };

    // 移除当前位置之后的历史
    this.history = this.history.slice(0, this.historyIndex + 1);
    
    // 添加新状态
    this.history.push(state);
    this.historyIndex++;

    // 限制历史大小
    if (this.history.length > this.maxHistorySize) {
      this.history.shift();
      this.historyIndex--;
    }
  }

  // 撤销
  undo() {
    if (this.historyIndex > 0) {
      this.historyIndex--;
      this.restoreState(this.history[this.historyIndex]);
      
      this.map.dispatchEvent({
        type: 'editing:undo',
        historyIndex: this.historyIndex
      });
    }
  }

  // 重做
  redo() {
    if (this.historyIndex < this.history.length - 1) {
      this.historyIndex++;
      this.restoreState(this.history[this.historyIndex]);
      
      this.map.dispatchEvent({
        type: 'editing:redo',
        historyIndex: this.historyIndex
      });
    }
  }

  // 恢复状态
  restoreState(state) {
    if (!this.editingLayer) return;

    const source = this.editingLayer.getSource();
    
    // 清除当前要素
    source.clear();
    
    // 添加历史状态中的要素
    const features = state.features.map(feature => feature.clone());
    source.addFeatures(features);
    
    // 清除选择
    this.clearSelection();
  }

  // 全选
  selectAll() {
    if (!this.editingLayer) return;

    const features = this.editingLayer.getSource().getFeatures();
    const selectedFeatures = this.selectInteraction.getFeatures();
    
    selectedFeatures.clear();
    features.forEach(feature => {
      selectedFeatures.push(feature);
    });
  }

  // 删除选中的要素
  deleteSelected() {
    if (!this.editingLayer) return;

    const selectedFeatures = this.selectInteraction.getFeatures();
    const source = this.editingLayer.getSource();
    
    if (selectedFeatures.getLength() > 0) {
      // 保存状态
      if (this.options.enableHistory) {
        this.saveState();
      }

      // 删除要素
      selectedFeatures.forEach(feature => {
        source.removeFeature(feature);
      });
      
      selectedFeatures.clear();
      
      this.map.dispatchEvent({
        type: 'editing:delete',
        count: selectedFeatures.getLength()
      });
    }
  }

  // 清除选择
  clearSelection() {
    this.selectInteraction.getFeatures().clear();
    this.selectedFeatures.clear();
  }

  // 启用编辑
  enableEditing() {
    this.selectInteraction.setActive(true);
    this.modifyInteraction.setActive(true);
    if (this.snapInteraction) {
      this.snapInteraction.setActive(true);
    }
  }

  // 禁用编辑
  disableEditing() {
    this.selectInteraction.setActive(false);
    this.modifyInteraction.setActive(false);
    if (this.snapInteraction) {
      this.snapInteraction.setActive(false);
    }
    this.clearSelection();
  }

  // 获取编辑状态
  isEditingActive() {
    return this.selectInteraction.getActive();
  }

  // 获取历史信息
  getHistoryInfo() {
    return {
      canUndo: this.historyIndex > 0,
      canRedo: this.historyIndex < this.history.length - 1,
      historySize: this.history.length,
      currentIndex: this.historyIndex
    };
  }
}

// 使用示例
const editingManager = new EditingManager(map, {
  pixelTolerance: 10,
  snapTolerance: 12,
  enableSnap: true,
  enableHistory: true
});

// 设置编辑图层
editingManager.setEditingLayer(vectorLayer);

// 启用编辑
editingManager.enableEditing();