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 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>WFS Reprojection + Canvas Renderer Example</title> <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> <script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script> <script type="text/javascript"> var map, layer, styleMap; OpenLayers.ProxyHost = "/proxy/?url="; function init(){ map = new OpenLayers.Map('map', { projection: new OpenLayers.Projection("EPSG:900913"), displayProjection: new OpenLayers.Projection("EPSG:4326"), units: "m", maxResolution: 156543.0339, maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34) }); var g = new OpenLayers.Layer.Google("G", {sphericalMercator: true}); map.addLayers([g]); // prepare to style the data styleMap = new OpenLayers.StyleMap({ strokeColor: "black", strokeWidth: 2, strokeOpacity: 0.5, fillOpacity: 0.2 }); // create a color table for state FIPS code var colors = ["red", "orange", "yellow", "green", "blue", "purple"]; var code, fips = {}; for(var i=1; i<=66; ++i) { code = "0" + i; code = code.substring(code.length - 2); fips[code] = {fillColor: colors[i % colors.length]}; } // add unique value rules with your color lookup styleMap.addUniqueValueRules("default", "STATE_FIPS", fips); // create a wfs layer with a projection different than the map // (only if your wfs doens't support your map projection) var wfs = layer = new OpenLayers.Layer.WFS( "States (SVG)", "http://sigma.openplans.org/geoserver/ows", {typename: 'topp:states'}, { typename: 'states', featureNS: 'http://www.openplans.org/topp', projection: new OpenLayers.Projection("EPSG:4326"), extractAttributes: true, ratio: 1.2, styleMap: styleMap } ); map.addLayer(wfs); var wfs = layer = new OpenLayers.Layer.WFS( "States (Canvas)", "http://sigma.openplans.org/geoserver/ows", {typename: 'topp:states'}, { typename: 'states', featureNS: 'http://www.openplans.org/topp', projection: new OpenLayers.Projection("EPSG:4326"), extractAttributes: true, ratio: 1.2, styleMap: styleMap, renderers: ['Canvas', 'SVG', 'VML'] } ); map.addLayer(wfs); map.addControl(new OpenLayers.Control.LayerSwitcher()); // if you want to use Geographic coords, transform to ESPG:900913 var ddBounds = new OpenLayers.Bounds( -73.839111,40.287907,-68.214111,44.441624 ); map.zoomToExtent( ddBounds.transform(map.displayProjection, map.getProjectionObject()) ); } </script> </head> <body onload="init()"> <h1 id="title">WFS Reprojection + Canvas Renderer Example</h1> <div id="tags"> </div> <p id="shortdesc"> Shows the use of the WFS layer reprojection support </p> <div id="map" class="smallmap"></div> <div id="docs"> <p>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.</p> <p>Also shown is styleMap for the layer with unique value rules. Colors are assigned based on the STATE_FIPS attribute.</p> <p>Additionally, this map demonstrates the Canvas/SVG renderers in browsers which support both. See the two different layers in the LayerSwitcher.</p> </div> </body> </html> |