menu
more_vert
【科普】Web(瓦片)地图的工作原理

作者:dayu

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

为了组织如此多的地图瓦片,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代码嵌入到你的网页中。

<imgsrc=‘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库,这个库可以帮你找到需要显示的瓦片,帮助你从地图服务器下载并将它们显示到地图的合适位置。MapBoxJavaScriptAPI就是一种地图客户端,当然你还可以使用其他的地图客户端。

地图客户端需要知道你要显示的中心位置以及缩放级别,你可以输入一个位置的坐标然后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/

原文:http://blog.csdn.net/ahence/article/details/44057681

【科普】Web(瓦片)地图的工作原理

原文地址:http://www.cnblogs.com/tinaluo/p/7521578.html