68f70f750b
capabilties in OpenLayers Vector drawing, including: * Vector support for iPhone, Safari 2.x series browsers * Improved performance of dragging the map with a large number of geometries. The Vector layer default renderer order is now SVG, VML, Canvas, so browsers with Canvas support and no SVG or VML will be able to draw vectors. The Canvas layer has a number of limitations: getFeatureFromEvent is much slower than the other types of layer, and any change to any feature requires a redraw of the entire canvas. Because Canvas is typically a pretty fast drawing implementation, the latter is less problematic than it might otherwise be. r=pagameba,fred, with glances from a couple other people. (Closes #1512) git-svn-id: http://svn.openlayers.org/trunk/openlayers@7862 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
115 lines
4.5 KiB
HTML
115 lines
4.5 KiB
HTML
<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 = "/cgi-bin/proxy.cgi?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:8080/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:8080/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>
|