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

发布于 2024-11-19 19:00:36 字数 1686 浏览 2 评论 0原文

我在进行瓷砖厂项目时遇到了问题到我的网络服务器并使用 OpenLayers 进行绘制我的地图。

我们正在使用tilemill来设计地图> mbtiles 出口> mbutil 到目录> openlayers.tms

我已在下面附上我们正在使用的代码，这是 OpenLayers.TMS 的修改版例子。

这是我的地图的链接，您将看到问题，第一手资料：

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

建议？

非常感谢，

迈克尔

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

塔塔猫 2024-11-26 19:00:36

使用以下位置找到的代码修复了它：
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.Controls 类...我将把它留到另一天。 （如您所见，未创建 panzoombar、layerswitcher、固定链接和鼠标位置......）

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

回复收藏 0 原文

~没有更多了~