[OpenLayers-Commits] r12042 - in sandbox/tschaub/editing: examples lib/OpenLayers/Handler

commits-20090109 at openlayers.org commits-20090109 at openlayers.org
Sun Jun 5 19:17:10 EDT 2011


Author: tschaub
Date: 2011-06-05 16:17:09 -0700 (Sun, 05 Jun 2011)
New Revision: 12042

Added:
   sandbox/tschaub/editing/examples/editing-methods.html
   sandbox/tschaub/editing/examples/editing-methods.js
Modified:
   sandbox/tschaub/editing/lib/OpenLayers/Handler/Path.js
Log:
Adding editing methods example.

Added: sandbox/tschaub/editing/examples/editing-methods.html
===================================================================
--- sandbox/tschaub/editing/examples/editing-methods.html	                        (rev 0)
+++ sandbox/tschaub/editing/examples/editing-methods.html	2011-06-05 23:17:09 UTC (rev 12042)
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>OpenLayers Editing Methods</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
+        <script src="../lib/OpenLayers.js"></script>
+        <style>
+            .olControlAttribution {
+                font-size: 9px;
+                bottom: 5px;
+            }
+        </style>
+    </head>
+    <body>
+        <h1 id="title">Editing Methods</h1>
+        <p id="shortdesc">
+            Demonstrates the use of editing methods for manipulating geometries 
+            while drawing.
+        </p>
+        <div id="map" class="smallmap"></div>
+        <ul id="methods">
+            <li><a href="#" id="insertXY">insert x,y</a></li>
+            <li><a href="#" id="insertDeltaXY">insert dx,dy</a></li>
+            <li><a href="#" id="insertDirectionLength">insert direction/length</a></li>
+            <li><a href="#" id="insertDeflectionLength">insert deflection/length</a></li>            
+            <li><a href="#" id="finishSketch">finish sketch</a></li>
+        </ul>
+
+        <div id="docs">
+            <p>
+                The <code>control.insertXY</code> method inserts a point at the given
+                map coordinates (x, y) immediately prior to the most recent point
+                (under the mouse).  
+                The <code>control.insertDeltaXY</code> method inserts a point at 
+                the given offset values (dx, dy) from the previously added point.
+                The <code>control.insertDirectionLength</code> method inserts a 
+                point at offset direction and length from the previously added point.
+                Direction is measured counter-clockwise from the positive x-axis.
+                The <code>control.insertDeflectionLength</code> method inserts a 
+                point at offset deflection and length from the previously added point.
+                Deflection is measured counter-clockwise from the previous line 
+                segment.
+                The <code>control.finishSketch</code> method completes the current
+                sketch without adding the point under the user's mouse.  This 
+                allows a sketch to be finished without a double-click.
+                The <code>control.insertXY</code> method may be called before 
+                any points are digitized manually.  The other methods have no 
+                effect until at least one point has been added to the sketch.
+            </p><p>
+                View the <a href="editing-methods.js" target="_blank">editing-methods.js</a>
+                source to see how this is done.
+            </p>
+        </div>
+        
+        <script src="editing-methods.js"></script>
+        
+        
+        
+    </body>
+</html>

Added: sandbox/tschaub/editing/examples/editing-methods.js
===================================================================
--- sandbox/tschaub/editing/examples/editing-methods.js	                        (rev 0)
+++ sandbox/tschaub/editing/examples/editing-methods.js	2011-06-05 23:17:09 UTC (rev 12042)
@@ -0,0 +1,80 @@
+var map = new OpenLayers.Map({
+    div: "map",
+    layers: [
+        new OpenLayers.Layer.WMS(
+            "Global Imagery",
+            "http://maps.opengeo.org/geowebcache/service/wms",
+            {layers: "bluemarble"},
+            {tileOrigin: new OpenLayers.LonLat(-180, -90)}
+        ),
+        new OpenLayers.Layer.Vector()
+    ],
+    center: new OpenLayers.LonLat(0, 0),
+    zoom: 1
+});
+
+var draw = new OpenLayers.Control.DrawFeature(
+    map.layers[1], OpenLayers.Handler.Path
+);
+map.addControl(draw);
+draw.activate();
+
+// handle clicks on method links
+$("insertXY").onclick = function() {
+    var values = parseInput(
+        window.prompt(
+            "Enter map coordinates for new point (e.g. '-111, 46')", "x, y"
+        )
+    );
+    if (values != null) {
+        draw.insertXY(values[0], values[1]);
+    }
+}
+$("insertDeltaXY").onclick = function() {
+    var values = parseInput(
+        window.prompt(
+            "Enter offset values for new point (e.g. '15, -10')", "dx, dy"
+        )
+    );
+    if (values != null) {
+        draw.insertDeltaXY(values[0], values[1]);
+    }
+}
+$("insertDirectionLength").onclick = function() {
+    var values = parseInput(
+        window.prompt(
+            "Enter direction and length offset values for new point (e.g. '-45, 10')", "direction, length"
+        )
+    );
+    if (values != null) {
+        draw.insertDirectionLength(values[0], values[1]);
+    }
+}
+$("insertDeflectionLength").onclick = function() {
+    var values = parseInput(
+        window.prompt(
+            "Enter deflection and length offset values for new point (e.g. '15, 20')", "deflection, length"
+        )
+    );
+    if (values != null) {
+        draw.insertDeflectionLength(values[0], values[1]);
+    }
+}
+$("finishSketch").onclick = function() {
+    draw.finishSketch();
+}
+
+function parseInput(text) {
+    var values = text.split(",");
+    if (values.length !== 2) {
+        values = null;
+    } else {
+        values[0] = parseFloat(values[0]);
+        values[1] = parseFloat(values[1]);
+        if (isNaN(values[0]) || isNaN(values[1])) {
+            window.alert("The two values must be numeric.");
+            values = null;
+        }
+    }
+    return values;
+}
\ No newline at end of file

Modified: sandbox/tschaub/editing/lib/OpenLayers/Handler/Path.js
===================================================================
--- sandbox/tschaub/editing/lib/OpenLayers/Handler/Path.js	2011-06-05 22:09:02 UTC (rev 12041)
+++ sandbox/tschaub/editing/lib/OpenLayers/Handler/Path.js	2011-06-05 23:17:09 UTC (rev 12042)
@@ -207,7 +207,9 @@
     insertDeltaXY: function(dx, dy) {
         var previousIndex = this.getCurrentPointIndex() - 1;
         var p0 = this.line.geometry.components[previousIndex];
-        this.insertXY(p0.x + dx, p0.y + dy);
+        if (p0 && !isNaN(p0.x) && !isNaN(p0.y)) {
+            this.insertXY(p0.x + dx, p0.y + dy);
+        }
     },
 
     /**



More information about the Commits mailing list