[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