diff options
author | Chris Schlaeger <chris@linux.com> | 2014-08-12 21:56:44 +0200 |
---|---|---|
committer | Chris Schlaeger <chris@linux.com> | 2014-08-12 21:56:44 +0200 |
commit | ea346a785dc1b3f7c156f6fc33da634e1f1a627b (patch) | |
tree | af67530553d20b6e82ad60fd79593e9c4abf5565 /misc/openlayers/examples/wfs-snap-split.html | |
parent | 59741cd535c47f25971bf8c32b25da25ceadc6d5 (diff) | |
download | postrunner-ea346a785dc1b3f7c156f6fc33da634e1f1a627b.zip |
Adding jquery, flot and openlayers to be included with the GEM.v0.0.4
Diffstat (limited to 'misc/openlayers/examples/wfs-snap-split.html')
-rw-r--r-- | misc/openlayers/examples/wfs-snap-split.html | 292 |
1 files changed, 292 insertions, 0 deletions
diff --git a/misc/openlayers/examples/wfs-snap-split.html b/misc/openlayers/examples/wfs-snap-split.html new file mode 100644 index 0000000..0b71da0 --- /dev/null +++ b/misc/openlayers/examples/wfs-snap-split.html @@ -0,0 +1,292 @@ +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> + <meta name="apple-mobile-web-app-capable" content="yes"> + <link rel="stylesheet" href="../theme/default/style.css" type="text/css"> + <link rel="stylesheet" href="style.css" type="text/css"> + <script src="../lib/OpenLayers.js"></script> + <!--[if lte IE 6]> + <style> + .customEditingToolbar { + width: 200px; + } + </style> + <![endif]--> + <style> + .customEditingToolbar { + float: right; + right: 0px; + height: 30px; + } + .customEditingToolbar div { + float: right; + margin: 5px; + width: 24px; + height: 24px; + } + .olControlNavigationItemActive { + background-image: url("../theme/default/img/editing_tool_bar.png"); + background-repeat: no-repeat; + background-position: -103px -23px; + } + .olControlNavigationItemInactive { + background-image: url("../theme/default/img/editing_tool_bar.png"); + background-repeat: no-repeat; + background-position: -103px -0px; + } + .olControlDrawFeaturePointItemInactive { + background-image: url("../theme/default/img/editing_tool_bar.png"); + background-repeat: no-repeat; + background-position: -77px 0px; + } + .olControlDrawFeaturePointItemActive { + background-image: url("../theme/default/img/editing_tool_bar.png"); + background-repeat: no-repeat; + background-position: -77px -23px ; + } + .olControlModifyFeatureItemActive { + background-image: url(../theme/default/img/move_feature_on.png); + background-repeat: no-repeat; + background-position: 0px 1px; + } + .olControlModifyFeatureItemInactive { + background-image: url(../theme/default/img/move_feature_off.png); + background-repeat: no-repeat; + background-position: 0px 1px; + } + .olControlDeleteFeatureItemActive { + background-image: url(../theme/default/img/remove_point_on.png); + background-repeat: no-repeat; + background-position: 0px 1px; + } + .olControlDeleteFeatureItemInactive { + background-image: url(../theme/default/img/remove_point_off.png); + background-repeat: no-repeat; + background-position: 0px 1px; + } + </style> + <script type="text/javascript"> + var map, wfs; + + var DeleteFeature = OpenLayers.Class(OpenLayers.Control, { + initialize: function(layer, options) { + OpenLayers.Control.prototype.initialize.apply(this, [options]); + this.layer = layer; + this.handler = new OpenLayers.Handler.Feature( + this, layer, {click: this.clickFeature} + ); + }, + clickFeature: function(feature) { + // if feature doesn't have a fid, destroy it + if(feature.fid == undefined) { + this.layer.destroyFeatures([feature]); + } else { + feature.state = OpenLayers.State.DELETE; + this.layer.events.triggerEvent("afterfeaturemodified", + {feature: feature}); + feature.renderIntent = "select"; + this.layer.drawFeature(feature); + } + }, + setMap: function(map) { + this.handler.setMap(map); + OpenLayers.Control.prototype.setMap.apply(this, arguments); + }, + CLASS_NAME: "OpenLayers.Control.DeleteFeature" + }); + + function init() { + OpenLayers.ProxyHost = "proxy.cgi?url="; + map = new OpenLayers.Map({ + div: "map", + maxResolution: 156543.0339, + maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508), + restrictedExtent: new OpenLayers.Bounds( + -11563906, 5540550, -11559015, 5542996 + ), + projection: new OpenLayers.Projection("EPSG:900913"), + units: "m", + controls: [ + new OpenLayers.Control.PanZoom(), + new OpenLayers.Control.Navigation() + ] + }); + + var osm = new OpenLayers.Layer.OSM(); + var styles = new OpenLayers.StyleMap({ + "default": new OpenLayers.Style(null, { + rules: [ + new OpenLayers.Rule({ + symbolizer: { + "Point": { + pointRadius: 5, + graphicName: "square", + fillColor: "white", + fillOpacity: 0.25, + strokeWidth: 1, + strokeOpacity: 1, + strokeColor: "#333333" + }, + "Line": { + strokeWidth: 3, + strokeOpacity: 1, + strokeColor: "#666666" + } + } + }) + ] + }), + "select": new OpenLayers.Style({ + strokeColor: "#00ccff", + strokeWidth: 4 + }), + "temporary": new OpenLayers.Style(null, { + rules: [ + new OpenLayers.Rule({ + symbolizer: { + "Point": { + pointRadius: 5, + graphicName: "square", + fillColor: "white", + fillOpacity: 0.25, + strokeWidth: 1, + strokeOpacity: 1, + strokeColor: "#333333" + }, + "Line": { + strokeWidth: 3, + strokeOpacity: 1, + strokeColor: "#00ccff" + } + } + }) + ] + }) + }); + + var saveStrategy = new OpenLayers.Strategy.Save(); + wfs = new OpenLayers.Layer.Vector("Editable Features", { + strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy], + projection: new OpenLayers.Projection("EPSG:4326"), + styleMap: styles, + protocol: new OpenLayers.Protocol.WFS({ + version: "1.1.0", + srsName: "EPSG:4326", + url: "http://demo.opengeo.org/geoserver/wfs", + featureNS : "http://opengeo.org", + featureType: "roads", + geometryName: "the_geom", + schema: "http://demo.opengeo.org/geoserver/wfs/DescribeFeatureType?version=1.1.0&typename=og:roads" + }) + }); + + map.addLayers([osm, wfs]); + + // configure the snapping agent + var snap = new OpenLayers.Control.Snapping({layer: wfs}); + map.addControl(snap); + snap.activate(); + + // configure split agent + var split = new OpenLayers.Control.Split({ + layer: wfs, + source: wfs, + tolerance: 0.0001, + deferDelete: true, + eventListeners: { + aftersplit: function(event) { + var msg = "Split resulted in " + event.features.length + " features."; + flashFeatures(event.features); + } + } + }); + map.addControl(split); + split.activate(); + + // add some editing tools to a panel + var panel = new OpenLayers.Control.Panel({ + displayClass: 'customEditingToolbar', + allowDepress: true + }); + var draw = new OpenLayers.Control.DrawFeature( + wfs, OpenLayers.Handler.Path, + { + title: "Draw Feature", + displayClass: "olControlDrawFeaturePoint", + handlerOptions: {multi: true} + } + ); + modify = new OpenLayers.Control.ModifyFeature( + wfs, {displayClass: "olControlModifyFeature"} + ); + var del = new DeleteFeature(wfs, {title: "Delete Feature"}); + + var save = new OpenLayers.Control.Button({ + title: "Save Changes", + trigger: function() { + if(modify.feature) { + modify.selectControl.unselectAll(); + } + saveStrategy.save(); + }, + displayClass: "olControlSaveFeatures" + }); + + + + panel.addControls([ + save, del, modify, draw + ]); + + map.addControl(panel); + map.setCenter(new OpenLayers.LonLat(-11561460.5, 5541773), 15); + } + + function flashFeatures(features, index) { + if(!index) { + index = 0; + } + var current = features[index]; + if(current && current.layer === wfs) { + wfs.drawFeature(features[index], "select"); + } + var prev = features[index-1]; + if(prev && prev.layer === wfs) { + wfs.drawFeature(prev, "default"); + } + ++index; + if(index <= features.length) { + window.setTimeout(function() {flashFeatures(features, index)}, 100); + } + } + + </script> + </head> + <body onload="init()"> + + <h1 id="title">Snap/Split and Persist via WFS</h1> + + <div id="tags"> + snapping, splitting, wfs, wfst, wfs-t, advanced + </div> + <p id="shortdesc"> + Shows snapping, splitting, and use of the WFS Transactions (WFS-T). + </p> + + <div id="map" class="smallmap"></div> + + <div id="docs"> + <p>The WFS protocol allows for creation of new features and reading, + updating, or deleting of existing features.</p> + <p>Use the tools to create, modify, and delete (in order from left + to right) features. Use the save tool (picture of a disk) to + save your changes.</p> + <p>To deactivate "drawing" or "modifying" depress the corresponding + button.</p> + </div> + +</body> +</html> + + |