Merge pull request #3673 from ahocevar/draw-regular-polygon

More control over ol.interaction.Draw, to allow e.g. square drawing

examples/draw-features.html

@@ -6,7 +6,10 @@ docs: >
   Example of using the Draw interaction. Select a geometry type from the
   dropdown above to start drawing. To finish drawing, click the last
   point. To activate freehand drawing for lines and polygons, hold the `Shift`
-  key.
+  key. Square drawing is achieved by using Circle mode with a `geometryFunction`
+  that creates a 4-sided regular polygon instead of a circle. Box drawing uses a
+  custom `geometryFunction` that takes start and end point of a line with 2
+  points and creates a rectangular box.
 tags: "draw, edit, freehand, vector"
 ---
 <div class="row-fluid">
@@ -20,6 +23,8 @@ tags: "draw, edit, freehand, vector"
         <option value="LineString">LineString</option>
         <option value="Polygon">Polygon</option>
         <option value="Circle">Circle</option>
+        <option value="Square">Square</option>
+        <option value="Box">Box</option>
       </select>
     </form>
   </div>

examples/draw-features.js

@@ -1,5 +1,6 @@
 goog.require('ol.Map');
 goog.require('ol.View');
+goog.require('ol.geom.Polygon');
 goog.require('ol.interaction.Draw');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
@@ -51,9 +52,30 @@ var draw; // global so we can remove it later
 function addInteraction() {
   var value = typeSelect.value;
   if (value !== 'None') {
+    var geometryFunction, maxPoints;
+    if (value === 'Square') {
+      value = 'Circle';
+      geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
+    } else if (value === 'Box') {
+      value = 'LineString';
+      maxPoints = 2;
+      geometryFunction = function(coordinates, geometry) {
+        if (!geometry) {
+          geometry = new ol.geom.Polygon(null);
+        }
+        var start = coordinates[0];
+        var end = coordinates[1];
+        geometry.setCoordinates([
+          [start, [start[0], end[1]], end, [end[0], start[1]], start]
+        ]);
+        return geometry;
+      };
+    }
     draw = new ol.interaction.Draw({
       source: source,
-      type: /** @type {ol.geom.GeometryType} */ (value)
+      type: /** @type {ol.geom.GeometryType} */ (value),
+      geometryFunction: geometryFunction,
+      maxPoints: maxPoints
     });
     map.addInteraction(draw);
   }