在我们很方便的用各类JS API实现在线地图加载的同时，却也让我们忽略了很多原理性的东西。前几日还因为项目需要下载影像地图，但是实在不忍用”某某电子地图下载工具”的广告轰炸各群来骚扰各位群友。于是撸起袖子，自己干！

做这事之前要分好以下几个技术步骤：

STEP1 搞清楚瓦片数据在WEBGIS中的组织结构。

STEP2找到屏幕坐标与地理坐标（实际坐标）的换算关系。

STEP3根据地理范围换算出瓦片行列号。

STEP4前端绘制瓦片。

“瓦片数据在WEBGIS中的组织结构”

我们在访问高德地图或者百度地图的时候，会发现游览器是一块一块加载地图的，如果网络条件不佳，在地图中还会出现空白块的情况。在WEBGIS领域中，我们通常把这个过程称为”加载瓦片”的过程，地图瓦片的实质就是一张张固定宽高的图片，当游览器加载地图的时候，其实质也是游览器在向远程服务器请求这些图片的过程。

      既然加载在线地图是一个请求服务器图片资源的过程，我们可以通过网络抓包工具看到请求地址，如下图所示就是在线地图请求的过程。

（以Arcgis Online地图为例：

http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer）

可以看到，其地图图片的请求地址为

https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/16/26785/54862

经过平移地图，缩放地图等操作，可以发现这个请求地址变化的地方就是最后三个参数，不难发现第一个参数和当前地图显示的级别相对应。那么后面两个参数该如何理解呢？

我们可以这么想象，把一张矩形地图（完整地图），按照一定的规律（按照切图原点，切图范围，瓦片大小），分成了很多个大小相同的矩形，那么每一个矩形所在的位置就可以用行列号的形式来表达。按照这样的逻辑来看，剩余的那两个参数应该就是上面所说的行列号了。

下面我们将上述总结的规律抽象为数学概念就可以把三参数分别理解为ZXY值，这是一个三维的概念，Z值用来表达地图层级，而XY表示某个层级内的瓦片平面，X为横轴坐标即为列，Y为纵轴坐标即为行。

       如果我们想看到更多的地图细节，可以使用不同的缩放层级来达到目的。缩放的层级越高，显示细节也会相应增加。

       例如，当缩放层级为0时，整个地图就是一张瓦片，按照上文的描述，它的数学坐标就是0/0/0，这一张瓦片覆盖了整个世界范围。如下图所示：

       当缩放级别变为1时，把缩放级别为0时的那张瓦片分割成四个相等的方块，其中坐标为1/0/0和1/1/0的两块覆盖北半球，坐标为1/0/1和1/1/1的两块覆盖南半球。如下图所示：

       由此可总结出如下规律：

地图层级为0时，有一张瓦片；地图层级为1时，有4张瓦片；地图层级为2时，有16张瓦片；也就是说当前层级的一张瓦片会在下一层级被分割为4张瓦片。即可由计算公式2^2n（其中n为层级）计算出一个层级下有多少张瓦片。如下图所示：

       其实，在服务器环境下保存的瓦片图片目录结构也如下图所示：

        当我们在前端请求瓦片时，就是在找到这样的目录结构以致找到对应位置的瓦片图片。

“ 本期文章附带源码下载地址”

按照以上论述，附赠利用python爬取瓦片代码：链接:http://pan.baidu.com/s/1jHDcYf8  

密码:joj9

本文转自微信公众号:OpenGiser的文章