Web（瓦片）地图的工作原理

Posted 2022-05-31 aspook

【译者按：在看MapBox Guides文档时，看到这篇 How do web maps work?，这篇文档通俗易懂地阐述了Web地图是如何工作的，其实更偏向讲瓦片地图的工作原理，鉴于之前很多人不了解地图切片的原理，因此简单翻译一下，由于源自MapBox文档，文中免不了涉及MapBox的相关术语，但不会影响我们的理解】

 

在MapBox上打开的Web地图或在你自己的网站上嵌入的Web地图，其实是由很多部件共同工作的结果，包括MapBox地图服务器，遍布世界各地的分布式系统以及在你的浏览器中运行的客户端代码等。

这篇指南文档将向你介绍单幅的瓦片地图是如何在一起工作并生成Web地图的。

连续的空间和细节

Web地图现在非常普遍，以至于人们经常忘记它区别于普通的纸质城市地图、世界地图的优点。当你浏览一个Web地图的时候，就像在一个很大的连续的图片上漫游，你可以通过在地图上平移（移动距离可能会比较远）来自由地查看纽约、巴黎甚至东京。通过放大和缩小Web地图，你会从国家轮廓看到越来越多的细节，如城市街道和建筑物。

Web地图可以在一个连续的空间系统内为你导航，而不是从这个国家直接跳跃到那个州或者某个城市。尽管名字叫做Web地图，但这个概念同样适用于许多移动地图并且在网上有了越来越多的Web地图，这使得纸质地图逐渐孤立。然而，从现在起，我们称这种概念为Web地图。

瓦片地图和缩放级别

一幅精确到街道级别的世界地图图片宽度为数以百万计的像素，由于这些数据太大了，从而导致无法一次下载并且在内存里也无法一次都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代码嵌入到你的网页中。

<img src='https://a.tiles.mapbox.com/v4/examples.map-i86l3621/0/0/0.png?access_token=pk.eyJ1IjoidHJpc3RlbiIsImEiOiJuZ2E5MG5BIn0.39lpfFC5Nxyqck1qbTNquQ' />

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

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

1.首先确定能够覆盖曼哈顿且能够详细显示中央公园的瓦片的z/x/y坐标。

2.在网页中添加一系列<img>标签并使用CSS以便在网格中将它们定位到合适的位置。

3.为地图添加缩放按钮及拖拽平移等事件的响应处理，然后再次开始这些处理过程。

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

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

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

原文档地址：https://www.mapbox.com/guides/how-web-maps-work/