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 {
-    geometry = new ol.geom.LineString([start.slice(), start.slice()]);
+    var sketchPoint = new ol.Feature({
-  } else if (this.mode_ === ol.interaction.DrawMode.POLYGON) {
+      geom: new ol.geom.Point(start.slice())
-    geometry = new ol.geom.Polygon([[start.slice(), 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,19 +230,22 @@ 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 {
-    coordinates = geometry.getCoordinates();
+    this.sketchPoint_.getGeometry().setCoordinates(coordinate);
-    last = coordinates[coordinates.length - 1];
+    if (this.mode_ === ol.interaction.DrawMode.LINESTRING) {
-    last[0] = coordinate[0];
+      coordinates = geometry.getCoordinates();
-    last[1] = coordinate[1];
+      last = coordinates[coordinates.length - 1];
-    geometry.setCoordinates(coordinates);
+      last[0] = coordinate[0];
-  } else if (this.mode_ === ol.interaction.DrawMode.POLYGON) {
+      last[1] = coordinate[1];
-    var ring = geometry.getRings()[0];
+      geometry.setCoordinates(coordinates);
-    coordinates = ring.getCoordinates();
+    } else if (this.mode_ === ol.interaction.DrawMode.POLYGON) {
-    last = coordinates[coordinates.length - 1];
+      var ring = geometry.getRings()[0];
-    last[0] = coordinate[0];
+      coordinates = ring.getCoordinates();
-    last[1] = coordinate[1];
+      last = coordinates[coordinates.length - 1];
-    ring.setCoordinates(coordinates);
+      last[0] = coordinate[0];
+      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]);
 };