Fatal编程技术网
  • openlayers/
  • 瓷砖在错误的投影中？（mbtiles mbutil openlayers.tms）

瓷砖在错误的投影中？（mbtiles mbutil openlayers.tms）

openlayers

瓷砖在错误的投影中？（mbtiles mbutil openlayers.tms）,openlayers,tms,Openlayers,Tms,我很难接受我的tilemill项目 到我的Web服务器并使用OpenLayers绘制 我的地图 我们正在使用tilemill设置地图>mbtiles的样式 导出>mbutil到目录>openlayers.tms 我在下面附上了我们正在使用的代码， 这是对OpenLayers.TMS的修改 例如 这是我的地图的链接，你会看到 第一手问题： OpenLayers平铺地图服务示例 var-lon=0； var-lat=0； var-zoom=0； var映射，层； 函数init（）{ OpenLa

我很难接受我的tilemill项目 到我的Web服务器并使用OpenLayers绘制 我的地图

我们正在使用tilemill设置地图>mbtiles的样式 导出>mbutil到目录>openlayers.tms

我在下面附上了我们正在使用的代码， 这是对OpenLayers.TMS的修改 例如

这是我的地图的链接，你会看到 第一手问题：


OpenLayers平铺地图服务示例
var-lon=0；
var-lat=0；
var-zoom=0；
var映射，层；
函数init（）{
OpenLayers.ImgPath=”http://js.mapbox.com/theme/dark/";
map=newOpenLayers.map（'map'，{maxResolution:1.40625/2}）；
layer=新的OpenLayers.layer.TMS（“ttc”，
"http://wrimaptube.nfshost.com/ttctiles3/“，{layername:'ttc3'，类型：'png'}）；
map.addLayer（层）；
addControl（新的OpenLayers.Control.LayerSwitcher（））；
map.setCenter（新OpenLayers.LonLat（lon，lat），zoom）；
}
函数addTMS（）{
l=新OpenLayers.Layer.TMS(
OpenLayers.Util.getElement（'layer'）.value，
OpenLayers.Util.getElement（'url'）。值，
{
'layername'：OpenLayers.Util.getElement（'layer'）。值，
“类型”：OpenLayers.Util.getElement（'type'）。值
});
地图。添加图层（l）；
图.立根层（l）；
}
建议

非常感谢

Michael

使用下面的代码修复了它：

以下是我的系统的代码：


马基塔
var映射；
函数osm_getTileURL（边界）{
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极限=数学功率（2，z）；
// ----
如果（y<0 | | y>=极限）{
返回OpenLayers.Util.getImagesLocation（）+“404.png”；
}否则{
x=（（x%限制）+限制]%限制；
//警报（this.url+z+“/”+x+“/”+y+“+this.type）；
返回this.url+z+“/”+x+“/”+y+“+this.type；
}
}
函数init（）{
变量选项={
投影：新OpenLayers.projection（“EPSG:900913”），
displayProjection:new OpenLayers.Projection（“EPSG:4326”），
单位：“m”，
numZoomLevels:18，
最大分辨率：156543.0339，
maxExtent:new OpenLayers.Bounds（-20037508，-20037508，
20037508, 20037508.34)
};
var navigation_control=new OpenLayers.control.navigation（{}）；
变量控制\u数组=[
导航控制，
新建OpenLayers.Control.PanZoomBar（{}），
新的OpenLayers.Control.LayerSwitcher（{}），
新建OpenLayers.Control.Permalink（），
新建OpenLayers.Control.MousePosition（{}）
];
OpenLayers.ImgPath=”http://js.mapbox.com/theme/dark/";
map=新的OpenLayers.map（'map'，选项{
控件：控件数组
});
var layer=新OpenLayers.layer.TMS(
“马基塔”，
"http://markieta.nfshost.com/ttctiles7/“，{layername:'ttc7'，键入：'png'}”
);
map.addLayer（层）；
如果（！map.getCenter（））{
地图设置中心（新OpenLayers.LonLat（-8835000542750），11）；
}
}
身体{
保证金：0；
}
#地图{
宽度：100%；
身高：100%；
}
#正文{
位置：绝对位置；
底部：1米；
左：1米；
宽度：512px；
}
然而，我仍然有OpenLayers.Controls类的问题。。。我会把它留到另一天。（如您所见，panzoombar、layerswitcher、permalink和mouseposition未被创建。）

使用以下代码修复了此问题：

以下是我的系统的代码：


马基塔
var映射；
函数osm_getTileURL（边界）{
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极限=数学功率（2，z）；
// ----
如果（y<0 | | y>=极限）{
返回OpenLayers.Util.getImagesLocation（）+“404.png”；
}否则{
x=（（x%限制）+限制]%限制；
//警报（this.url+z+“/”+x+“/”+y+“+this.type）；
返回this.url+z+“/”+x+“/”+y+“+this.type；
}
}
函数init（）{
变量选项={
投影：新OpenLayers.projection（“EPSG:900913”），
displayProjection:new OpenLayers.Projection（“EPSG:4326”），
单位：“m”，
numZoomLevels:18，
最大分辨率：156543.0339，
maxExtent:new OpenLayers.Bounds（-20037508，-20037508，
20037508, 20037508.34)
};
var navigation_control=new OpenLayers.control.navigation（{}）；
变量控制\u数组=[
导航控制，
新建OpenLayers.Control.PanZoomBar（{}），
新的OpenLayers.Control.LayerSwitcher（{}），
新建OpenLayers.Control.Permalink（），
新建OpenLayers.Control.MousePosition（{}）
];
OpenLayers.ImgPath=”http://js.mapbox.com/theme/dark/";
map=新的OpenLayers.map（'map'，选项{
控件：控件数组
});
var layer=新OpenLayers.layer.TMS(
“马基塔”，
"http://markieta.nfshost.com/ttctiles7/“，{layername:'ttc7'，t

<!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>



<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>