New example showing how to switch projections
This commit is contained in:
ahocevar
41
examples/polar-projections.html
Normal file
41
examples/polar-projections.html
Normal 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
84
examples/polar-projections.js
Normal 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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user