Tiles in the wrong projection? (mbtiles mbutil openlayers.tms)
I am having trouble taking my tilemill project to my webserver and using OpenLayers to draw my map.
We are using tilemill to style the map > mbtiles export > mbutil to directory > openlayers.tms
I have attached below the code we are using, which is a modification of the OpenLayers.TMS example.
Here is the link to my map and you will see the problem, first hand:
MAP
<!DOCTYPE html>
<html>
<head>
<title>OpenLayers Tiled Map Service Example</title>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var lon = 0;
var lat = 0;
var zoom = 0;
var map, layer;
function init(){
OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";
map = new OpenLayers.Map( 'map', {maxResolution:1.40625/2} );
layer = new OpenLayers.Layer.TMS( "ttc",
"http://wrimaptube.nfshost.com/ttctiles3/", {layername: 'ttc3', type:'png'} );
map.addLayer(layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
}
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>
</head>
<body onload="init()">
<div id="map" style='width: 1024px; height : 500px;'>
</div>
</body>
</html>
Suggestions?
Thanks a lot,
Michael
Fixed it using the code found on: http://wiki.openstreetmap.org/wiki/Talk:Openlayers_POI_layer_example
Here is what the code looks like for my MAP:
<html>
<head>
<title>Markieta</title>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
var map;
function osm_getTileURL(bounds) {
var res = this.map.getResolution();
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom();
var limit = Math.pow(2, z);
// ----
if (y < 0 || y >= limit) {
return OpenLayers.Util.getImagesLocation() + "404.png";
} else {
x = ((x % limit) + limit) % limit;
//alert(this.url + z + "/" + x + "/" + y + "." + this.type);
return this.url + z + "/" + x + "/" + y + "." + this.type;
}
}
function init() {
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
numZoomLevels: 18,
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
20037508, 20037508.34)
};
var navigation_control = new OpenLayers.Control.Navigation({});
var controls_array = [
navigation_control,
new OpenLayers.Control.PanZoomBar({}),
new OpenLayers.Control.LayerSwitcher({}),
new OpenLayers.Control.Permalink(),
new OpenLayers.Control.MousePosition({})
];
OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";
map = new OpenLayers.Map('map', options, {
controls: controls_array
});
var layer = new OpenLayers.Layer.TMS(
"Markieta",
"http://markieta.nfshost.com/ttctiles7/", {layername: 'ttc7', type: 'png'}
);
map.addLayer(layer);
if(!map.getCenter()){
map.setCenter(new OpenLayers.LonLat(-8835000,5427500),11);
}
}
</script>
</head>
<body onload="init();">
<div id="map"></div>
<style type="text/css">
body {
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
#text {
position: absolute;
bottom: 1em;
left: 1em;
width: 512px;
}
</style>
</div>
</body>
</html>
However, I am still having trouble with the OpenLayers.Controls class... I'll leave that for another day. (as you can see, the panzoombar, layerswitcher, permalink and mouseposition are not being created..)
加载中,请稍侯......
精彩评论