经纬志
首页 / OpenLayers / 使用示例

绘制交互

下拉框切换点、线、面三种绘制类型,勾选后可以拖动已有顶点修改形状。 绘制完成后状态栏会给出几何类型和顶点数量。

OpenLayers 10.3.1 · 更新 2026-10-27
源码与运行效果
运行效果

说明

切换类型时示例先 removeInteraction 再新建, 因为 type 是 Draw 的构造参数,没有 setter。 直接改内部字段会让已注册的事件和几何模板对不上。

操作结果
选择「点」后单击添加一个点要素
选择「线」后连续单击每击落一个顶点,双击结束
选择「面」后连续单击自动闭合成面,双击结束
勾选「可拖动顶点」绘制暂停,拖动顶点改形状
「清空」按钮移除数据源里的全部要素

Modify 与 Draw 同时激活会争抢鼠标事件,示例用复选框把二者互斥。 实际项目里也可以给 Modify 设 active: false, 在“编辑模式”与“绘制模式”之间切换。

绘制出来的坐标是视图投影下的米制值。 要保存为经纬度,在 drawend 里对几何体调用 clone().transform('EPSG:3857', 'EPSG:4326'), 不要直接转换原几何对象。