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

28
examples/canvas.html Normal file
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>

62
examples/canvas.js Normal file
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())
);
}

6
examples/style.css
View File

@@ -79,4 +79,8 @@ h6 {
}
#tags {
display: none;
}
}
#docs p {
margin-bottom: 0.5em;
}

145
examples/wfs-reprojection.html
View File

@@ -1,114 +1,37 @@
<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&amp;v=2&amp;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>
<head>
<title>WFS Reprojection 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="wfs-reprojection.js"></script>
</head>
<body onload="init()">
<h1 id="title">WFS Reprojection Example</h1>
<div id="tags">
</div>
<p id="shortdesc">
Shows the use of the client side 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>
<div id="docs">
<p>
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).
</p>
<p>
Also shown is styleMap for the layer with unique value rules.
Colors are assigned based on the STATE_FIPS attribute.
</p>
<p>
See the <a href="wfs-reprojection.js" target="_blank">
wfs-reprojection.js source</a> to see how this is done.
</p>
</div>
</body>
</html>

64
examples/wfs-reprojection.js Normal file
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)
);
}