GIS地图瓦片、坐标转换基本概念

什么是地图瓦片？

地图瓦片是包含了一系列比例尺、一定地图范围内的地图切片文件。地图瓦片按照金字塔结构组织，每张瓦片都可通过级别、行列号唯一标记。在平移、缩放地图时，浏览器根据金字塔规则，计算出所需的瓦片，从瓦片服务器获取并拼接。地图瓦片，是一种改善地图浏览用户体验的优化策略。

随着测绘技术的发展，地图数据的体量越来越大，一般情况下，电子地图生成地图瓦片（以下简称切图）少则需要几天，多则一个月乃至更长时间。如何才能高效地生成地图瓦片，是众多技术人员共同关心的问题。

瓦片地图和缩放级别

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

谷歌瓦片像素点与经纬度的对应关系

当分析谷歌瓦片的时候会发现，在高纬度区域单位像素表示的经度跨度大，低纬度的跨度小，这是因为谷歌地图采用了非线性拉伸方法。具体原因还未深究，或许是因为低纬度需要表现更好的细节吧，先上一些代码：

经度到像素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 除了可以在浏览器中实现地图浏览的基本效果，如放大、缩小、平移等操作，进行选取面、选取线、要素选择、图层叠加等操作。