[OpenLayers-Commits] r10853 - in sandbox/sonxurxo/editfeature: examples theme/default/img

commits-20090109 at openlayers.org commits-20090109 at openlayers.org
Thu Oct 21 04:29:55 EDT 2010


Author: sonxurxo
Date: 2010-10-21 01:29:55 -0700 (Thu, 21 Oct 2010)
New Revision: 10853

Added:
   sandbox/sonxurxo/editfeature/examples/edit-feature.html
   sandbox/sonxurxo/editfeature/theme/default/img/delete_off.png
   sandbox/sonxurxo/editfeature/theme/default/img/delete_on.png
Log:
First Commit

Added: sandbox/sonxurxo/editfeature/examples/edit-feature.html
===================================================================
--- sandbox/sonxurxo/editfeature/examples/edit-feature.html	                        (rev 0)
+++ sandbox/sonxurxo/editfeature/examples/edit-feature.html	2010-10-21 08:29:55 UTC (rev 10853)
@@ -0,0 +1,273 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <style type="text/css">
+            body {
+                font-family: "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
+                font-size: 80%;
+                color: #222;
+                background: #fff;
+                margin: 1em 1.5em;
+            }
+            h1 {
+                color: #003a6b;
+                background-color: transparent;
+                font: 100% 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
+                margin: 0;
+                padding-top: 0.5em;
+                font-size: 130%;
+                margin-bottom: 0.5em;
+                border-bottom: 1px solid #fcb100;
+            }
+            #the_map {
+                width: 600px;
+                height: 400px;
+                clear: left;
+                float: left;
+            }
+            #confirmationMessage {
+                color: green;
+                width: 400px;
+                clear:right;
+                float:left;
+                margin-left: 20px;
+            }
+            
+            #explanation {
+                clear: both;
+                float: left;
+                margin-top: 20px;
+            }
+            .olControlNavToolbar div {
+                display:block;
+                width:  28px;
+                height: 28px;
+                top: 300px;
+                left: 6px;
+                position: relative;
+            }            
+            .olControlEditingToolbar .olControlDrawItemActive {
+                background-image: url("../theme/default/img/draw_point_on.png");
+                background-repeat: no-repeat;
+            }
+            .olControlEditingToolbar .olControlDrawItemInactive {
+                background-image: url("../theme/default/img/draw_point_off.png");
+                background-repeat: no-repeat;
+            }
+            .olControlEditingToolbar .olControlModifyItemActive {
+                background-image: url("../theme/default/img/draw_polygon_on.png");
+                background-repeat: no-repeat;
+            }
+            .olControlEditingToolbar .olControlModifyItemInactive {
+                background-image: url("../theme/default/img/draw_polygon_off.png");
+                background-repeat: no-repeat;
+            }
+            .olControlEditingToolbar .olControlDeleteItemActive {
+                background-image: url("../theme/default/img/delete_on.png");
+                background-repeat: no-repeat;
+            }
+            .olControlEditingToolbar .olControlDeleteItemInactive {
+                background-image: url("../theme/default/img/delete_off.png");
+                background-repeat: no-repeat;
+            }
+            .olControlEditingToolbar .olControlCancelItemActive {
+                background-image: url("../theme/default/img/move_feature_on.png");
+                background-repeat: no-repeat;
+            }
+            .olControlLoadingPanel {
+                background-image:url(../theme/default/img/loading.gif);
+                margin-left: 30%;
+                margin-top: 50%;
+                position: relative;
+                width: 195px;
+                height: 11px;
+                background-position:center;
+                background-repeat:no-repeat;
+                display: none;
+            }
+	</style>
+        <script type="text/javascript" src="../lib/OpenLayers.js"></script>
+        <script>
+            var map;
+            
+            OpenLayers.Control.DrawFeatureOpt = OpenLayers.Class(OpenLayers.Control.DrawFeature, {
+                handlers: null,
+                initialize: function(layer, handler, options) {
+                    OpenLayers.Control.DrawFeature.prototype.initialize.apply(this, [layer, handler, options]);
+                    // configure the keyboard handler
+                    var keyboardOptions = {
+                        keydown: this.handleKeypress
+                    };
+                    this.handlers = {
+                        keyboard: new OpenLayers.Handler.Keyboard(this, keyboardOptions)
+                    };
+                },
+                handleKeypress: function(evt) {
+                    var code = evt.keyCode;
+                    if (this.handler.drawing) {
+                        if (code === 27) {
+                            var index = this.handler.line.geometry.components.length -2;
+                            this.handler.line.geometry.removeComponent(this.handler.line.geometry.components[index]);
+                            this.handler.drawFeature();
+                            this.handler.finalize();
+                        }
+                        if (code === 46) {
+                            var index = this.handler.line.geometry.components.length - 3;        
+                            this.handler.line.geometry.removeComponent(this.handler.line.geometry.components[index]);
+                            this.handler.drawFeature();
+                        }
+                    }
+                    return true;
+                },
+                activate: function() {
+                    return this.handlers.keyboard.activate() &&
+                        OpenLayers.Control.DrawFeature.prototype.activate.apply(this, arguments);
+                },
+                deactivate: function() {
+                    var deactivated = false;
+                    // the return from the controls is unimportant in this case
+                    if(OpenLayers.Control.DrawFeature.prototype.deactivate.apply(this, arguments)) {
+                        this.handlers.keyboard.deactivate();
+                        deactivated = true;
+                    }
+                    return deactivated;
+                },
+                
+                CLASS_NAME: "OpenLayers.Control.DrawFeatureOpt"
+            });
+            //OpenLayers.ProxyHost= "/cgi-bin/proxy.cgi?url=";
+            OpenLayers.ProxyHost = "proxy.cgi?url=";
+
+            function init() {
+                map = new OpenLayers.Map("the_map", {
+                });
+                
+                var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
+                        "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
+
+                /*
+                 * Layer that point to the WFS-T service. It will not load any features from the
+                 * remote WFS server by itself, the GetFeature control will do that and place features
+                 * (actually only one) in this layer. We set the WFS protocol just to be able to 
+                 * save the modified feature through WFS-T
+                 */
+                var wfs = new OpenLayers.Layer.Vector("WFS");
+                    
+                map.addLayers([wms, wfs]);
+
+                var drawControl = new OpenLayers.Control.DrawFeatureOpt(
+                    wfs, 
+                    OpenLayers.Handler.Polygon,
+                    { 
+                        title: "Draw",
+                        displayClass: "olControlDraw"
+                    }
+                );
+                
+                drawControl.events.register("activate", this, function() {
+                    modifyFeatureControl.deactivate();
+                });
+                
+                drawControl.events.register("featureadded", this, function(e) {
+                    modifyFeatureControl.selectFeature(e.feature);
+                    modifyFeatureControl.selectControl.select(e.feature);
+                    modifyFeatureControl.activate();
+                    drawControl.deactivate();
+                });
+                
+                var modifyFeatureControl = new OpenLayers.Control.ModifyFeature(wfs, {
+                    clickout: false,
+                    toggle: false,
+                    deleteCodes: [46, 68, 27],
+                    title: "Modify",
+                    displayClass: "olControlModify"
+                });
+                
+                var deleteFeatureControl = new OpenLayers.Control.SelectFeature(wfs, {
+                    clickout: false,
+                    toggle: false,
+                    title: "Delete",
+                    displayClass: "olControlDelete"
+                });
+                
+                deleteFeatureControl.events.register("featurehighlighted", this, function(e) {
+                    if (confirm('Are you sure you want to delete this feature?')) {
+                        wfs.removeFeatures([e.feature]);
+                        deleteFeatureControl.deactivate();
+                    } else {
+                        deleteFeatureControl.unselect(e.feature);
+                    }
+                });
+                /*
+                 * Controls
+                 */
+                var panel = new OpenLayers.Control.Panel({
+                    displayClass: 'olControlEditingToolbar'
+                });
+                
+                /*
+                 * Only the getFeature control is visible at first.
+                 */
+                panel.addControls([drawControl, modifyFeatureControl, deleteFeatureControl]);
+                
+                map.addControls([
+                    panel, modifyFeatureControl
+                ]);
+                
+                map.setCenter(new OpenLayers.LonLat(-8, 43), 7);
+                
+                /*****************************
+                 * Helper functions
+                 *****************************/
+                /*
+                 * Sets a temporary message in a div with id 'confirmationMessage'
+                 */
+                var setTemporaryMessage = function(message, time) {
+                    document.getElementById("confirmationMessage").innerHTML = message;
+                    setTimeout("document.getElementById('confirmationMessage').innerHTML = ''", time);
+                }
+                /*
+                 * Sets the controls 'save' and 'cancel' in the panel, removing 
+                 * 'getFeatureControlToModify' and 'getFeatureControlToDelete' ones
+                 */
+                var setModifyingPanel = function() {
+                    OpenLayers.Util.removeItem(panel.controls, saveControl);
+                    OpenLayers.Util.removeItem(panel.controls, cancelControl);
+                    panel.addControls([getFeatureControlToModify, getFeatureControlToDelete]);
+                    panel.redraw();
+                }
+                /*
+                 * Sets the 'getFeatureControlToModify' and 'getFeatureControlToDelete' in the panel,
+                 * removing 'save' and 'cancel' ones
+                 */
+                var setInitPanel = function() {
+                    OpenLayers.Util.removeItem(panel.controls, getFeatureControlToModify);
+                    OpenLayers.Util.removeItem(panel.controls, getFeatureControlToDelete);
+                    panel.addControls([saveControl, cancelControl]);
+                }
+            }
+
+        </script>
+    </head>
+<body onload="init()">
+    <h1>
+       Edit feature example
+    </h1>
+    <div id="the_map">
+    </div>
+    <div id="explanation">
+        This example lets the user to draw, modify and delete features. When drawing, it works as the normal
+        DrawFeature control in OpenLayers, with two differences:
+        <ul>
+            <li>
+                If you press the <b>"DELETE"</b> key, the last added vertix will be removed.
+            </li>
+            <li>
+                If you press the <b>"ESCAPE"</b> key, the drawing will finish and the feature will be 
+                selected to modify. This allows the user to finish the drawing of the feature even 
+                if he forgets to double-click when adding the last point.
+            </li>
+        </ul>
+    </div>
+</body>
+
+</html>

Added: sandbox/sonxurxo/editfeature/theme/default/img/delete_off.png
===================================================================
(Binary files differ)


Property changes on: sandbox/sonxurxo/editfeature/theme/default/img/delete_off.png
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

Added: sandbox/sonxurxo/editfeature/theme/default/img/delete_on.png
===================================================================
(Binary files differ)


Property changes on: sandbox/sonxurxo/editfeature/theme/default/img/delete_on.png
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream



More information about the Commits mailing list