[置顶] OpenLayers 3 之 绘制图形（ol.interaction.Draw）原理解析

在 OpenLayers 3 中，负责交互的模块中，有一个负责绘制图形的交互模块，这个交互子模块是 ol.interaction.Draw。该模块允许用户通过鼠标点击（PC浏览器环境）或者手指触摸（ 触屏手机浏览器环境）在地图上绘制点、线 和 面，上一篇文章 中主要介绍了绘制功能的用法，这次我们看看其底层实现及其原理。

注：绘制完成之前的要素图形我们称之为草图（sketch），绘制完成的图形称为要素（feature）。

一、实现原理

绘制交互是通过鼠标或手指的点击添加点的坐标的，OpenLayers 会自动将 屏幕坐标转换为 地图坐标，点击绘制完成后，所有的点初始化一个 geometry 对象，然后利用这个 geometry 初始化一个 feature。在上一篇介绍绘制用法时，我们知道初始化一个绘制交互，要传一个 features 参数或者 source 参数，如果是 features，那么勾绘完成的 feature 就会添加到 features 集合中，而 features 会属于一个 source，而 source 又属于 layer，layer 属于一个 map，这样，勾绘的要素（feature）就会显示到地图中。这个过程比较麻烦，估计会绕晕，我们用一张图进行说明：

勾绘交互原理流程图

该类中，有几个私有变量，维护着绘制过程中的坐标和子要素或者绘制状态等内容，主要有以下几个：

• finishCoordinate_，绘制的要素的完成点坐标，对于多边形来说是第一个点，因为多边形要闭合，所以第一个点和最后一个点是重合的。而对于多边形来说，最后一个点就是最后一个点；
• sketchFeature_，草图的要素；
• sketchPoint_，草图的点要素；
• sketchCoords_，草图的点要素的坐标集合，用于绘制要素为线或多边形时；
• sketchLine_，草图的线要素，用于绘制要素为多边形时；
• sketchLineCoords_，草图的线坐标，当绘制多边形或圆形时用到；

二、实现细节

1、私有的辅助函数

ol.interaction.Draw 类中，私有的辅助函数包括：

• ol.interaction.Draw.handleDownEvent_，处理鼠标按下的事件；
• ol.interaction.Draw.handleUpEvent_，处理松开鼠标单击的事件；

• ol.interaction.Draw.getMode_，获得绘制要素的 geometry 类型，包含四种：Point、LineString、Circle和Polygon。

• ol.interaction.Draw.prototype.handlePointerMove_，处理鼠标移动事件；

• ol.interaction.Draw.prototype.atFinish_，判断一个事件是否在捕捉勾绘开始坐标的容差之内；
• ol.interaction.Draw.prototype.createOrUpdateSketchPoint_，创建或者更新一个点要素的坐标；
• ol.interaction.Draw.prototype.startDrawing_，获取事件对象的点坐标，根据设置的绘制类型，初始化一些维护坐标数据的私有变量，同时触发 drawstart 事件；
• ol.interaction.Draw.prototype.modifyDrawing_，获取事件的点坐标，利用该坐标，根据绘制要素类型，修改相应要素的第一个坐标（多边形）最后一个（线或圆）坐标；
• ol.interaction.Draw.prototype.addToDrawing_，获取事件对象包含的点坐标，并添加到当前绘制的要素；
• ol.interaction.Draw.prototype.abortDrawing_， 停止绘制，并返回 sketchFeature_ ；
• ol.interaction.Draw.prototype.updateSketchFeatures_，根据不同的情况，将 sketchFeature_ 、sketchLine_ 或 sketchPoint_ 对象 push 到 sketchFeatures 中，然后 在矢量图层中移除所有要素，并重新添加 sketchFeatures 中保存的所有要素，这个函数就像 Windows 系统下的桌面刷新功能差不多；

我们看他的实现就会看得非常明白：

/** * Redraw the sketch features. * @private */
ol.interaction.Draw.prototype.updateSketchFeatures_ = function() {
  var sketchFeatures = [];
  if (this.sketchFeature_) {
    sketchFeatures.push(this.sketchFeature_);
  }
  if (this.sketchLine_) {
    sketchFeatures.push(this.sketchLine_);
  }
  if (this.sketchPoint_) {
    sketchFeatures.push(this.sketchPoint_);
  }
  var overlaySource = this.overlay_.getSource();
  overlaySource.clear(true);
  overlaySource.addFeatures(sketchFeatures);
};

• ol.interaction.Draw.prototype.updateState_，这个辅助函数主要是获取 draw 交互的状态，是 active 还是 deactive，具体实现如下：

