地图瓦片是包含了一系列比例尺、一定地图范围内的地图切片文件。地图瓦片按照金字塔结构组织，每张瓦片都可通过级别、行列号唯一标记。在平移、缩放地图时，浏览器根据金字塔规则，计算出所需的瓦片，从瓦片服务器获取并拼接。地图瓦片，是一种改善地图浏览用户体验的优化策略。

随着测绘技术的发展，地图数据的体量越来越大，一般情况下，电子地图生成地图瓦片（以下简称切图）少则需要几天，多则一个月乃至更长时间。如何才能高效地生成地图瓦片，是众多技术人员共同关心的问题。

瓦片地图和缩放级别

一幅精确到街道级别的世界地图图片宽度为数以百万计的像素，由于这些数据太大了，从而导致无法一次下载并且在内存里也无法一次都hold住。实际上，Web地图由许多小的正方形的图片组成，这些小图片称作瓦片。瓦片的大小一般为256*256像素，这些瓦片一个挨一个并列放置以组成一张很大的看似无缝的地图。

如果我们想看到更多的地图细节，如想了解国家轮廓级别的地图与街道级别地图的不同，可以使用不同的缩放级别达到目的。缩放级别越高，显示地图的物理尺寸和细节表现也会相应增加。

为了组织如此多的地图瓦片，Web地图使用了一个简单的坐标系统。每一个瓦片都有一个z坐标来表示其缩放级别，还有一个x坐标和一个y坐标用来表示该瓦片在当前缩放级别下的网格内的位置，如：z/x/y。

第一张瓦片在Web地图系统中的坐标为0/0/0，此时缩放级别为0，只有一张瓦片并覆盖了整个世界的范围。

当缩放级别为1时，把缩放级别为0时的那张瓦片分割成四个相等的方块，其中坐标为1/0/0和1/1/0的两块覆盖北半球，坐标为1/0/1和1/1/1的两块覆盖南半球。

每一个缩放级别包含的瓦片数量为4的n次方，其中n为缩放级别。如：

缩放级别0包含1张瓦片；

缩放级别1包含4张瓦片；

缩放级别2包含16张瓦片；

依此类推。

由于瓦片数量是随缩放级别按指数增长的，因此每提高一个缩放级别会增加大量的地图细节，同时为了应付越来越多的瓦片，对带宽和存储空间的需求也会相应增加。

例如，一张缩放级别为15的地图，精确到可以看到城市建筑，大约需要11亿张瓦片才能覆盖整个世界，而缩放级别为17时，仅仅是增加了两个缩放级别，同样覆盖全世界却需要170亿张瓦片。

为什么要使用瓦片？

简单来说，因为瓦片地图可以很好的工作，所以Web地图使用瓦片。

1.瓦片地图缓存非常高效。如果你曾查看中央公园的地图而下载过曼哈顿的瓦片，当你需要显示泽西城的地图时，你的浏览器可以使用之前缓存的相同的瓦片，而不是重新再下载一次。

2.瓦片地图可以渐进加载。中央公园的瓦片会在曼哈顿地图边缘加载之前加载，你可以移动或缩放地图到某一个特定点，即使当前地图的边缘部分还没有加载完成。

3.瓦片地图简单易用。描述地图瓦片的坐标系统很简单，使得很容易在服务器、网络、桌面或移动设备上实现技术集成。

地图客户端与瓦片

让我们来展示一下中央公园的地图。因为地图瓦片是在网络上的图片，你需要把如下HTML代码嵌入到你的网页中。

你将会在浏览器中看到坐标为0/0/0的瓦片。

你需要进行许多缩放才能定位到中央公园。通过一些HTML、CSS和JavaScript代码，你可以按如下步骤显示中央公园的地图：

幸运的是，你已不需要再做上面这些，这是地图客户端做的事情。地图客户端通常是一个JavaScript库，这个库可以帮你找到需要显示的瓦片，帮助你从地图服务器下载并将它们显示到地图的合适位置。MapBox JavaScript API就是一种地图客户端，当然你还可以使用其他的地图客户端。

地图客户端需要知道你要显示的中心位置以及缩放级别，你可以输入一个位置的坐标然后MapBox.js就能找到你需要的瓦片。

中央公园的经纬度为40.783和-73.966，且查看该公园的最佳缩放级别为13。我们可以使用setView([40.783, -73.966], 13)方法告诉MapBox.js将中央公园的位置在地图上居中并缩放到13的级别。显示效果如下图：

当分析谷歌瓦片的时候会发现，在高纬度区域单位像素表示的经度跨度大，低纬度的跨度小，这是因为谷歌地图采用了非线性拉伸方法。具体原因还未深究，或许是因为低纬度需要表现更好的细节吧，先上一些代码：

经度到像素X值