（六）WebGIS中地图瓦片在Canvas上的拼接显示原理

文章版权由做者李晓晖和博客园共有，若转载请于明显处标明出处：http://www.cnblogs.com/naaoveGIS/。

1.前言

在以前的五个章节中，咱们在第一章节里介绍了WebGIS的基本框架和技术，第二章节里介绍了什么是瓦片行列号以及计算它的缘由，第三章节里介绍了如何经过地理范围计算出这个范围内瓦片的行列号，第四和第五章节里介绍了在获得瓦片行列号后如何得到离线和在线地图的URL，这个章节里，咱们将介绍在经过URL获得瓦片后，如何将其显示在浏览器相对应的地方，拼接出整块地图。

2.左上角瓦片起始点屏幕坐标的计算

在第三章节中，我介绍了对于左上角瓦片起始点屏幕坐标的换算原理和方法，这里我再次给出这个公式：

offSetX = ((realMinX- minX )/resolution);

offSetY = ((maxY - realMaxY )/resolution);

英文表明以下意思：

realMinX、realMaxY:请求的左上角瓦片对应的真实地理坐标（geoX,geoY）。

minX、maxY:屏幕可视范围的左上角对应的真实地理坐标（geoScreenX,geoScreenY）。

resolution:当前地图级别里屏幕一像素表明的实际地理单位长度。

由于可视范围里，左上角屏幕坐标为（0,0）。

因此offSetX和offSetY便为左上角瓦片的起始点屏幕坐标（offSetX，offSetY）。

这里若是你们对以上参数的换算有不了解之处，请查看此系列中的第三章节——经过地理范围换算出行列号。

3．任意瓦片屏幕坐标的计算

一样，我首先给出相关的公式：

coord.x = offSetX + ( clipX - fixedTileLeftTopNumX)* tileSize;

coord.y = offSetY + ( clipY - fixedTileLeftTopNumY)* tileSize;      

英文表明以下意思：

offSetX、offSetY：最左上角瓦片的屏幕坐标

clipX、clipY：目前瓦片的行列号

fixedTileLeftTopNumY、fixedTileLeftTopNumY：最左上角瓦片的行列号

tileSize：瓦片大小（一张瓦片的像素）

coord:目前瓦片的屏幕坐标

这里的fixedTileLeftTopNumY和fixedTileLeftTopNumY，在第三章里我一样介绍了如何得到。

4.瓦片拼接流程

         

经过流程图能够看到，瓦片的拼接须要经过遍历X轴和Y轴。依次获取瓦片屏幕坐标后拼接。这里涉及到X轴和Y轴时的遍历个数，其实就是请求到的全部瓦片，在X轴上的个数以及Y轴上的个数。一样，在第三章里我对这个个数的换算有比较详细的讲解，这里再也不累述。

5.前端地图显示总体流程

          

获得的地图效果图以下：

               

6.总结

至此，WebGIS中前端地图显示系列就告一段落了。我相信你们在这个系列里，或多或少都对WebGIS有了新的认识。咱们知道图像分为栅格图像和矢量图像，这里我仅仅只是介绍了栅格图像在WebGIS中的加载，那么矢量图像怎么加载呢？一样，有了这些原理知识，咱们该如何设计栅格图像类，以及之后的矢量图像类等等呢？在下一个系列里，咱们将开始探索WebGIS中核心类的设计。但愿你们持续关注。

 

 

高中时，看别人抽烟，总以为是为了装
大学时，室友有时候躲在阳台上抽闷烟，那时候以为抽烟的人可能内心面有点故事
上研时，一个研友常常夜深人静里一边敲代码一边抽烟，开始以为用抽烟来提神是能够理解的
工做到如今，看到身边的朋友抽烟，再也不想着这是为了驱散苦、释放乐、缓解疲、扮深沉。抽烟只是一个简单的事情而已

                                                          -----欢迎转载，但保留版权，请于明显处标明出处：http://www.cnblogs.com/naaoveGIS/

                                                                  若是您以为本文确实帮助了您，能够微信扫一扫，进行小额的打赏和鼓励，谢谢 ^_^