首页 / OpenLayers / 使用示例
`r`n 绘制吸附
吸附让手绘的顶点精确落在已有线上,Snap 交互负责这件事。
源码与运行效果
说明
示例先放两条示意道路作为吸附目标,再添加 ol.interaction.Draw 画多边形,最后挂上 ol.interaction.Snap,其 source 指向道路图层。靠近道路时顶点会被拉到最近的线段位置,绘制出的边界与道路重合。吸附容差在构造时固定,滑块改动时移除旧交互并新建一个。
| 操作 | 结果 |
|---|---|
| 在道路附近点击 | 顶点被拉到道路上 |
| 取消勾选「吸附到道路」 | 顶点落在鼠标实际位置 |
| 调大吸附容差 | 离道路更远也会被吸住 |
要点
Snap的源可以与绘制目标不同,前者提供参照,后者接收结果。- 吸附容差以像素计,缩放后视觉距离与吸附距离不同。
多点吸附时注意目标图层不要包含正在绘制的要素,否则会自我吸附。