From e10e39b19c4e774336efb2e4bef0413886ecb70d Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Wed, 9 Dec 2009 03:11:13 +0000 Subject: [PATCH] Putting the canvas renderer bit in its own example. Using the Vector layer for WFS. Extracting the relevant code and providing an easy to open link for viewing the source. git-svn-id: http://svn.openlayers.org/trunk/openlayers@9862 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf --- examples/canvas.html | 28 +++++++ examples/canvas.js | 62 ++++++++++++++ examples/style.css | 6 +- examples/wfs-reprojection.html | 145 ++++++++------------------------- examples/wfs-reprojection.js | 64 +++++++++++++++ 5 files changed, 193 insertions(+), 112 deletions(-) create mode 100644 examples/canvas.html create mode 100644 examples/canvas.js create mode 100644 examples/wfs-reprojection.js diff --git a/examples/canvas.html b/examples/canvas.html new file mode 100644 index 0000000000..70397566be --- /dev/null +++ b/examples/canvas.html @@ -0,0 +1,28 @@ + + + Canvas Renderer Example + + + + + + + +

Canvas Renderer Example

+

+ Demonstrates the use of the canvas renderer with a vector layer. +

+
+
+

+ This example shows a vector layer that uses the Canvas renderer + where available. The order of the renderers given in the layer + options is used to locate the first available renderer. +

+

+ See the canvas.js source + to see how this is done. +

+
+ + diff --git a/examples/canvas.js b/examples/canvas.js new file mode 100644 index 0000000000..1434ff9e3d --- /dev/null +++ b/examples/canvas.js @@ -0,0 +1,62 @@ +var map, layer, styleMap; +OpenLayers.ProxyHost = "/proxy/?url="; + +function init() { + map = new OpenLayers.Map({ + div: "map", + projection: new OpenLayers.Projection("EPSG:900913"), + displayProjection: new OpenLayers.Projection("EPSG:4326"), + units: "m", + maxResolution: 156543.0339, + maxExtent: new OpenLayers.Bounds( + -20037508, -20037508, 20037508, 20037508 + ) + }); + + var g = new OpenLayers.Layer.Google("Google Layer", { + 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 vector layer using the canvas renderer (where available) + var wfs = new OpenLayers.Layer.Vector("States", { + strategies: [new OpenLayers.Strategy.BBOX()], + protocol: new OpenLayers.Protocol.WFS({ + version: "1.1.0", + srsName: "EPSG:900913", + url: "http://demo.opengeo.org/geoserver/wfs", + featureType: "states", + featureNS: "http://www.openplans.org/topp" + }), + styleMap: styleMap, + renderers: ["Canvas", "SVG", "VML"] + }); + map.addLayer(wfs); + + // 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()) + ); +} diff --git a/examples/style.css b/examples/style.css index 60875fe823..d1da62ec8c 100644 --- a/examples/style.css +++ b/examples/style.css @@ -79,4 +79,8 @@ h6 { } #tags { display: none; -} \ No newline at end of file +} + +#docs p { + margin-bottom: 0.5em; +} diff --git a/examples/wfs-reprojection.html b/examples/wfs-reprojection.html index ef45be0848..da87c8846b 100644 --- a/examples/wfs-reprojection.html +++ b/examples/wfs-reprojection.html @@ -1,114 +1,37 @@ - - WFS Reprojection + Canvas Renderer Example - - - - - - - - -

WFS Reprojection + Canvas Renderer Example

- -
-
-

- Shows the use of the WFS layer reprojection support -

- + + WFS Reprojection Example + + + + + + + +

WFS Reprojection Example

+
+
+

+ Shows the use of the client side reprojection support. +

- -
-

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.

-

Also shown is styleMap for the layer with unique value rules. Colors - are assigned based on the STATE_FIPS attribute.

-

Additionally, this map demonstrates the Canvas/SVG renderers in browsers - which support both. See the two different layers in the - LayerSwitcher.

-
- - - - +
+

+ This example shows client side reprojection. In the case where + the projection of a vector layer differs from the projection of + the map, features are requested in the layer projection and + transformed during parsing. It is assumed that the layer + projection is "native" projection of the data (the coordinate + reference system of the data on the server). +

+

+ Also shown is styleMap for the layer with unique value rules. + Colors are assigned based on the STATE_FIPS attribute. +

+

+ See the + wfs-reprojection.js source to see how this is done. +

+
+ diff --git a/examples/wfs-reprojection.js b/examples/wfs-reprojection.js new file mode 100644 index 0000000000..e381b0a31c --- /dev/null +++ b/examples/wfs-reprojection.js @@ -0,0 +1,64 @@ +var map, layer, styleMap; +OpenLayers.ProxyHost = "/proxy/?url="; +function init() { + + var geographic = new OpenLayers.Projection("EPSG:4326"); + var mercator = new OpenLayers.Projection("EPSG:900913"); + + map = new OpenLayers.Map('map', { + projection: mercator, + units: "m", + maxResolution: 156543.0339, + maxExtent: new OpenLayers.Bounds( + -20037508, -20037508, 20037508, 20037508 + ) + }); + + var g = new OpenLayers.Layer.Google("Google Layer", { + 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); + + // This server supports server-side reprojection, but we're using WFS 1.0 + // here (which doesn't support reprojection) to illustrate client-side + // reprojection. + var wfs = new OpenLayers.Layer.Vector("States", { + strategies: [new OpenLayers.Strategy.BBOX()], + protocol: new OpenLayers.Protocol.WFS({ + version: "1.0.0", + srsName: "EPSG:4326", // this is the default + url: "http://demo.opengeo.org/geoserver/wfs", + featureType: "states", + featureNS: "http://www.openplans.org/topp" + }), + projection: geographic, // specified because it is different than the map + styleMap: styleMap + }); + map.addLayer(wfs); + + // 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(geographic, mercator) + ); +}