]> dev.renevier.net Git - syp.git/blob - openlayers/examples/wfs-snap-split.html
fixes notices
[syp.git] / 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