openlayers/examples/getfeature-wfs.html

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