什么是地图瓦片?
地图瓦片是包含了一系列比例尺、一定地图范围内的地图切片文件。地图瓦片按照金字塔结构组织,每张瓦片都可通过级别、行列号唯一标记。在平移、缩放地图时,浏览器根据金字塔规则,计算出所需的瓦片,从瓦片服务器获取并拼接。地图瓦片,是一种改善地图浏览用户体验的优化策略。
随着测绘技术的发展,地图数据的体量越来越大,一般情况下,电子地图生成地图瓦片(以下简称切图)少则需要几天,多则一个月乃至更长时间。如何才能高效地生成地图瓦片,是众多技术人员共同关心的问题。
瓦片地图和缩放级别
一幅精确到街道级别的世界地图图片宽度为数以百万计的像素,由于这些数据太大了,从而导致无法一次下载并且在内存里也无法一次都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代码,你可以按如下步骤显示中央公园的地图:
- 首先确定能够覆盖曼哈顿且能够详细显示中央公园的瓦片的z/x/y坐标。
- 在网页中添加一系列<img>标签并使用CSS以便在网格中将它们定位到合适的位置。
- 为地图添加缩放按钮及拖拽平移等事件的响应处理,然后再次开始这些处理过程。
幸运的是,你已不需要再做上面这些,这是地图客户端做的事情。地图客户端通常是一个JavaScript库,这个库可以帮你找到需要显示的瓦片,帮助你从地图服务器下载并将它们显示到地图的合适位置。MapBox JavaScript API就是一种地图客户端,当然你还可以使用其他的地图客户端。
地图客户端需要知道你要显示的中心位置以及缩放级别,你可以输入一个位置的坐标然后MapBox.js就能找到你需要的瓦片。
中央公园的经纬度为40.783和-73.966,且查看该公园的最佳缩放级别为13。我们可以使用setView([40.783, -73.966], 13)方法告诉MapBox.js将中央公园的位置在地图上居中并缩放到13的级别。显示效果如下图:
谷歌瓦片像素点与经纬度的对应关系
当分析谷歌瓦片的时候会发现,在高纬度区域单位像素表示的经度跨度大,低纬度的跨度小,这是因为谷歌地图采用了非线性拉伸方法。具体原因还未深究,或许是因为低纬度需要表现更好的细节吧,先上一些代码:
经度到像素X值
double lngToPixel(double lng, int zoom) {
return (lng + 180) * (256 << zoom) / 360;
}
像素X到经度
double pixelToLng(double pixelX, int zoom) {
return pixelX * 360 / (256 << zoom) - 180;
}
纬度到像素Y
double latToPixel(double lat, int zoom) {
double siny = sin(lat * PI / 180);
double y = log((1 + siny) / (1 - siny));
return (128 << zoom) * (1 - y / (2 * PI));
}
像素Y到纬度
#define E 2.7128 // 当然还可以更精确
double pixelToLat(double pixelY, int zoom) {
double y = 2 * PI * (1 - pixelY / (128 << zoom));
double z = power(E, y);
double siny = (z - 1) / (z + 1);
return asin(siny) * 180 / PI;
}
从以上代码可以看出:(像素横向坐标从左至右,纵向从上至下)
1)在同一层(zoom),单位像素表现的经度跨度是相同的;
2)在同一层(zoom),单位像素表现的纬度跨度是不相同的;
3)维度范围为-85~+85,;
这样由瓦片的(x,y,z)和像素上的位置,就可以计算出任一点的经纬度了,反过来可以通过经纬度计算瓦片索引和像素位置了。
同样也可用于计算图片的距离分辨率。当然,从以上代码和分析也可以看出,即使是同一张瓦片,图中不同区域的距离分辨率也是不同的。
OpenLayers是干什么的?
要想在浏览器中显示交互式的地图很难,因为浏览器默认的只是显示静态的图片,如PNG、JPEG等格式,要交互式很难,因为每一个点击和缩放,地图都要做出正确的反应。
OpenLayers是一个JavaScript 类库包,主要是用于开发Web GIS客户端。这就是说,要先在网页中引用OpenLayers的JavaScript文件以及相应的css样式表和资源,根据其提供的功能接口,直接调用。所以关键是了解其提供的接口,这是使用一个类库的关键!如果想要优化相应的功能或者定制化,就要深入地了解其实现细节了,这需要有熟练的JavaScript功底。
OpenLayers支持Google Maps、Yahoo Map、微软Virtual Earth等资源,可以通过WMS服务调用其它服务器上的空间数据,通过WFS服务调用空间服务。在操作方面,OpenLayers 除了可以在浏览器中实现地图浏览的基本效果,如放大、缩小、平移等操作,进行选取面、选取线、要素选择、图层叠加等操作。