/** * @private */
ol.interaction.Draw.prototype.updateState_ = function() {
  var map = this.getMap();
  var active = this.getActive();
  if (!map || !active) {
    this.abortDrawing_();
  }
  this.overlay_.setMap(active ? map : null);
};

纵观所有这些辅助的私有函数，我们可以看到，基本的思路就是根据发生的事件，获取事件对象，获取对象包含的坐标，根据具体情况对以上提到的保存数据的六个私有变量进行修改，来达到目的。

2、公有 API 函数

对外的 API 函数有以下几个，这些对外的公有函数，也无外乎使用辅助的私有函数或者私有变量来完成一些具体的操作。如下，我们一一来进行介绍：

• 2.1 ol.interaction.Draw.handleEvent，处理 ol.MapBrowserEvent，返回一个布尔值，表明是否应该继续或者结束绘制。其定义如下：

/** * Handles the {@link ol.MapBrowserEvent map browser event} and may actually * draw or finish the drawing. * @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event. * @return {boolean} `false` to stop event propagation. * @this {ol.interaction.Draw} * @api */
ol.interaction.Draw.handleEvent = function(mapBrowserEvent) {
  var pass = !this.freehand_;
  if (this.freehand_ &&
      mapBrowserEvent.type === ol.MapBrowserEvent.EventType.POINTERDRAG) {
    this.addToDrawing_(mapBrowserEvent);
    pass = false;
  } else if (mapBrowserEvent.type ===
      ol.MapBrowserEvent.EventType.POINTERMOVE) {
    pass = this.handlePointerMove_(mapBrowserEvent);
  } else if (mapBrowserEvent.type === ol.MapBrowserEvent.EventType.DBLCLICK) {
    pass = false;
  }
  return ol.interaction.Pointer.handleEvent.call(this, mapBrowserEvent) && pass;
};

this.freehand_默认是 false，这里将 pass 赋值为 true。首先检查是否设置了 freehand_ 模式，且检查发生的事件是否是鼠标拖拽事件，如果同时满足两个条件，就将事件对象中包含的坐标添加到当前正在绘制的多边形（因为只有多边形才有 freehand_ 模式），同时将 pass 设置为 false；如果不满足第一个条件，那么检查传来的事件是否是鼠标移动事件，如果是，调用的函数始终返回 true，但是会判断用户是否已经点击了最后一个点（finishCoordinate_），如果点击了，就将事件对象传递给 modifyDrawing_，如果没有定义，那么就将事件对象传递给 createOrUpdateSketchPoint_ ；如果前面两个条件都不满足，那么检查事件是否是鼠标双击事件，那么就将 pass 赋值为 false。

• 2.2 ol.interaction.Draw.createRegularPolygon，该函数返回一个基于 Circle 绘制类型的 geometryFunction 函数（这种函数返回一个 geometry 对象），接受两个参数，分别是 边的数量（opt_sides）和 多边形的角度（opt_angle）。其定义如下：

/** * Create a `geometryFunction` for `mode: 'Circle'` that will create a regular * polygon with a user specified number of sides and start angle instead of an * `ol.geom.Circle` geometry. * @param {number=} opt_sides Number of sides of the regular polygon. Default is * 32. * @param {number=} opt_angle Angle of the first point in radians. 0 means East. * Default is the angle defined by the heading from the center of the * regular polygon to the current pointer position. * @return {ol.interaction.DrawGeometryFunctionType} Function that draws a * polygon. * @api */
ol.interaction.Draw.createRegularPolygon = function(opt_sides, opt_angle) {
  return (
      /** * @param {ol.Coordinate|Array.<ol.Coordinate>|Array.<Array.<ol.Coordinate>>} coordinates * @param {ol.geom.SimpleGeometry=} opt_geometry * @return {ol.geom.SimpleGeometry} */
      function(coordinates, opt_geometry) {
        var center = coordinates[0];
        var end = coordinates[1];
        var radius = Math.sqrt(
            ol.coordinate.squaredDistance(center, end));
        var geometry = opt_geometry ? opt_geometry :
            ol.geom.Polygon.fromCircle(new ol.geom.Circle(center), opt_sides);
        goog.asserts.assertInstanceof(geometry, ol.geom.Polygon,
            'geometry must be a polygon');
        var angle = opt_angle ? opt_angle :
            Math.atan((end[1] - center[1]) / (end[0] - center[0]));
        ol.geom.Polygon.makeRegular(geometry, center, radius, angle);
        return geometry;
      }
  );
};

