| 101 | | |
|---|
| 102 | | |
|---|
| 103 | | <html xmlns="http://www.w3.org/1999/xhtml"> |
|---|
| 104 | | <head> |
|---|
| 105 | | <link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> |
|---|
| 106 | | <style type="text/css"> |
|---|
| 107 | | #map { |
|---|
| 108 | | width: 512px; |
|---|
| 109 | | height: 512px; |
|---|
| 110 | | border: 1px solid black; |
|---|
| 111 | | } |
|---|
| 112 | | </style> |
|---|
| 113 | | <script src="../lib/OpenLayers.js"></script> |
|---|
| 114 | | <script src='http://maps.google.com/maps?file=api&v=2.82&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script> |
|---|
| 115 | | <script type="text/javascript"> |
|---|
| 116 | | var map, layer; |
|---|
| 117 | | OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url="; |
|---|
| 118 | | function init(){ |
|---|
| 119 | | map = new OpenLayers.Map('map', { |
|---|
| 120 | | projection: new OpenLayers.Projection("EPSG:900913"), |
|---|
| 121 | | displayProjection: new OpenLayers.Projection("EPSG:4326"), |
|---|
| 122 | | units: "m", |
|---|
| 123 | | maxResolution: 156543.0339, |
|---|
| 124 | | maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, |
|---|
| 125 | | 20037508.34, 20037508.34) |
|---|
| 126 | | }); |
|---|
| 127 | | layer = new OpenLayers.Layer.Google( "G", |
|---|
| 128 | | {sphericalMercator: true} ); |
|---|
| 129 | | map.addLayer(layer); |
|---|
| 130 | | layer = new OpenLayers.Layer.WFS( "States", |
|---|
| 131 | | "http://geo.openplans.org:8080/geoserver/ows", {typename: 'topp:states'}, |
|---|
| 132 | | { |
|---|
| 133 | | typename: 'states', |
|---|
| 134 | | featureNS: 'http://www.openplans.org/topp', |
|---|
| 135 | | projection: new OpenLayers.Projection("EPSG:4326"), |
|---|
| 136 | | extractAttributes: false, |
|---|
| 137 | | ratio: 1.2 |
|---|
| 138 | | } ); |
|---|
| 139 | | map.addLayer(layer); |
|---|
| 140 | | map.addControl(new OpenLayers.Control.LayerSwitcher()); |
|---|
| 141 | | |
|---|
| 142 | | map.zoomToExtent(new OpenLayers.Bounds( |
|---|
| 143 | | -73.839111,40.287907,-68.214111,44.441624). |
|---|
| 144 | | transform(map.displayProjection, map.getProjectionObject())); |
|---|
| 145 | | } |
|---|
| 146 | | </script> |
|---|
| 147 | | </head> |
|---|
| 148 | | <body onload="init()"> |
|---|
| 149 | | |
|---|
| 150 | | <h1 id="title">WFS Reprojection Example</h1> |
|---|
| 151 | | |
|---|
| 152 | | <div id="tags"> |
|---|
| 153 | | </div> |
|---|
| 154 | | <p id="shortdesc"> |
|---|
| 155 | | Shows the use of the WFS layer reprojection support |
|---|
| 156 | | </p> |
|---|
| 157 | | |
|---|
| 158 | | <div id="map"></div> |
|---|
| 159 | | |
|---|
| 160 | | <div id="docs"> |
|---|
| 161 | | This example shows automatic WFS reprojection, displaying an 'unprojected' WFS layer projected on the client side over Google Maps. The key configuration here is the 'projection' option on the WFS layer. |
|---|
| 162 | | </div> |
|---|
| 163 | | |
|---|
| 164 | | |
|---|
| 165 | | |
|---|
| 166 | | </body> |
|---|
| 167 | | </html> |
|---|
| 168 | | |
|---|
| 169 | | |
|---|
