Add point at head of drawing

examples/draw-features.js

@@ -53,6 +53,19 @@ var vector = new ol.layer.Vector({
             zIndex: 1
           })
         ]
+      }),
+      new ol.style.Rule({
+        filter: 'renderIntent("future")',
+        symbolizers: [
+          new ol.style.Shape({
+            fill: new ol.style.Fill({
+              color: '#0099ff',
+              opacity: 1
+            }),
+            size: 16,
+            zIndex: 1
+          })
+        ]
       })
     ],
     symbolizers: [

src/ol/interaction/drawinteraction.js

@@ -69,6 +69,13 @@ ol.interaction.Draw = function(options) {
    */
   this.sketchFeature_ = null;
 
+  /**
+   * Sketch point.
+   * @type {ol.Feature}
+   * @private
+   */
+  this.sketchPoint_ = null;
+
 };
 goog.inherits(ol.interaction.Draw, ol.interaction.Interaction);
 
@@ -181,20 +188,31 @@ ol.interaction.Draw.prototype.atStart_ = function(event) {
 ol.interaction.Draw.prototype.startDrawing_ = function(event) {
   var start = event.getCoordinate();
   this.startCoordinate_ = start;
-  var feature = new ol.Feature();
+  var sketchFeature = new ol.Feature();
-  feature.setRenderIntent(ol.layer.VectorLayerRenderIntent.SELECTED);
+  sketchFeature.setRenderIntent(ol.layer.VectorLayerRenderIntent.SELECTED);
+  var features = [sketchFeature];
   var geometry;
   if (this.mode_ === ol.interaction.DrawMode.POINT) {
     geometry = new ol.geom.Point(start.slice());
-  } else if (this.mode_ === ol.interaction.DrawMode.LINESTRING) {
+  } else {
+    var sketchPoint = new ol.Feature({
+      geom: new ol.geom.Point(start.slice())
+    });
+    sketchPoint.setRenderIntent(ol.layer.VectorLayerRenderIntent.FUTURE);
+    this.sketchPoint_ = sketchPoint;
+    features.push(sketchPoint);
+
+    if (this.mode_ === ol.interaction.DrawMode.LINESTRING) {
       geometry = new ol.geom.LineString([start.slice(), start.slice()]);
     } else if (this.mode_ === ol.interaction.DrawMode.POLYGON) {
       geometry = new ol.geom.Polygon([[start.slice(), start.slice()]]);
     }
+  }
   goog.asserts.assert(goog.isDef(geometry));
-  feature.setGeometry(geometry);
+  sketchFeature.setGeometry(geometry);
-  this.sketchFeature_ = feature;
+  this.sketchFeature_ = sketchFeature;
-  this.sketchLayer_.addFeatures([feature]);
+
+  this.sketchLayer_.addFeatures(features);
 };
 
 
@@ -212,7 +230,9 @@ ol.interaction.Draw.prototype.modifyDrawing_ = function(event) {
     last[0] = coordinate[0];
     last[1] = coordinate[1];
     geometry.setCoordinates(last);
-  } else if (this.mode_ === ol.interaction.DrawMode.LINESTRING) {
+  } else {
+    this.sketchPoint_.getGeometry().setCoordinates(coordinate);
+    if (this.mode_ === ol.interaction.DrawMode.LINESTRING) {
       coordinates = geometry.getCoordinates();
       last = coordinates[coordinates.length - 1];
       last[0] = coordinate[0];
@@ -226,6 +246,7 @@ ol.interaction.Draw.prototype.modifyDrawing_ = function(event) {
       last[1] = coordinate[1];
       ring.setCoordinates(coordinates);
     }
+  }
 };
 
 
@@ -258,10 +279,14 @@ ol.interaction.Draw.prototype.addToDrawing_ = function(event) {
  */
 ol.interaction.Draw.prototype.finishDrawing_ = function(event) {
   this.startCoordinate_ = null;
-  var feature = this.sketchFeature_;
+  var sketchFeature = this.sketchFeature_;
-  this.sketchLayer_.removeFeatures([feature]);
+  var features = [sketchFeature];
-  feature.setRenderIntent(ol.layer.VectorLayerRenderIntent.DEFAULT);
+  if (this.mode_ !== ol.interaction.DrawMode.POINT) {
-  this.layer_.addFeatures([feature]);
+    features.push(this.sketchPoint_);
+  }
+  this.sketchLayer_.removeFeatures(features);
+  sketchFeature.setRenderIntent(ol.layer.VectorLayerRenderIntent.DEFAULT);
+  this.layer_.addFeatures([sketchFeature]);
 };