从上面的定义可以看出，该函数返回的 geometry 是由两个点坐标构成的，分别是 center 和 end，之所以将end 赋值为 coordinate[1]，是因为这是基于使用 Circle 模式为前提的，在这种模式下，只需要单击两次鼠标就可以完成绘制，所以 coordinate 数组中只有两个坐标，由于是 circle 模式，其半径是两点之间的距离；返回的函数中的第二个参数是 绘制的类型，必须是多边形；角度如果没有指定的话，那么就将两个坐标点的连线与水平（也就是东西走向）所成的角度。最后，将这些所需的参数都确定之后，利用这些参数调用了 ol.geom.polygon.makeRegular 函数，这个函数的主要作用是将 polygon 类型修改为一个规则多边形。

上面的解释比较难懂，我们举个例子来说明，我们首先初始化一个矢量图层和一个地图对象，并将该图层添加到地图中：

var vector = new ol.layer.Vector({
   source: new ol.source.Vector()
});

var map = new ol.Map({
    target: 'map',
    layers: [ vector ],
    view: new ol.View({
        center: ol.proj.transform([120.896637,31.381207], 'EPSG:4326', 'EPSG:3857'),
        zoom: 15
    })
});

然后初始化一个 draw interaction，将其绘制模式设置为 Circle，source 设置为矢量图层的 source（vector.getSource( )），geometryFunction 设置为我们这里介绍的函数创建（ol.interaction.Draw.createRegularPolygon(3)），并将其加入到地图中：

var draw = new ol.interaction.Draw({
    type: 'Circle',
    source: vector.getSource(),
    geometryFunction: ol.interaction.Draw.createRegularPolygon(3)
});

map.addInteraction(draw);

然后我们运行这个例子，效果如下：

边数为3（ol.interaction.Draw.createRegularPolygon(3)）

这里我们创建的是三条边的规则多边形（ol.interaction.Draw.createRegularPolygon(3)），自然就是三角形，我们将边数 3 换为 4 或者 5，效果如下：

边数为4（ol.interaction.Draw.createRegularPolygon(4)）

边数为5（ol.interaction.Draw.createRegularPolygon(5)）

如果继续增大边数，绘制的形状会越来越接近圆形。

• 2.3 ol.interaction.Draw.prototype.removeLastPoint，该函数作用是删除正处于绘制的线或者多边形的最后一个点。该函数只作用于正在绘制，且并未完成的要素。其实现源码如下：

/** * Remove last point of the feature currently being drawn. * @api */
ol.interaction.Draw.prototype.removeLastPoint = function() {
  var geometry = this.sketchFeature_.getGeometry();
  goog.asserts.assertInstanceof(geometry, ol.geom.SimpleGeometry,
      'geometry must be an ol.geom.SimpleGeometry');
  var coordinates, sketchLineGeom;
  if (this.mode_ === ol.interaction.DrawMode.LINE_STRING) {
    coordinates = this.sketchCoords_;
    coordinates.splice(-2, 1);
    this.geometryFunction_(coordinates, geometry);
  } else if (this.mode_ === ol.interaction.DrawMode.POLYGON) {
    coordinates = this.sketchCoords_[0];
    coordinates.splice(-2, 1);
    sketchLineGeom = this.sketchLine_.getGeometry();
    goog.asserts.assertInstanceof(sketchLineGeom, ol.geom.LineString,
        'sketchLineGeom must be an ol.geom.LineString');
    sketchLineGeom.setCoordinates(coordinates);
    this.geometryFunction_(this.sketchCoords_, geometry);
  }

  if (coordinates.length === 0) {
    this.finishCoordinate_ = null;
  }

  this.updateSketchFeatures_();
};

在管理绘制的这个类中，sketchFeature_ 是该类的私有变量，保存的是正在绘制的要素（feature）。该函数首先获取当前要素的 geometry 子对象，然后获取当前绘制的坐标数组，删除数组中的倒数第二个点（因为倒数第一个点还没有点定，是当前悬挂的点），然后重新构造 geometry 返回给当前绘制的要素（feature），并更新当前绘制的要素。

同样，我们举例说明该函数的效果。首先我们更改draw 对象的定义：

var draw = new ol.interaction.Draw({
    type: 'Polygon',
    source: vector.getSource(),
    //geometryFunction: ol.interaction.Draw.createRegularPolygon(5)
});

然后我们在地图上添加一个按钮，用于触发该函数，如下：

$('#undo').bind('click', function(){
    draw.removeLastPoint();
});

添加触发该函数的图标按钮

然后我们绘制一个多边形，然后点击按钮，取消绘制的前一个点，效果如下：

正在编辑的要素

点击按钮移除一个点

移除第二个点

移除第三个点

。。。一直到把点全部取消：

移除倒数第二个点

移除最后一个点

该函数可以用作 回退（undo） 操作。

• ol.interaction.Draw.prototype.finishDrawing，该函数用于停止绘制，并将当前勾绘的要素添加到目标图层，在这里是我们上面的例子中的 vector。该函数在将要素添加到目标图层之前，会触发 drawend 事件。其具体实现如下：

/** * Stop drawing and add the sketch feature to the target layer. * The {@link ol.interaction.DrawEventType.DRAWEND} event is dispatched before * inserting the feature. * @api */
ol.interaction.Draw.prototype.finishDrawing = function() {
  var sketchFeature = this.abortDrawing_();
  goog.asserts.assert(!goog.isNull(sketchFeature),
      'sketchFeature should not be null');
  var coordinates = this.sketchCoords_;
  var geometry = sketchFeature.getGeometry();
  goog.asserts.assertInstanceof(geometry, ol.geom.SimpleGeometry,
      'geometry must be an ol.geom.SimpleGeometry');
  if (this.mode_ === ol.interaction.DrawMode.LINE_STRING) {
    // remove the redundant last point
    coordinates.pop();
    this.geometryFunction_(coordinates, geometry);
  } else if (this.mode_ === ol.interaction.DrawMode.POLYGON) {
    // When we finish drawing a polygon on the last point,
    // the last coordinate is duplicated as for LineString
    // we force the replacement by the first point
    coordinates[0].pop();
    coordinates[0].push(coordinates[0][0]);
    this.geometryFunction_(coordinates, geometry);
  }

  // cast multi-part geometries
  if (this.type_ === ol.geom.GeometryType.MULTI_POINT) {
    sketchFeature.setGeometry(new ol.geom.MultiPoint([coordinates]));
  } else if (this.type_ === ol.geom.GeometryType.MULTI_LINE_STRING) {
    sketchFeature.setGeometry(new ol.geom.MultiLineString([coordinates]));
  } else if (this.type_ === ol.geom.GeometryType.MULTI_POLYGON) {
    sketchFeature.setGeometry(new ol.geom.MultiPolygon([coordinates]));
  }

  // First dispatch event to allow full set up of feature
  this.dispatchEvent(new ol.interaction.DrawEvent(
      ol.interaction.DrawEventType.DRAWEND, sketchFeature));

  // Then insert feature
  if (!goog.isNull(this.features_)) {
    this.features_.push(sketchFeature);
  }
  if (!goog.isNull(this.source_)) {
    this.source_.addFeature(sketchFeature);
  }
};

该函数和上面的函数类似，首先获得当前绘制的要素（var sketchFeature = this.abortDrawing_();）、geometry对象和坐标，然后删除最后一个悬挂的点，重新返回新的 geometry，并传给 feature，以完成绘制。同样，我们举例说明，这个例子和上面的例子几乎一模一样，所以不再详述实现，对勾图标对应调用该函数。实现效果如下：

处于绘制的要素

点击完成绘制

完成绘制的要素

• 2.4 ol.interaction.Draw.prototype.extend，该函数将参数所指的要素进行继续编辑绘制，主要用途是对已经绘制好的要素进行再附加点，只对 LineString 类型有效。实现过程就是首先获取参数要素的坐标数组，然后将该坐标数组 push 到当前绘制的数组进行继续绘制。实现方式和前面的函数非常相似，这里不再详述，想详细了解可以看看其 GitHub 的代码。

三、总结

总结一下，不仅仅是这个类，还包括其他的类都是这个思路，总体分为三层：私有变量、私有辅助函数和对外的 API 函数，其功能如下图：

类设计分层图

不仅仅是 OpenLayers 的设计，其他库的设计也大致是这样；不仅仅是 JavaScript ，很多其他的语言的类设计也是这样。其实这就是面向对象的思想的体现 - 封装。

这篇文章中我们深入分析了 ol.interaction.Draw 的实现原理、实现细节，从上面的分析可以看到，大部分实现是依靠几个私有变量记录绘制的数据，并对其做一些操作的。除了这些功能，我们当然可以根据其私有变量 sketchFeature_， sketchCoords_， sketchLine_， sketchLineCoords_ 等，进行定制化的函数开发，做一些定制性的需求或者对其进行扩展。

看完有什么疑问可以对文章进行评论 或者 发邮件我 [email protected]