[OpenLayers-Users] Rectangle (box-like) drawing tool?

[Frédéric Junod]

This is my vector version.

The patch is working with the last svn version.

Hope that's help,
Regards,

fredj

Le Wed, 4 Apr 2007 12:46:36 -0700 (PDT),
Mike Quentel <mikequentel at yahoo.com> a écrit :

> Has anyone implemented a rectangle drawing tool?  As in something
> that draws polygons like the sandbox examples, but restricts mouse
> movements so that only rectangles are drawn?  I see there is an
> OpenLayers.Handler.Box class and an OpenLayers.Handler.Polygon
> class.  I want to have a rectangle drawing tool, so I'm thinking I'd
> want to inherit from Polygon and/or Box.  Has anyone already
> implemented such a class?  Would be nice to not "re-invent the
> wheel".  I searched the API and the Nabble archives (thank you so
> much for this very useful resource).  Any advice on how to make a
> rectangle drawing tool appreciated.  Thank you.
> 
> Mike Quentel
>
-- 
Frédéric Junod
Camptocamp SA
-------------- next part --------------
Index: lib/OpenLayers/Handler/Rectangle.js
===================================================================
--- lib/OpenLayers/Handler/Rectangle.js	(révision 0)
+++ lib/OpenLayers/Handler/Rectangle.js	(révision 0)
@@ -0,0 +1,86 @@
+/* Copyright (c) 2006 MetaCarta, Inc., published under a modified BSD license.
+ * See http://svn.openlayers.org/trunk/openlayers/repository-license.txt 
+ * for the full text of the license. */
+
+
+/**
+ * Handler to draw a rectangle on the map. Rectangle is displayed on mouse down,
+ * moves on mouse move, and is finished on mouse up.
+ * 
+ * @class
+ * @requires OpenLayers/Handler/Polygon.js
+ */
+OpenLayers.Handler.Rectangle = OpenLayers.Class.create();
+OpenLayers.Handler.Rectangle.prototype = 
+  OpenLayers.Class.inherit(OpenLayers.Handler.Polygon, {
+
+    /**
+     * Handle mouse move.  Adjust the geometry and redraw.
+     * Return determines whether to propagate the event on the map.
+     * 
+     * @param {Event} evt
+     * @type Boolean
+     */
+    mousemove: function(evt) {
+        if (this.drawing) {
+            var lonlat = this.map.getLonLatFromPixel(evt.xy);
+            this.point.x = lonlat.lon;
+            this.point.y = lonlat.lat;
+
+            this.line.components[1].x = lonlat.lon;
+            this.line.components[2] = this.point.clone();
+            this.line.components[3].y = lonlat.lat;
+            
+            this.drawGeometry();
+        }
+        return false;
+    },
+
+    /**
+     * Handle mouse up. Finalize the geometry.
+     * Return determines whether to propagate the event on the map.
+     * 
+     * @param {Event} evt
+     * @type Boolean
+     */
+    mouseup: function (evt) {
+        if (this.drawing) {
+            this.drawing = false;
+            this.finalize();
+        }
+        return false;
+    },
+
+    /**
+     * Handle mouse down. Create the geometry.
+     * Return determines whether to propagate the event on the map.
+     * 
+     * @param {Event} evt
+     * @type Boolean
+     */
+    mousedown: function(evt) {
+        // ignore double-clicks
+        if (this.lastDown && this.lastDown.equals(evt.xy)) {
+            return false;
+        }
+        this.lastDown = evt.xy;
+        this.drawing = true;
+
+        this.createGeometry();
+
+        var lonlat = this.control.map.getLonLatFromPixel(evt.xy);
+        this.point.x = lonlat.lon;
+        this.point.y = lonlat.lat;
+
+        // add the 4 points
+        this.line.addComponent(this.point.clone(), -1);
+        this.line.addComponent(this.point.clone(), -1);
+        this.line.addComponent(this.point.clone(), -1);
+
+        return false;
+    },
+
+
+    /** @final @type String */
+    CLASS_NAME: "OpenLayers.Handler.Rectangle"
+});
Index: lib/OpenLayers.js
===================================================================
--- lib/OpenLayers.js	(révision 3008)
+++ lib/OpenLayers.js	(copie de travail)
@@ -100,6 +100,7 @@
         "OpenLayers/Handler/Feature.js",
         "OpenLayers/Handler/Drag.js",
         "OpenLayers/Handler/Box.js",
+        "OpenLayers/Handler/Rectangle.js",
         "OpenLayers/Handler/MouseWheel.js",
         "OpenLayers/Handler/Keyboard.js",
         "OpenLayers/Control.js",