ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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.

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@9862 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
2009-12-09 03:11:13 +00:00
parent a23f2229cf
commit e10e39b19c
5 changed files with 193 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/canvas.html
+28
View File
@@ -0,0 +1,28 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>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&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
<script src="canvas.js"></script>
</head>
<body onload="init()">
<h1 id="title">Canvas Renderer Example</h1>
<p id="shortdesc">
Demonstrates the use of the canvas renderer with a vector layer.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>
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.
</p>
<p>
See the <a href="canvas.js" target="_blank">canvas.js source</a>
to see how this is done.
</p>
</div>
</body>
</html>
examples/canvas.js
+62
View File
@@ -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())
);
}
examples/style.css
+4
View File
@@ -80,3 +80,7 @@ h6 {
#tags { #tags {
display: none; display: none;
} }
#docs p {
margin-bottom: 0.5em;
}
examples/wfs-reprojection.html
+34 -111
View File
@@ -1,114 +1,37 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>WFS Reprojection + Canvas Renderer Example</title> <title>WFS Reprojection Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" />
<script src="../lib/OpenLayers.js"></script> <script src="../lib/OpenLayers.js"></script>
<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ"></script>
<script type="text/javascript"> <script src="wfs-reprojection.js"></script>
</head>
var map, layer, styleMap; <body onload="init()">
OpenLayers.ProxyHost = "/proxy/?url="; <h1 id="title">WFS Reprojection Example</h1>
function init(){ <div id="tags">
</div>
map = new OpenLayers.Map('map', { <p id="shortdesc">
projection: new OpenLayers.Projection("EPSG:900913"), Shows the use of the client side reprojection support.
displayProjection: new OpenLayers.Projection("EPSG:4326"), </p>
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="map" class="smallmap"></div>
<div id="docs">
<div id="docs"> <p>
<p>This example shows automatic WFS reprojection, displaying an 'unprojected' This example shows client side reprojection. In the case where
WFS layer projected on the client side over Google Maps. The key configuration the projection of a vector layer differs from the projection of
here is the 'projection' option on the WFS layer.</p> the map, features are requested in the layer projection and
<p>Also shown is styleMap for the layer with unique value rules. Colors transformed during parsing. It is assumed that the layer
are assigned based on the STATE_FIPS attribute.</p> projection is "native" projection of the data (the coordinate
<p>Additionally, this map demonstrates the Canvas/SVG renderers in browsers reference system of the data on the server).
which support both. See the two different layers in the </p>
LayerSwitcher.</p> <p>
</div> Also shown is styleMap for the layer with unique value rules.
Colors are assigned based on the STATE_FIPS attribute.
</p>
<p>
</body> See the <a href="wfs-reprojection.js" target="_blank">
wfs-reprojection.js source</a> to see how this is done.
</p>
</div>
</body>
</html> </html>
examples/wfs-reprojection.js
+64
View File
@@ -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)
);
}