瓦片地图的URL解读

之前在做百度地图应用时候一直没弄明白瓦片地图的坐标跟URL是如何挂钩的，官网提供的API里面也没详细的解说，我一直没弄明白原理，今天无意间再把这个加载魔兽地图的demo翻出来看看，后面自己动手做了一下，才明白其中的关系，这个仅适用于像我这样基础不好的初学者，这个问题虽然不难，但是容易困惑，记下来引以为戒。

我是看JS的API。

先看原demo

 

这个是设置加载瓦片规则

tileLayer.getTilesUrl = function(tileCoord, zoom) {
    var x = tileCoord.x;
    var y = tileCoord.y;
    var url = 'tiles/' + zoom + '/tile' + x + '_' + y + '.png';     //根据当前坐标，选取合适的瓦片图
    return url;
}

 

其中  var url = 'tiles/' + zoom + '/tile' + x + '_' + y + '.png';     //根据当前坐标，选取合适的瓦片图

最重要，这个的意思是在当前文件夹下有一个tiles文件夹，在tiles文件夹下，有一个zoom 文件夹，在zoom 文件夹下有tilex_y.png(其中x和y根据实际计算得出)

举个例子：url= “tiles/4/tile1_1.png” 

可是一般我们用工具切出来的瓦片并非是这样一种格式，像我切出来的是tiles/zoom/X/Y.png(zoom是缩放等级0,1,2,3,4)

所以根据百度的瓦片介绍，如果要显示zoom = 1，坐标为（1,1）的图片，url=“tiles/1/1/1.png”才能正常显示

所以我的var url = 'tile/' + zoom + '/' + x + '/' + y + '.png'; 就能显示出来

不同的切图工具切的瓦片图存放的文件结构也不相同，所以要根据实际的情况设置url。