你期待的UTF-Grid——瓦片地图的前世今生

本周GeoHey数据可视化服务又添新功能——UTF-Grid帮你制作交互地图。 GeoHey能实现这一功能也是站在了巨人的肩膀上,想了解关于UTF-Grid的种种,还是先回顾一下瓦片地图的前世今生。

从古巴比伦黏土地图到今天的电子地图,从哥伦布航海图到现代化的卫星导航,地图的历史凝聚着人类的好奇和智慧,也掺杂着血腥和欲望。地图的历史足够厚重,因为地图关联着政治、军事、经济的沉浮;地图的历史也足够精彩,因为地图是为满足需求,伴随科学和技术的发展而发展起来的。

相当长一段时间内,地图都是小部分人的游戏。军事家用地图指挥战役;航海家用地图指引方向;国家用地图标记领地... 直到计算机技术普及,地图技术开始服务于更多的领域。但始终是,专业的人,在专业领域,做着与地图有关的专业的事。直到瓦片地图的诞生。

瓦片地图的诞生

地图数据通常体量较大,需要充足的带宽和数据渲染能力。瓦片地图诞生以前,地图多在局域网的桌面软件中使用。互联网的发展,催生了通过浏览器使用地图的需求,于是在1999年,出现了WMS(Web Map Service)这样的解决方案。在浏览器这一端,没有地图的概念,但浏览器天生就是为了显示文本和图片。WMS的设计是,在服务器端把地图渲染成图片,浏览器端显示地图图片。地图图片大小根据浏览器视窗大小来定。 WMS大大推进了互联网地图的进程。问题是,WMS根据浏览器视窗大小每次生成一大张图片,对于后端渲染和网络传输都是挑战,效率低下。紧接着就有了WMS-C(Cached)的思想,通过缓存地图瓦片提高效率。在工程实践方面更胜一筹的Google成为这一思想的最佳实践者。2005年,Google地图上线,通过高效的瓦片地图技术,让全球用户轻而易举的享受到了地图的福利。Google地图采用的Web Mecator投影和瓦片分级切割方案,也成为目前互联网地图事实上的标准。紧接着,Google地图又新增了路网服务、实时路况、街景地图和Google地球,互联网地图的蓬勃发展就此开始。

瓦片地图的原理

使用互联网地图时,我们看到的是一张铺满整个屏幕的大的地图图片。实际上,这张大的图片是多个尺寸相同(通常是256*256像素)的小图片按照既定规则无缝拼接而成的,这些小图片就是瓦片。瓦片按照如下图所示的金字塔结构组织,每张瓦片都可通过级别、行列号唯一标记。在平移地图、缩放地图时,浏览器根据金字塔规则,计算出所需的瓦片,从瓦片服务器获取并拼接。 由于瓦片是静态的图片,可预先生成,通过缓存和CDN技术,瓦片服务器可提供高效的瓦片读取服务。此外,浏览器并行获取和显示多张小图片,比获取和显示一张大图片要高效的多。显示地图变成和显示图片一样简单,这也是互联网地图能够承载亿级规模用户的原因。

瓦片地图的进化

以图片为介质的瓦片(栅格瓦片)打开了互联网地图的大门,互联网地图得以迅速普及。但是,随着地图的移动化和应用的逐渐深入,栅格瓦片至少遇到了两个问题:

  • 图片占用带宽和存储都较大,不利于地图在移动设备的应用;
  • 图片无法交互。

受网络带宽开销和存储空间的限制,栅格瓦片地图在移动端一开始就显现出先天不足。这促使在移动端,使用矢量瓦片替代栅格瓦片。矢量瓦片采用和栅格瓦片相同的分级切割方案,所不同的是,瓦片数据以矢量形式存在。矢量瓦片体积小,可高度压缩,占用的存储空间比栅格瓦片要小上千倍。一方面减小网络带宽消耗,另一方面使地图离线成为可能。

目前,在浏览器端,矢量瓦片也在逐渐成为互联网地图的主流技术。但这并不是说栅格瓦片将退出历史舞台。互联网地图数据更新不频繁,单个瓦片内需要显示的地物数量和种类有限,矢量瓦片可预先生成,进行局部更新的代价也很小。矢量瓦片并不适合数据更新频繁,数据量大,渲染方式复杂多样的场景。

可交互的栅格瓦片

以地理大数据为目标的GeoHey,面对复杂多样且多变的用户数据,在一开始就选择依托服务器端能力处理空间数据。GeoHey数据可视化服务,就是根据输入配置参数,把用户数据在服务器端渲染成图片。在很多应用场景中,需要查看空间数据的属性信息。由于栅格瓦片无法保留数据的空间特征,瓦片中的点、线、面失去了交互能力。那么,如何显示百万量级的地块数据,又能让地块具有交互能力呢?

在本周更新中,GeoHey数据可视化服务,增加了UTF-Grid能力,用以为栅格瓦片提供交互能力。UTF-Grid为何物?我们下次分解。先来体验下UTF-Grid开来的神奇力量吧!

[鼠标在地图上随意移动即可 全屏体验]

另,欢迎加入GeoHey技术支持QQ群:164183186

欢迎从GeoHey获取地理和位置相关的数据、知识、服务

访问网站 http://geohey.com

联系我们 contact@geohey.com

长按关注公众号

gispace

继续阅读此作者的更多文章

北京