文章版權由作者李曉暉和博客園共有，若轉載請於明顯處標明出處：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/
如果您覺得本文確實幫助了您，可以微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^
