Adding interior ring digitizing for polygons. Thanks jachym for the initial work. r=ahocevar (closes #1894)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@10828 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2010-10-13 22:12:52 +00:00
parent ba21865e28
commit 1397f816b5
4 changed files with 432 additions and 3 deletions
--- a/examples/donut.html
+++ b/examples/donut.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>OpenLayers Polygon Hole Digitizing</title>
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
+        <style>
+            #controlToggle li {
+                list-style: none;
+            }
+            .olControlAttribution {
+                font-size: 9px;
+                bottom: 2px;
+            }
+            #output {
+                margin: 1em;
+                font-size: 0.9em;
+            }
+        </style>
+    </head>
+    <body>
+        <h1 id="title">Drawing Holes in Polygons</h1>
+        <div id="tags">
+            draw polygon hole
+        </div>         
+        <p id="shortdesc">
+            The DrawFeature control can be used to digitize donut polygons.
+        </p>
+        
+        <div id="map" class="smallmap"></div>
+        <ul id="controlToggle">
+            <li>
+                <input type="radio" name="type" value="none" id="noneToggle"
+                       onclick="toggleControl(this);" checked="checked">
+                <label for="noneToggle">navigate</label>
+            </li>
+            <li>
+                <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);">
+                <label for="polygonToggle">draw polygon</label>
+            </li>
+        </ul>
+        <div id="output"></div>
+        <div id="docs">
+            <p>
+                To digitize holes in polygons, hold down the <code>Alt</code> 
+                key and draw over an existing polygon.  By default, the 
+                <code>Shift</code> key triggers freehand drawing.  Use a 
+                combination of the <code>Shift</code> and <code>Alt</code> keys
+                to digitize holes in freehand mode.
+            </p>
+            <p>
+                See the <a href="donut.js" target="_blank">
+                donut.js source</a> for details on how this is done.
+            </p>
+        </div>
+        <script src="../lib/OpenLayers.js"></script>
+        <script src="donut.js"></script>
+    </body>
+</html>
--- a/examples/donut.js
+++ b/examples/donut.js
@@ -0,0 +1,38 @@
+var map = new OpenLayers.Map({
+    div: "map",
+    layers: [
+        new OpenLayers.Layer.OSM(),
+        new OpenLayers.Layer.Vector()
+    ],
+    center: new OpenLayers.LonLat(0, 0),
+    zoom: 1
+});
+
+var draw = new OpenLayers.Control.DrawFeature(
+    map.layers[1],
+    OpenLayers.Handler.Polygon,
+    {handlerOptions: {holeModifier: "altKey"}}
+);
+map.addControl(draw);
+
+// optionally listen for sketch events on the layer
+var output = document.getElementById("output");
+function updateOutput(event) {
+    window.setTimeout(function() {
+        output.innerHTML = event.type + " " + event.feature.id;
+    }, 100);
+}
+map.layers[1].events.on({
+    sketchmodified: updateOutput,
+    sketchcomplete: updateOutput
+})
+
+// add behavior to UI elements
+function toggleControl(element) {
+    if (element.value === "polygon" && element.checked) {
+        draw.activate();
+    } else {
+        draw.deactivate();
+    }
+}
+document.getElementById("noneToggle").checked = true;