<!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>OpenLayers Tiled Map Service 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 type="text/javascript">
var lon = 105;//110;//110;
var lat = 39;//30;//-50;
var zoom = 2;
var map, layer;
function init(){
//map = new OpenLayers.Map( 'map', {maxResolution:1.40625/2} );
map = new OpenLayers.Map("map", {
maxExtent: new OpenLayers.Bounds(-180,-90,180,90),
numZoomLevels:18,
maxResolution:0.3515625,
units:'degree',
projection: "EPSG:4326",
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
layer = new OpenLayers.Layer.TMS("Name", "../../data/",{'type':'jpg', 'getURL':get_my_url });
map.addLayer(layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
map.setCenter(new OpenLayers.LonLat(lon, lat).transform(map.displayProjection, map.getProjectionObject()), zoom);
}
function get_my_url (bounds) {
var res = this.map.getResolution();
var x = Math.round ((bounds.left + 180) / (res * this.tileSize.w));
var y = Math.round ((90 - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom() + 3;
z= tlen(1, z);
x= tlen(5, x);
y = tlen(5, y);
var path = "L"+z+"/"+ y + "-" + x + ".jpg";
var url = this.url;
if (url instanceof Array) {
url = this.selectUrl(path, url);
}
return url + path;
}
function tlen(len, mystr){
mystr = String(mystr);
var num = len - mystr.length;
for (var i = 0; i <= num; i++)
{
mystr = "0" + mystr;
}
return mystr;
}
function addTMS() {
l = new OpenLayers.Layer.TMS(
OpenLayers.Util.getElement('layer').value,
OpenLayers.Util.getElement('url').value,
{
'layername': OpenLayers.Util.getElement('layer').value,
'type': OpenLayers.Util.getElement('type').value
});
map.addLayer(l);
map.setBaseLayer(l);
}
</script>
<style type="text/css">
<!--
body,td,th {
font-size: 14px;
}
-->
</style></head>
<body> <body>
<center>
<h1 id="title">Tiled Map Service Example</h1>
<div id="tags">
tile, cache, tms
</div>
<p id="shortdesc">
Demonstrate the initialization and modification of a Tiled Map Service layer.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
URL of TMS (Should end in /): <input type="text" id="url" size="60" value="http://tilecache.osgeo.org/wms-c/Basic.py/" /> layer_name <input type="text" id="layer"
value="basic" /> <select id="type"><option>jpg</option><option>png</option></select> <input type="submit"/><br>
<p>
The first input must be an HTTP URL pointing to a TMS instance. The second
input must be a layer name available from that instance, and the third must
be the output format used by that layer. (Any other behavior will result in
broken images being displayed.)
</p>
</div>
</center>
</body>
</html>