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

New example showing how to switch projections

Browse Source
This commit is contained in:
ahocevar
2013-04-18 16:54:37 +02:00
parent 80a6185947
commit 010035e047
2 changed files with 125 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
examples/polar-projections.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Switch between polar projections</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-compressed.js"></script>
<script type="text/javascript" src="http://spatialreference.org/ref/epsg/3574/proj4js/"></script>
<script type="text/javascript" src="http://spatialreference.org/ref/epsg/3576/proj4js/"></script>
<script type="text/javascript" src="http://spatialreference.org/ref/epsg/3571/proj4js/"></script>
<script type="text/javascript" src="http://spatialreference.org/ref/epsg/3573/proj4js/"></script>
<script type="text/javascript" src="../lib/OpenLayers.js"></script>
<script type="text/javascript" src="polar-projections.js"></script>
</head>
<body onload="init()">
<h1 id="title">Polar Projections WMS Example</h1>
<div id="tags">
switch projections polar
</div>
<div id="shortdesc">Switch between different projections</div>
<div id="map" class="smallmap" style="height:512px"></div>
<button id='epsg3574'>EPSG:3574</button>
<button id='epsg3576'>EPSG:3576</button>
<button id='epsg3571'>EPSG:3571</button>
<button id='epsg3573'>EPSG:3573</button>
<div id="docs">
<p>This example shows how to switch between different projections,
maintaining the center and resolution.</p>
<p>Click the buttons above to try it, and see
<a href='polar-projections.js'>polar-projections.js</a> for the
source code.</p>
</div>
</body>
</html>

84
examples/polar-projections.js Normal file
View File

@@ -0,0 +1,84 @@
var map, layer, overlay;
var projectionOptions = {
'EPSG:3574': {
projection: new OpenLayers.Projection('EPSG:3574'),
units: 'm',
maxExtent: new OpenLayers.Bounds(-5505054, -5505054, 5505054, 5505054),
maxResolution: 5505054 / 128,
numZoomLevels: 18
},
'EPSG:3576': {
projection: new OpenLayers.Projection('EPSG:3576'),
units: 'm',
maxExtent: new OpenLayers.Bounds(-5505054, -5505054, 5505054, 5505054),
maxResolution: 5505054 / 128,
numZoomLevels: 18
},
'EPSG:3571': {
projection: new OpenLayers.Projection('EPSG:3571'),
units: 'm',
maxExtent: new OpenLayers.Bounds(-5505054, -5505054, 5505054, 5505054),
maxResolution: 5505054 / 128,
numZoomLevels: 18
},
'EPSG:3573': {
projection: new OpenLayers.Projection('EPSG:3573'),
units: 'm',
maxExtent: new OpenLayers.Bounds(-5505054, -5505054, 5505054, 5505054),
maxResolution: 5505054 / 128,
numZoomLevels: 18
}
};
function setProjection() {
projCode = this.innerHTML;
var oldExtent = map.getExtent();
var oldCenter = map.getCenter();
var oldProjection = map.getProjectionObject();
// map projection is controlled by the base layer
map.baseLayer.addOptions(projectionOptions[projCode]);
// with the base layer updated, the map has the new projection now
var newProjection = map.getProjectionObject();
// transform the center of the old projection, not the extent
map.setCenter(
oldCenter.transform(oldProjection, newProjection,
map.getZoomForExtent(oldExtent.transform(oldProjection, newProjection))
));
for (var i=map.layers.length-1; i>=0; --i) {
// update grid settings
map.layers[i].addOptions(projectionOptions[projCode]);
// redraw layer - just in case center and zoom are the same in old and
// new projection
map.layers[i].redraw();
}
}
function init() {
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS(
'world',
'http://v2.suite.opengeo.org/geoserver/wms',
{layers: 'world', version: '1.1.1'},
projectionOptions['EPSG:3574']
);
overlay = new OpenLayers.Layer.WMS(
'world',
'http://v2.suite.opengeo.org/geoserver/wms',
{transparent: 'true', layers: 'world:borders', styles: 'line'},
projectionOptions['EPSG:3574']
);
overlay.isBaseLayer = false;
map.addLayers([layer, overlay]);
map.zoomToMaxExtent();
// add behaviour to dom elements
document.getElementById('epsg3574').onclick = setProjection;
document.getElementById('epsg3576').onclick = setProjection;
document.getElementById('epsg3571').onclick = setProjection;
document.getElementById('epsg3573').onclick = setProjection;
}