我有麻烦采取我的砖厂项目到我的web服务器,并使用OpenLayers绘制我的地图。
我们正在使用tilemill来样式化地图> mbtiles导出> mbutil到目录> openlayers.tms
我在下面附上了我们正在使用的代码,它是对OpenLayers的修改。经颅磁刺激例子。
这是我的地图的链接,你会看到问题,第一手:
地图<!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>
建议吗?
谢谢你,
迈克尔使用以下代码修复:http://wiki.openstreetmap.org/wiki/Talk: Openlayers_POI_layer_example
下面是我的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>
然而,我仍然有问题与OpenLayers。控制类…我把这个留到以后再说。(你可以看到,全景栏,图层切换器,永久链接和鼠标位置没有被创建…)