经纬志
首页 / OpenLayers / API 文档

Draw

先看结论

绘制交互。按下并移动鼠标生成点、线、面几何体，绘制完成后可直接写入矢量数据源。

最后验证 2026-11-03 · OpenLayers 10.3.1 · 更新 2026-10-27 · 引用本文
new ol.interaction.Draw(options)

构造参数

参数说明
type几何类型，必填，可取 'Point'、'LineString'、'Polygon'、'Circle'、'MultiPoint'、'MultiLineString'、'MultiPolygon'，或返回类型的函数
source目标矢量数据源，提供后绘制完成自动写入
features目标要素集合，与 source 二选一
geometryName几何体在要素中的属性名，默认 'geometry'
style绘制过程中临时图形的样式
clickTolerance按下与抬起的像素容差，默认 6
snapTolerance结束绘制时首尾吸附的像素容差，默认 12
condition判定是否开始绘制的函数，默认左键且无修饰键
freehand是否自由手绘，默认 false
finishCondition判定是否结束绘制的函数
maxPoints线上最多顶点数，达到即自动结束
geometryFunction自定义几何构造，常用于矩形绘制
wrapX是否横向循环，默认 false

常用方法

方法返回说明
finishDrawing()void结束当前绘制并触发 drawend
abortDrawing()void放弃当前绘制，触发 drawabort
removeLastPoint()void撤销最后一个顶点
setActive(active)void启停绘制交互

事件

事件回调参数说明
drawstartevt.feature开始绘制，可在此给要素预设属性
drawendevt.feature绘制完成
drawabortevt.feature绘制被取消
 
var drawSource = new ol.source.Vector();
map.addLayer(new ol.layer.Vector({
  source: drawSource,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({ color: '#1f5fd0', width: 2 }),
    fill: new ol.style.Fill({ color: 'rgba(31, 95, 208, 0.15)' })
  })
}));

var draw = new ol.interaction.Draw({
  source: drawSource,
  type: 'Polygon',
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({ color: '#d0453a', width: 2, lineDash: [6, 4] }),
    image: new ol.style.Circle({
      radius: 5,
      fill: new ol.style.Fill({ color: '#d0453a' })
    })
  })
});
map.addInteraction(draw);

draw.on('drawstart', function (evt) {
  evt.feature.set('createdAt', Date.now());
});

draw.on('drawend', function (evt) {
  console.log(evt.feature.getGeometry().getType());   // Polygon
});

注意事项

  • 传了 source 时要素在 drawend 中已自动写入，再手动 addFeature 会出现重复图形。
  • type: 'Circle' 得到的几何体仍是多边形，取值时 getType() 返回 'Polygon'，中心与半径要从几何体反推。
  • 自由手绘需要设置 freehand: true 并按住拖动，单击不会生成图形。
  • 绘制结束后交互仍处于激活状态，切换到浏览模式要调 draw.setActive(false)，否则点击会继续画点。
引用本文

经纬志（2026）。《Draw》。https://www.jingweizhi.com/openlayers/api/draw.html（访问日期 2026-11-03）。