Skip to content

要素编辑交互

要素编辑交互为在 OpenLayers 地图上创建、修改、选择和操作矢量要素提供核心功能。该系统使用户能够通过鼠标和触摸交互绘制新的几何图形、编辑现有要素、选择要素进行操作以及执行空间转换。

关于支持这些交互的基本事件处理和条件的信息,请参阅 事件处理和条件。关于平移和缩放等地图导航交互的信息,请参阅 导航交互

架构概述

要素编辑系统围绕从基本交互类型扩展的交互类层次结构构建。这些交互通过事件驱动协调和共享的空间索引结构协同工作。

核心交互层次结构

SVG
100%

交互协调系统

SVG
100%

核心编辑交互

Draw 交互

Draw 交互通过用户输入启用新矢量要素的创建。它支持多种几何类型和绘图模式,具有复杂的坐标处理和验证功能。

关键特性:

  • 几何类型: 通过 type 选项支持点、线、多边形、圆
  • 绘图模式: 基于单击的顶点放置和自由绘图
  • 跟踪: 在绘图期间跟随现有几何图形边缘
  • 坐标验证: 最小/最大点约束和完成条件

绘图生命周期:

SVG
100%

Modify 交互

Modify 交互为现有要素提供顶点和边操作功能。它使用空间索引进行高效的命​​中检测并支持复杂的几何类型。

修改系统:

SVG
100%

Select 交互

Select 交互管理要素选择状态并与其他编辑交互协调。它提供过滤功能并维护要素-图层关联。

选择特性:

  • 基于条件的选择: 用于选择/取消选择的可配置事件条件
  • 多选: 支持使用修饰键进行多要素选择
  • 图层过滤: 将选择限制为特定图层
  • 要素过滤: 自定义要素过滤函数
  • 样式管理: 自动为选中的要素设置样式

Translate 交互

Translate 交互通过拖动操作启用移动要素。它可以处理单个要素或要素集合并处理坐标转换。

平移过程:

SVG
100%

支持交互

Snap 交互

Snap 交互通过修改 MapBrowserEvent 坐标和像素为其他编辑交互提供吸附辅助。它维护吸附目标的空间索引并支持各种吸附模式。

吸附功能:

  • 顶点吸附: 吸附到现有要素顶点
  • 边吸附: 吸附到线段边
  • 交叉点吸附: 吸附到计算的线段交叉点
  • 自定义分段器: 每种几何类型可配置的分段提取

空间索引:

SVG
100%

DragBox 和 Extent 交互

DragBox 提供矩形选择区域绘制功能,而 Extent 提供专门的范围框创建和修改,具有顶点/边操作功能。

事件系统和生命周期

事件类型和流程

每个编辑交互在其操作生命周期期间发出特定事件:

交互事件描述
Drawdrawstart、drawend、drawabort要素创建生命周期
Modifymodifystart、modifyend要素修改生命周期
Selectselect要素选择更改
Translatetranslatestart、translating、translateend要素移动生命周期
Snapsnap、unsnap吸附状态更改

事件处理模式

SVG
100%

集成模式

叠加层管理

编辑交互使用 VectorLayer 叠加层在编辑操作期间显示临时图形:

SVG
100%

坐标系统集成

编辑交互通过投影系统处理用户和视图投影之间的坐标转换:

SVG
100%

要素编辑交互系统为 OpenLayers 中的矢量要素操作提供了全面的框架,每个交互专门针对特定的编辑任务,同时保持一致的事件处理模式和坐标系统集成。