openlayers/examples/wfs-snap-split.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="../lib/OpenLayers.js"></script>
   6     <style>
   7         .customEditingToolbar {
   8             float: right;
   9             right: 0px;
  10             height: 30px;
  11             width: 200px;
  12         }
  13         .customEditingToolbar div {
  14             float: right;
  15             margin: 5px;
  16             width: 24px;
  17             height: 24px;
  18         }
  19         .olControlNavigationItemActive {
  20             background-image: url("../theme/default/img/editing_tool_bar.png");
  21             background-repeat: no-repeat;
  22             background-position: -103px -23px;
  23         }
  24         .olControlNavigationItemInactive {
  25             background-image: url("../theme/default/img/editing_tool_bar.png");
  26             background-repeat: no-repeat;
  27             background-position: -103px -0px;
  28         }
  29         .olControlDrawFeaturePointItemInactive {
  30             background-image: url("../theme/default/img/editing_tool_bar.png");
  31             background-repeat: no-repeat;
  32             background-position: -77px 0px;
  33         }
  34         .olControlDrawFeaturePointItemActive {
  35             background-image: url("../theme/default/img/editing_tool_bar.png");
  36             background-repeat: no-repeat;
  37             background-position: -77px -23px ;
  38         }
  39         .olControlModifyFeatureItemActive {
  40             background-image: url(../theme/default/img/move_feature_on.png);
  41             background-repeat: no-repeat;
  42             background-position: 0px 1px;
  43         }
  44         .olControlModifyFeatureItemInactive {
  45             background-image: url(../theme/default/img/move_feature_off.png);
  46             background-repeat: no-repeat;
  47             background-position: 0px 1px;
  48         }
  49         .olControlDeleteFeatureItemActive {
  50             background-image: url(../theme/default/img/remove_point_on.png);
  51             background-repeat: no-repeat;
  52             background-position: 0px 1px;
  53         }
  54         .olControlDeleteFeatureItemInactive {
  55             background-image: url(../theme/default/img/remove_point_off.png);
  56             background-repeat: no-repeat;
  57             background-position: 0px 1px;
  58         }
  59     </style>
  60     <script type="text/javascript">
  61         var map, wfs;
  62
  63         var DeleteFeature = OpenLayers.Class(OpenLayers.Control, {
  64             initialize: function(layer, options) {
  65                 OpenLayers.Control.prototype.initialize.apply(this, [options]);
  66                 this.layer = layer;
  67                 this.handler = new OpenLayers.Handler.Feature(
  68                     this, layer, {click: this.clickFeature}
  69                 );
  70             },
  71             clickFeature: function(feature) {
  72                 // if feature doesn't have a fid, destroy it
  73                 if(feature.fid == undefined) {
  74                     this.layer.destroyFeatures([feature]);
  75                 } else {
  76                     feature.state = OpenLayers.State.DELETE;
  77                     this.layer.events.triggerEvent("afterfeaturemodified",
  78                                                    {feature: feature});
  79                     feature.renderIntent = "select";
  80                     this.layer.drawFeature(feature);
  81                 }
  82             },
  83             setMap: function(map) {
  84                 this.handler.setMap(map);
  85                 OpenLayers.Control.prototype.setMap.apply(this, arguments);
  86             },
  87             CLASS_NAME: "OpenLayers.Control.DeleteFeature"
  88         });
  89
  90         function init() {
  91             OpenLayers.ProxyHost= "proxy.cgi?url=";
  92             map = new OpenLayers.Map('map', {
  93                 maxResolution: 156543.03390625,
  94                 restrictedExtent: new OpenLayers.Bounds(
  95                     -11560239, 5541115, -11560239, 5542338
  96                 ),
  97                 maxExtent: new OpenLayers.Bounds(
  98                     -2.003750834E7,-2.003750834E7,
  99                     2.003750834E7,2.003750834E7
 100                 ),
 101                 projection: new OpenLayers.Projection("EPSG:900913"),
 102                 controls: [
 103                     new OpenLayers.Control.PanZoom()
 104                 ]
 105             });
 106
 107             var wms = new OpenLayers.Layer.WMS(
 108                 "Base Layer", "http://demo.opengeo.org/geoserver_openstreetmap/gwc/service/wms",
 109                 {
 110                     layers: 'openstreetmap',
 111                     format: 'image/png'
 112                 }
 113             );
 114             var styles = new OpenLayers.StyleMap({
 115                 "default": new OpenLayers.Style(null, {
 116                     rules: [
 117                         new OpenLayers.Rule({
 118                             symbolizer: {
 119                                 "Point": {
 120                                     pointRadius: 5,
 121                                     graphicName: "square",
 122                                     fillColor: "white",
 123                                     fillOpacity: 0.25,
 124                                     strokeWidth: 1,
 125                                     strokeOpacity: 1,
 126                                     strokeColor: "#333333"
 127                                 },
 128                                 "Line": {
 129                                     strokeWidth: 3,
 130                                     strokeOpacity: 1,
 131                                     strokeColor: "#666666"
 132                                 }
 133                             }
 134                         })
 135                     ]
 136                 }),
 137                 "select": new OpenLayers.Style({
 138                     strokeColor: "#00ccff",
 139                     strokeWidth: 4
 140                 }),
 141                 "temporary": new OpenLayers.Style(null, {
 142                     rules: [
 143                         new OpenLayers.Rule({
 144                             symbolizer: {
 145                                 "Point": {
 146                                     pointRadius: 5,
 147                                     graphicName: "square",
 148                                     fillColor: "white",
 149                                     fillOpacity: 0.25,
 150                                     strokeWidth: 1,
 151                                     strokeOpacity: 1,
 152                                     strokeColor: "#333333"
 153                                 },
 154                                 "Line": {
 155                                     strokeWidth: 3,
 156                                     strokeOpacity: 1,
 157                                     strokeColor: "#00ccff"
 158                                 }
 159                             }
 160                         })
 161                     ]
 162                 })
 163             });
 164
 165             var saveStrategy = new OpenLayers.Strategy.Save();
 166             wfs = new OpenLayers.Layer.Vector("Editable Features", {
 167                 strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy],
 168                 projection: new OpenLayers.Projection("EPSG:4326"),
 169                 styleMap: styles,
 170                 protocol: new OpenLayers.Protocol.WFS({
 171                     version: "1.1.0",
 172                     srsName: "EPSG:4326",
 173                     url: "http://demo.opengeo.org/geoserver/wfs",
 174                     featureNS :  "http://opengeo.org",
 175                     featureType: "roads",
 176                     geometryName: "the_geom",
 177                     schema: "http://demo.opengeo.org/geoserver/wfs/DescribeFeatureType?version=1.1.0&typename=og:roads"
 178                 })
 179             });
 180
 181             map.addLayers([wms, wfs]);
 182
 183             // configure the snapping agent
 184             var snap = new OpenLayers.Control.Snapping({layer: wfs});
 185             map.addControl(snap);
 186             snap.activate();
 187
 188             // configure split agent
 189             var split = new OpenLayers.Control.Split({
 190                 layer: wfs,
 191                 source: wfs,
 192                 tolerance: 0.0001,
 193                 deferDelete: true,
 194                 eventListeners: {
 195                     aftersplit: function(event) {
 196                         var msg = "Split resulted in " + event.features.length + " features.";
 197                         flashFeatures(event.features);
 198                     }
 199                 }
 200             });
 201             map.addControl(split);
 202             split.activate();
 203
 204             // add some editing tools to a panel
 205             var panel = new OpenLayers.Control.Panel(
 206                 {displayClass: 'customEditingToolbar'}
 207             );
 208             var draw = new OpenLayers.Control.DrawFeature(
 209                 wfs, OpenLayers.Handler.Path,
 210                 {
 211                     title: "Draw Feature",
 212                     displayClass: "olControlDrawFeaturePoint",
 213                     handlerOptions: {multi: true}
 214                 }
 215             );
 216             modify = new OpenLayers.Control.ModifyFeature(
 217                 wfs, {displayClass: "olControlModifyFeature"}
 218             );
 219             var del = new DeleteFeature(wfs, {title: "Delete Feature"});
 220
 221             var save = new OpenLayers.Control.Button({
 222                 title: "Save Changes",
 223                 trigger: function() {
 224                     if(modify.feature) {
 225                         modify.selectControl.unselectAll();
 226                     }
 227                     saveStrategy.save();
 228                 },
 229                 displayClass: "olControlSaveFeatures"
 230             });
 231
 232
 233
 234             panel.addControls([
 235                 new OpenLayers.Control.Navigation(),
 236                 save, del, modify, draw
 237             ]);
 238
 239             panel.defaultControl = panel.controls[0];
 240             map.addControl(panel);
 241             map.zoomTo(15);
 242         }
 243
 244         function flashFeatures(features, index) {
 245             if(!index) {
 246                 index = 0;
 247             }
 248             var current = features[index];
 249             if(current && current.layer === wfs) {
 250                 wfs.drawFeature(features[index], "select");
 251             }
 252             var prev = features[index-1];
 253             if(prev && prev.layer === wfs) {
 254                 wfs.drawFeature(prev, "default");
 255             }
 256             ++index;
 257             if(index <= features.length) {
 258                 window.setTimeout(function() {flashFeatures(features, index)}, 100);
 259             }
 260         }
 261
 262     </script>
 263     </head>
 264     <body onload="init()">
 265
 266     <h1 id="title">Snap/Split and Persist via WFS</h1>
 267
 268     <div id="tags">
 269     </div>
 270     <p id="shortdesc">
 271         Shows snapping, splitting, and use of the WFS Transactions (WFS-T).
 272     </p>
 273
 274     <div id="map" class="smallmap"></div>
 275
 276     <div id="docs">
 277         <p>The WFS protocol allows for creation of new features and reading,
 278         updating, or deleting of existing features.</p>
 279         <p>Use the tools to create, modify, and delete (in order from left
 280         to right) features.  Use the save tool (picture of a disk) to
 281         save your changes.  Use the navigation tool (hand) to stop editing
 282         and use the mouse for map navigation.</p>
 283     </div>
 284
 285 </body>
 286 </html>
 287
 288