`r`n
经纬志
`r`n
`r`n
首页 / OpenLayers / 使用示例
`r`n

绘制吸附

吸附让手绘的顶点精确落在已有线上,Snap 交互负责这件事。

OpenLayers 10.3.1 · 更新 2026-10-28
`r`n
源码与运行效果
运行效果
`r`n

说明

示例先放两条示意道路作为吸附目标,再添加 ol.interaction.Draw 画多边形,最后挂上 ol.interaction.Snap,其 source 指向道路图层。靠近道路时顶点会被拉到最近的线段位置,绘制出的边界与道路重合。吸附容差在构造时固定,滑块改动时移除旧交互并新建一个。

操作结果
在道路附近点击顶点被拉到道路上
取消勾选「吸附到道路」顶点落在鼠标实际位置
调大吸附容差离道路更远也会被吸住

要点

  • Snap 的源可以与绘制目标不同,前者提供参照,后者接收结果。
  • 吸附容差以像素计,缩放后视觉距离与吸附距离不同。

多点吸附时注意目标图层不要包含正在绘制的要素,否则会自我吸附。

`r`n
`r`n