openlayers/examples/wfs-protocol-transactions.html

   1 <html>
   2   <head>
   3     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   4     <link rel="stylesheet" href="style.css" type="text/css" />
   5     <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
   6     <script src="../lib/OpenLayers.js"></script>
   7     <style>
   8         .customEditingToolbar {
   9             float: right;
  10             right: 0px;
  11             height: 30px;
  12             width: 200px;
  13         }
  14         .customEditingToolbar div {
  15             float: right;
  16             margin: 5px;
  17             width: 24px;
  18             height: 24px;
  19         }
  20         .olControlNavigationItemActive {
  21             background-image: url("../theme/default/img/editing_tool_bar.png");
  22             background-repeat: no-repeat;
  23             background-position: -103px -23px;
  24         }
  25         .olControlNavigationItemInactive {
  26             background-image: url("../theme/default/img/editing_tool_bar.png");
  27             background-repeat: no-repeat;
  28             background-position: -103px -0px;
  29         }
  30         .olControlDrawFeaturePolygonItemInactive {
  31             background-image: url("../theme/default/img/editing_tool_bar.png");
  32             background-repeat: no-repeat;
  33             background-position: -26px 0px;
  34         }
  35         .olControlDrawFeaturePolygonItemActive {
  36             background-image: url("../theme/default/img/editing_tool_bar.png");
  37             background-repeat: no-repeat;
  38             background-position: -26px -23px ;
  39         }
  40         .olControlModifyFeatureItemActive {
  41             background-image: url(../theme/default/img/move_feature_on.png);
  42             background-repeat: no-repeat;
  43             background-position: 0px 1px;
  44         }
  45         .olControlModifyFeatureItemInactive {
  46             background-image: url(../theme/default/img/move_feature_off.png);
  47             background-repeat: no-repeat;
  48             background-position: 0px 1px;
  49         }
  50         .olControlDeleteFeatureItemActive {
  51             background-image: url(../theme/default/img/remove_point_on.png);
  52             background-repeat: no-repeat;
  53             background-position: 0px 1px;
  54         }
  55         .olControlDeleteFeatureItemInactive {
  56             background-image: url(../theme/default/img/remove_point_off.png);
  57             background-repeat: no-repeat;
  58             background-position: 0px 1px;
  59         }
  60     </style>
  61     <script type="text/javascript">
  62         var map, wfs;
  63
  64         var DeleteFeature = OpenLayers.Class(OpenLayers.Control, {
  65             initialize: function(layer, options) {
  66                 OpenLayers.Control.prototype.initialize.apply(this, [options]);
  67                 this.layer = layer;
  68                 this.handler = new OpenLayers.Handler.Feature(
  69                     this, layer, {click: this.clickFeature}
  70                 );
  71             },
  72             clickFeature: function(feature) {
  73                 // if feature doesn't have a fid, destroy it
  74                 if(feature.fid == undefined) {
  75                     this.layer.destroyFeatures([feature]);
  76                 } else {
  77                     feature.state = OpenLayers.State.DELETE;
  78                     this.layer.events.triggerEvent("afterfeaturemodified",
  79                                                    {feature: feature});
  80                     feature.renderIntent = "select";
  81                     this.layer.drawFeature(feature);
  82                 }
  83             },
  84             setMap: function(map) {
  85                 this.handler.setMap(map);
  86                 OpenLayers.Control.prototype.setMap.apply(this, arguments);
  87             },
  88             CLASS_NAME: "OpenLayers.Control.DeleteFeature"
  89         });
  90
  91         function init() {
  92             OpenLayers.ProxyHost= "proxy.cgi?url=";
  93             map = new OpenLayers.Map('map', {
  94                 projection: new OpenLayers.Projection("EPSG:900913"),
  95                 displayProjection: new OpenLayers.Projection("EPSG:4326"),
  96                 units: "m",
  97                 maxResolution: 156543.0339,
  98                 maxExtent: new OpenLayers.Bounds(
  99                     -11593508, 5509847, -11505759, 5557774
 100                 ),
 101                 controls: [
 102                     new OpenLayers.Control.PanZoom()
 103                 ]
 104             });
 105             var gphy = new OpenLayers.Layer.Google(
 106                 "Google Physical",
 107                 {type: G_PHYSICAL_MAP, sphericalMercator: true}
 108             );
 109
 110             var saveStrategy = new OpenLayers.Strategy.Save();
 111
 112             wfs = new OpenLayers.Layer.Vector("Editable Features", {
 113                 strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy],
 114                 projection: new OpenLayers.Projection("EPSG:4326"),
 115                 protocol: new OpenLayers.Protocol.WFS({
 116                     version: "1.1.0",
 117                     srsName: "EPSG:4326",
 118                     url: "http://demo.opengeo.org/geoserver/wfs",
 119                     featureNS :  "http://opengeo.org",
 120                     featureType: "restricted",
 121                     geometryName: "the_geom",
 122                     schema: "http://demo.opengeo.org/geoserver/wfs/DescribeFeatureType?version=1.1.0&typename=og:restricted"
 123                 })
 124             });
 125
 126             map.addLayers([gphy, wfs]);
 127
 128             var panel = new OpenLayers.Control.Panel(
 129                 {'displayClass': 'customEditingToolbar'}
 130             );
 131
 132             var navigate = new OpenLayers.Control.Navigation({
 133                 title: "Pan Map",
 134             });
 135
 136             var draw = new OpenLayers.Control.DrawFeature(
 137                 wfs, OpenLayers.Handler.Polygon,
 138                 {
 139                     title: "Draw Feature",
 140                     displayClass: "olControlDrawFeaturePolygon",
 141                     handlerOptions: {multi: true}
 142                 }
 143             );
 144
 145             var edit = new OpenLayers.Control.ModifyFeature(wfs, {
 146                 title: "Modify Feature",
 147                 displayClass: "olControlModifyFeature",
 148             });
 149
 150             var del = new DeleteFeature(wfs, {title: "Delete Feature"});
 151
 152             var save = new OpenLayers.Control.Button({
 153                 title: "Save Changes",
 154                 trigger: function() {
 155                     if(edit.feature) {
 156                         edit.selectControl.unselectAll();
 157                     }
 158                     saveStrategy.save();
 159                 },
 160                 displayClass: "olControlSaveFeatures"
 161             });
 162
 163             panel.addControls([navigate, save, del, edit, draw]);
 164             panel.defaultControl = navigate;
 165             map.addControl(panel);
 166             map.zoomToMaxExtent();
 167         }
 168
 169     </script>
 170     </head>
 171     <body onload="init()">
 172
 173     <h1 id="title">WFS Transaction Example</h1>
 174
 175     <div id="tags">
 176     </div>
 177     <p id="shortdesc">
 178         Shows the use of the WFS Transactions (WFS-T).
 179     </p>
 180
 181     <div id="map" class="smallmap"></div>
 182
 183     <div id="docs">
 184         <p>The WFS protocol allows for creation of new features and reading,
 185         updating, or deleting of existing features.</p>
 186         <p>Use the tools to create, modify, and delete (in order from left
 187         to right) features.  Use the save tool (picture of a disk) to
 188         save your changes.  Use the navigation tool (hand) to stop editing
 189         and use the mouse for map navigation.</p>
 190     </div>
 191
 192
 193
 194 </body>
 195 </html>
 196
 197