1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" /> <title>WFS: GetFeature Example (GeoServer)</title> <script src="../lib/OpenLayers.js"></script> <script type="text/javascript"> var map, layer, select, hover, control; function init(){ OpenLayers.ProxyHost= "proxy.cgi?url="; map = new OpenLayers.Map('map', { controls: [ new OpenLayers.Control.PanZoom(), new OpenLayers.Control.Permalink(), new OpenLayers.Control.Navigation() ] }); layer = new OpenLayers.Layer.WMS( "States WMS/WFS", "http://demo.opengeo.org/geoserver/ows", {layers: 'topp:states', format: 'image/gif'} ); select = new OpenLayers.Layer.Vector("Selection", {styleMap: new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"]) }); hover = new OpenLayers.Layer.Vector("Hover"); map.addLayers([layer, hover, select]); control = new OpenLayers.Control.GetFeature({ protocol: OpenLayers.Protocol.WFS.fromWMSLayer(layer), box: true, hover: true, multipleKey: "shiftKey", toggleKey: "ctrlKey" }); control.events.register("featureselected", this, function(e) { select.addFeatures([e.feature]); }); control.events.register("featureunselected", this, function(e) { select.removeFeatures([e.feature]); }); control.events.register("hoverfeature", this, function(e) { hover.addFeatures([e.feature]); }); control.events.register("outfeature", this, function(e) { hover.removeFeatures([e.feature]); }); map.addControl(control); control.activate(); map.setCenter(new OpenLayers.Bounds(-140.444336,25.115234,-44.438477,50.580078).getCenterLonLat(), 3); } </script> </head> <body onload="init()"> <h1 id="title">WFS GetFeature Example (GeoServer)</h1> <div id="tags"> </div> <p id="shortdesc"> Shows how to use the GetFeature control to select features from a WMS layer. Click or drag a box to select features, use the Shift key to add features to the selection, use the Ctrl key to toggle a feature's selected status. Note that this control also has a hover option, which is enabled in this example. This gives you a visual feedback by loading the feature underneath the mouse pointer from the WFS, but causes a lot of GetFeature requests to be issued. </p> <div id="map" class="smallmap"></div> <div id="docs"></div> </body> </html> </div> |