Question

我用tilemill（导出为mbtiles）用

表示osm

bounds in Tilemill: 11.3022,47.9679,11.9064,48.3453
Center in Tilemill: 11.6153,48.1697,8

并使用mb-util作为png提取的tile。这已成功结束了11-19（缩放级别）

文件夹中的png

mb-util exported tiles

之后我尝试将这些图块作为tms图块层与我在stackoverflow上找到的代码集成。

<html>
<head>
<title>Markieta</title>
    <script src="http://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;
                    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(11.3022,
            47.9679,
            11.9064,
            48.3453)
        };
            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(
            "local",
            "http://localhost/v1/", {layername: 'v1_tiles_xyz', type: 'png'}
        );

        map.addLayer(layer);

        if(!map.getCenter()){
        map.setCenter(new OpenLayers.LonLat(11.6153,48.1697,8),15);
    }
}

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

不幸的是我的瓷砖保持粉红色，看着源瓷砖并创建了以下名称：

http://localhost/v1/1.0.0/v1_tiles_xyz/16/32807/32766.png

问题是tile 32807 / 32766.png不存在！范围和计算似乎有些错误：

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

感谢您的帮助！

Tilemill瓷砖作为Openlayers TMS

0 个答案: