客户端地图拼图算法解析

小灰灰 2022-08-25 09:26 205阅读 0赞

**概述：**主要是阐述如何将瓦片地图图片拼接成完整地图的一些概念以及相关算法。

**基本概念：**

*  **地图瓦片地址**：[http://mt2.google.cn/vt/lyrs=m@167000000&hl=zh-CN&gl=cn&x=420&y=193&z=9&s=Galil][http_mt2.google.cn_vt_lyrs_m_167000000_hl_zh-CN_gl_cn_x_420_y_193_z_9_s_Galil]

![瓦片图片][http_mt2.google.cn_vt_lyrs_m_167000000_hl_zh-CN_gl_cn_x_420_y_193_z_9_s_Galil]

现在就是要将一张张这类的地图瓦片，在客户端拼接成一幅完整的地图。

瓦片大小为：256x256。

url中关键参数解析：

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:center"><strong>参数</strong></td> 
   <td style="text-align:center"><strong>描述</strong></td> 
  </tr> 
  <tr> 
   <td>mt2.google.cn</td> 
   <td>Google瓦片服务服务器，可以尝试mt1.google.cn依然有效。Google提供多台瓦片服务器，减轻服务器负载，提高网络访问效率。</td> 
  </tr> 
  <tr> 
   <td>x</td> 
   <td>瓦片的横向索引，起始位置为最左边，数值为0，向右+1递增。</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>瓦片的纵向索引，起始位置为最上面，数值为0，向下+1递增。</td> 
  </tr> 
  <tr> 
   <td>z</td> 
   <td>地图的级别，以Google为例，最上一级为0，向下依次递增。</td> 
  </tr> 
 </tbody> 
</table>

*  **地图投影：**Web墨卡托——互联网地图通用的地图投影方式，将椭圆形地图投影成平面上的正文形，欲了解详情请baidu之，如无特殊说明本文所指均为Web墨卡托投影下。
 *  **Bounds(地图范围)：**\[ -20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892\]，单位为米，20037508.3427892表示地图周长的一半，以地图中心点做为（0，0）坐标。
 *  **Levels：**地图的级别，例如：0……22。
 *  **Resolutions：**分辨率数组，与级别相对应，即一个级别对应一个分辨率，分辨率表示当前级别下单个像素代表的地理长度。

Resolutions[n] = 20037508.3427892 * 2 / 256 / (2^n)

*  **Center：**地图显示中心点。
 *  **Level：**地图显示级别。
 *  **viewSize：**地图控件窗口的大小。

根据已知地图中心点、显示级别可以将地图显示范围计算出来:

viewBounds = [Center.x - Resolutions[l]*viewSize.width/2, Center.y - Resolutions[l]*viewSize.height/2, Center.x + Resolutions[l].viewSize.width/w, Center.y + Resolutions[l].viewSize.height/h]

**地图切图方式：**

一幅地图由4^n个256的正方形组成，n为级别

例如：第0级为4^0个，即世界地图由一个256图片表示。

![lyrs_m_169000000_hl_zh-CN_gl_cn_x_0_y_0_z_0_s_Galil][]

第1级世界地图应由4^1（4）个256图片组成，也就是将世界地图（上一级的单个图片）等分成4块256图片。

往下每一级依此类推……

**拼图算法剖析：**

**　1、计算瓦片url**

要想出图就发须知道地图控件可视范围起始点瓦片索引、末尾瓦片索引，中间区域的瓦片索引循环遍历即可得出。

下面看看如果计算出起始点、末尾瓦片url索引：

已知：l(缩放级别)、bounds(地图范围——\[ -20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892\])、viewBounds(地图控件可视范围)、分辨率（Resolutions\[l\]）、瓦片像素宽高（256）。

未知：startX（视图起始瓦片X方向索引）、startY（视图起始瓦片Y方向索引）、endX（视图未尾瓦片x方向索引）、endY（视图未尾瓦片y方向索引）。

求解：

startX = floor(((viewBounds.leftBottom.x - bounds.leftBottom.x) / Resolutions[l]) / 256);
    startY = floor(((viewBounds.leftBottom.y - bounds.leftBottom.y) / Resolutions[l]) / 256);
    endX = floor(((viewBounds.rightTop.x - bounds.rightTop.x) / Resolutions[l]) / 256);
    endY = floor(((viewBounds.rightTop.y - bounds.rightTop.y) / Resolutions[l]) / 256);

firstTileUrl(起始瓦片Url) = http://\*\*\*\*\*\*\*\*\*\*?x=startX&y=startY&z=l;

endTileUrl(末尾瓦片Url) = http://\*\*\*\*\*\*\*\*\*\*?x=endX&y=startY&z=l;

中间部分的url循环遍历即可得出。

好啦！组成视图所有瓦片的url都已得出。下面就是要解决将这些瓦片放到哪的问题。

**　2、计算瓦片放在地图控件上的位置**

先分析一下：其实只要将起始位置的瓦片像素位置算出来就可以了，由于瓦片像素大小为256，后面的各瓦片位置也就明了了。

所以这里只探讨一下起始瓦片的像素位置。

已知：startX（视图起始瓦片X方向索引）、startY（视图起始瓦片Y方向索引）、分辨率（Resolutions\[l\]）、瓦片像素宽高（256）、bounds(地图范围——\[ -20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892\])、viewBounds(地图控件可视范围)。

未知：startTileX（起始瓦片左上角X方向地理坐标）、startTileY（起始瓦片左上角Y方向地理坐标）、distanceX（瓦片左边与地图控件左边相距的像素距离）、distanceY（瓦片上边与地图控件上边相距的像素距离）。

求解：

startTileX = bounds.leftBottom.x + (startX * 256 * Resolutions[l]);
    startTileY = bounds.rightTop.y - (startY * 256 * Resolutions[l]);
    distanceX = (viewBounds.leftBottom.x - startTileX) / Resolutions[l];
    distanceY = (startTileY - viewBounds.rightTop.y) / Resolutions[l]

公式不是最简，以方便理解，相信看官此时已经知道起始瓦片在地图控件中的摆放位置了——设地图控件起始像素位置为（0，0），那么此瓦片的像素的位置就是（-distanceX、-distanceY）。其它瓦片依据256像素宽高的关系依次而出。

到此已经算出了各瓦片的url以及它们应该摆放的位置，准备工作已完成，直接帖图即可完成出图工作。

算法可应用于Google、Baidu、Yahoo、Bing等web墨卡托投影的地图瓦片。

[http_mt2.google.cn_vt_lyrs_m_167000000_hl_zh-CN_gl_cn_x_420_y_193_z_9_s_Galil]: http://mt2.google.cn/vt/lyrs=m@167000000&hl=zh-CN&gl=cn&x=420&y=193&z=9&s=Galil
[lyrs_m_169000000_hl_zh-CN_gl_cn_x_0_y_0_z_0_s_Galil]: http://mt0.google.cn/vt/lyrs=m@169000000&hl=zh-CN&gl=cn&x=0&y=0&z=0&s=Galil