<html>
<head>
<title>OL2.5RC1 Scales and Resolutions Example</title>
<style type="text/css">
body{
font-family:Arial;
font-size:10px;
}
#map {
width: 600px;
height: 600px;
border: 1px solid gray;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 2;
var map, wkt, PointFeatures;
window.onload = function() {
var layerResolutions = [
0.7031250000000000000,
0.1757812500000000000,
0.0439453125000000000,
0.0054931640625000000,
0.0006866455078125000,
0.0001716613769531250,
0.0000963333333333300,
0.0000429153442382812,
0.0000214576721191406,
0.0000107288360595703
];
var options = {
// various ways of specifying similar things
resolutions: layerResolutions,
/*
scales: [50000000, 10000000],
maxResolution: 0.17578125,
minResolution: 0.0439453125,
maxScale: 10000000,
minScale: 50000000,
numZoomLevels: 5,
minResolution: "auto",
minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),
maxResolution: "auto",
*/
maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
controls: []
};
map = new OpenLayers.Map('map', options);
var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
vlayer = new OpenLayers.Layer.Vector( "Editable" );
map.addLayers([wmsLayer, vlayer]);
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MouseDefaults());
map.addControl(new OpenLayers.Control.MousePosition({element:document.getElementById("rota"), numdigits:3}));
map.setCenter(new OpenLayers.LonLat(-122.1366,42.9794), 5);
aktualisiere();
var WKTString = "LINESTRING(-122.1655 42.9505, -122.1655 43.0083, -122.1077 43.0083, -122.1077 42.9505, -122.1655 42.9505)";
wkt = new OpenLayers.Format.WKT();
var features = wkt.read(WKTString);
var bounds;
if(features)
{
if(features.constructor != Array) {
features = [features];
}
for(var i=0; i<features.length; ++i) {
if (!bounds) {
bounds = features[i].geometry.getBounds();
} else {
bounds.extend(features[i].geometry.getBounds());
}
}
vlayer.addFeatures(features);
}
map.events.register('zoomend', map, function() {aktualisiere();});
map.events.register('moveend', map, function() {aktualisiere();});
}
function aktualisiere()
{
var Stellen = 4;
var derString = "<table>";
derString += "<tr><td>Max Resolution</td><td>" + map.getMaxResolution() + "</td></tr>";
derString += "<tr><td>Act Resolution</td><td>" + map.getResolution() + "</td></tr>";
derString += "<tr><td>Max Scale</td><td>" + OpenLayers.Util.getScaleFromResolution(map.getMaxResolution(),"dd") + "</td></tr>";
derString += "<tr><td>Act Scale</td><td>" + OpenLayers.Util.getScaleFromResolution(map.getResolution(),"dd") + "</td></tr>";
derString += "<tr><td>left</td><td>" + map.getExtent().left + "</td></tr>";
derString += "<tr><td>top</td><td>" + map.getExtent().top + "</td></tr>";
derString += "<tr><td>right</td><td>" + map.getExtent().right + "</td></tr>";
derString += "<tr><td>bottom</td><td>" + map.getExtent().bottom + "</td></tr>";
derString += "<tr><td>width</td><td>" + map.getExtent().getWidth() + "</td></tr>";
derString += "<tr><td>height</td><td>" + map.getExtent().getHeight() + "</td></tr>";
derString += "<tr><td> </td><td> </td></tr>";
derString += "<tr><td>map getSize in Pixel<br>";
derString += "<tr><td>width</td><td>" + map.getSize().w + "</td></tr>";
derString += "<tr><td>height</td><td>" + map.getSize().h + "</td></tr>";
derString += "<tr><td> </td><td> </td></tr>";
derString += "<tr><td>scale</td><td>" + Math.round(map.getExtent().getWidth() / map.getSize().w * OpenLayers.DOTS_PER_INCH * OpenLayers.INCHES_PER_UNIT["dd"]) + "</td></tr>";
derString += "<tr><td>&BBOX</td><td>" + runden(map.getExtent().left,Stellen) + "," + runden(map.getExtent().bottom,Stellen) + "," + runden(map.getExtent().right,Stellen) + "," + runden(map.getExtent().top,Stellen) + "</td></tr>";
derString += "<tr><td>&WIDTH</td><td>" + map.getSize().w + "&HEIGHT=" + map.getSize().h + "</td></tr>";
derString += "<tr><td>CenterX</td><td>" + runden(map.getCenter().lon,Stellen) + "</td></tr>";
derString += "<tr><td>CenterY</td><td>" + runden(map.getCenter().lat,Stellen) + "</td></tr>";
derString += "<tr><td> </td><td> </td></tr>";
derString += "<tr><td>-122.1655, 42.9507</td><td>-122.1077, 43.008</td></tr>";
derString += "</table>";
document.getElementById("Z00").innerHTML = derString;
if(typeof PointFeatures != 'undefined') vlayer.removeFeatures(PointFeatures);
var WKTPoint = "POINT(" + runden(map.getCenter().lon,Stellen) + " " + runden(map.getCenter().lat,Stellen) + ")";
wkt = new OpenLayers.Format.WKT();
PointFeatures = wkt.read(WKTPoint);
var bounds;
if(PointFeatures)
{
if(PointFeatures.constructor != Array) {
PointFeatures = [PointFeatures];
}
for(var i=0; i<PointFeatures.length; ++i) {
if (!bounds) {
bounds = PointFeatures[i].geometry.getBounds();
} else {
bounds.extend(PointFeatures[i].geometry.getBounds());
}
}
vlayer.addFeatures(PointFeatures);
}
}
function runden(Wert,Stellen)
{
return Math.round(Wert*Math.pow(10,Stellen))/Math.pow(10,Stellen);
}
</script>
</head>
<body>
<h1>OpenLayers 2.5, Scales and Resolutions Example</h1>
<table>
<tr><td><div id="map"></div></td><td valign=top id='Z00'></td></tr>
</table>
<div>in IE6 first turn off/on the editable layer</div>
</body>
</html>