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
This commit is contained in:
Tim Schaub
@@ -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&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>
|
||||
|
||||
<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&v=2&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>
|
||||
|
||||
Reference in New Issue
Block a user