（六）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/

                                                                  若是您以爲本文確實幫助了您，能夠微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^