WebGIS 瓦片地图引擎实现之——地图瓦片加载计算原理介绍

1. 背景

1.1 地图瓦片之前

在地图瓦片技术使用之前，用户使用在线地图，一般都是客户端把将要显示的地理范围传送到服务端，服务器端将地理范围内的地理数据都查询出来，然后在服务端按照预先定义的专题地图的配置样式渲染成地图图片，再返回给客户端浏览，这也就是 OGC（地理信息联盟）标准的 WMS（Web Map Service）服务。

在 Web 时代 WMS 服务有几个大的缺点，由于用户浏览的地理范围是不确定性质的，获取范围内的数据是不确定，有时候数据会很大，数据从服务端的数据库到客户端的过程中，服务器 IO 操作和网络传输就很耗时；服务端获取数据后会进行数据渲染出图，占用大量 CPU 资源；用户频繁操作地图，服务端出图传输给客户端浏览过程中耗时非常长。

1.2 什么是地图瓦片

为了解决这些问题，谷歌地图率先提出了 TMS（Tile Map Service）服务，预先在服务端分层（金字塔模型）切片全量渲染，提出了 Web-Mercator 投影，按照地图不同的显示级别切成了瓦片坐标的图片。

用户每次访问时候，根据当前的地理范围映射到瓦片坐标的图片索引（XYZ），然后从后端请求这些图片索引，客户端拿到图片后按照顺序依次渲染图片即可，整个过程中用户体验有明显的提升。很快 TMS 服务成为了 WebGIS 工业标准，在该技术的推动下，OGC（地理信息联盟）也发布了基于 TMS 的 WMTS 服务规范，国内外很多地图厂商也基于该技术生产了自己的切片地图服务。

1.3 栅格瓦片与矢量瓦片

栅格瓦片就是上述所说的地图瓦片，只是瓦片的数据形式是图片，以矢量数据组织的瓦片是矢量瓦片。栅格瓦片技术使用很广泛，也存在一些问。瓦片预切图时间长，数据更新不方便，按金字塔模型进行切图很耗时，每进入下一级别图片成 2^zoom 指数级别增加；服务端资源要求高，切片过程需要极大服务端渲染和切图的计算资源，存储数据冗余，在存储了原始数据外，还存储了冗余的切片数据。栅格瓦片地图样式单一，因为最终渲染是图片数据，不能满足自定义地图风格。

因上面这些问题 Mapbox 提出了 MVT 矢量瓦片切片技术，地图定制化极为方便，该技术目前最受欢迎，除二维地理数据切片外三维数据也深受此技术的影响诞生了 3DTiles