上一篇也说到瓦片，我们为什么使用瓦片？这一篇主要是关于如何拼接地图？

    下面的一张图，可以一眼明了，地图是如何切割以及拼接的。

    瓦片信息包括切图原点，瓦片大小，格式，分辨率以及分辨率级别等。

    切图原点，一般是整个坐标系的最左上角，比如说，web墨卡托是[-08.3427892]。切图原点右侧列数是正数，左侧的列数是负数，下侧行数是正数，上侧行数是负数。

    瓦片的宽度、高度，目前互联网最常见的瓦片宽度和高度都是256像素。

    分辨率，这里不是指电脑的分辨率。而这里意思是一像素代表多少米，类似于比例尺。

    分辨率级别，含有若干级别的分辨率，不同的分辨率下面，显示不同的要素信息。例如，低分辨率下面，显示洲名称和海洋名称。中分辨率下面，显示省名。高分辨率下面，就显示POI信息。互联网企业当中分辨率级别数在20上下。

    地图范围，切图的范围，只在这个范围下面才切图，其他的区域都没有相应的瓦片。如果把所有的分辨率都切完的话，是非常耗时间的。仅仅是中国区域，一台8核的机器，也得需要一个月才能切完，更何况全世界了。

    谷歌使用的web墨卡托投影，分辨率级别一共22级，他的每一级分辨率大小6*(2^i))。7892*2代表整个的X轴范围，256代表图片的像素大小，2代表是0级时有两列（有的地图0级只有1列，这个时候就是2^(i-1)），i代表级别。

    我们现在需要计算两个东东，一个是当前分辨率下面最大的行和列数，第二个某一个坐标在第几行几列。下面会列出好几个公式，一定要理解为什么这么计算，否则移植到其他的切图服务不会自己列出相应的公式了。

4194304]，注意的是行列值是从0开始的。

    比如说，1级下面，有两行和两列。这四张图片的地址如下：

    我们把这四张图片合在一起的话，就变成如下的图，这就是一个世界的地图了。

    左上角是X值最小，Y值最大。屏幕是X和Y值都是最小的。这一点转换关系需要明白，否则Y轴的方向都反了。

    如果切图不是从左上角开始的，就得计算每一个分辨率下面的左上角和右下角所处的行和列，就可以知道行和列的范围。同理，可计算当前可视区域的行和列。

    我们如果知道行列以及分辨率等级，就很容易知道这个瓦片的地址。，这里的x代表参数行数，y代表列数，z代表分辨率等级。

    Google这种图片地址属于非常好计算，幸好也是非常普遍的。比较难的，算是微软的，行列以及分辨率等级计算都差不多，难的是想x，y，z参数不知道怎么计算的。

,这个图片地址，这个1232不知道怎么来的。不过幸好找到一个论文才弄明白，《利用BingMaps地图切片实现网络地图服务》，地址

    上一篇也说到瓦片，我们为什么使用瓦片？这一篇主要是关于如何拼接地图？

    下面的一张图，可以一眼明了，地图是如何切割以及拼接的。

    瓦片信息包括切图原点，瓦片大小，格式，分辨率以及分辨率级别等。

    切图原点，一般是整个坐标系的最左上角，比如说，web墨卡托是[-08.3427892]。切图原点右侧列数是正数，左侧的列数是负数，下侧行数是正数，上侧行数是负数。

    瓦片的宽度、高度，目前互联网最常见的瓦片宽度和高度都是256像素。

    分辨率，这里不是指电脑的分辨率。而这里意思是一像素代表多少米，类似于比例尺。

    分辨率级别，含有若干级别的分辨率，不同的分辨率下面，显示不同的要素信息。例如，低分辨率下面，显示洲名称和海洋名称。中分辨率下面，显示省名。高分辨率下面，就显示POI信息。互联网企业当中分辨率级别数在20上下。

    地图范围，切图的范围，只在这个范围下面才切图，其他的区域都没有相应的瓦片。如果把所有的分辨率都切完的话，是非常耗时间的。仅仅是中国区域，一台8核的机器，也得需要一个月才能切完，更何况全世界了。

    谷歌使用的web墨卡托投影，分辨率级别一共22级，他的每一级分辨率大小6*(2^i))。7892*2代表整个的X轴范围，256代表图片的像素大小，2代表是0级时有两列（有的地图0级只有1列，这个时候就是2^(i-1)），i代表级别。

    我们现在需要计算两个东东，一个是当前分辨率下面最大的行和列数，第二个某一个坐标在第几行几列。下面会列出好几个公式，一定要理解为什么这么计算，否则移植到其他的切图服务不会自己列出相应的公式了。

4194304]，注意的是行列值是从0开始的。

    比如说，1级下面，有两行和两列。这四张图片的地址如下：

    我们把这四张图片合在一起的话，就变成如下的图，这就是一个世界的地图了。

    左上角是X值最小，Y值最大。屏幕是X和Y值都是最小的。这一点转换关系需要明白，否则Y轴的方向都反了。

    如果切图不是从左上角开始的，就得计算每一个分辨率下面的左上角和右下角所处的行和列，就可以知道行和列的范围。同理，可计算当前可视区域的行和列。

    我们如果知道行列以及分辨率等级，就很容易知道这个瓦片的地址。，这里的x代表参数行数，y代表列数，z代表分辨率等级。

    Google这种图片地址属于非常好计算，幸好也是非常普遍的。比较难的，算是微软的，行列以及分辨率等级计算都差不多，难的是想x，y，z参数不知道怎么计算的。

,这个图片地址，这个1232不知道怎么来的。不过幸好找到一个论文才弄明白，《利用BingMaps地图切片实现网络地图服务》，地址

　　目前，有很多WebGIS开发包，ArcGIS API for JS、OpenLayers、LeafLetjs等为我们从事WebGIS开发的人封装了很多强大的功能。我们很方便的使用这些库的时候，也让我们忽略了很多原理性的东西。

比如说，我之前一直在被一个问题困扰，就是如何将一个点正确的显示在浏览器屏幕的正确的位置，即经纬度坐标和屏幕坐标的转换问题。直到我看到一位大牛的博客（），里面对WebGIS的原理进行了深入的讲解。看了他的文章后一直觉得，我写这篇文章是多余的。但是大神的文章里面并没有详细讲解原理的代码实现。个人觉得还是很有必要通过实现相应功能的方式了解其原理，而且实现时还是遇到了不少的问题，所以还是写了这篇文章。

　以上的瓦片地图为例，服务中有几个比较关键的使用到的参数。

• Resolution：每一个缩放级别下1像素代表的地图单位（投影坐标）

通过观察arcgis地图的瓦片组织方式，

通过python程序将一定缩放等级的瓦片保存到本地 我只抓取了0-5级别的瓦片，并按照arcgis瓦片的保存方式存储。

展会页面只含有一个canvas元素作为地图容器。

在config.js里面保存了相关的配置信息

//当前窗口显示的范围
 

//左上角开始的行列号
 

//计算左上角偏移像素