【譯者按：在看MapBox Guides文檔時，看到這篇 How do web maps work?，這篇文檔通俗易懂地闡述了Web地圖是如何工作的，其實更偏向講瓦片地圖的工作原理，鑒於之前很多人不了解地圖切片的原理，因此簡單翻譯一下，由於源自MapBox文檔，文中免不了涉及MapBox的相關術語，但不會影響我們的理解】
在MapBox上打開的Web地圖或在你自己的網站上嵌入的Web地圖，其實是由很多部件共同工作的結果，包括MapBox地圖服務器，遍布世界各地的分布式系統以及在你的瀏覽器中運行的客戶端代碼等。
這篇指南文檔將向你介紹單幅的瓦片地圖是如何在一起工作並生成Web地圖的。
連續的空間和細節
Web地圖現在非常普遍，以至於人們經常忘記它區別於普通的紙質城市地圖、世界地圖的優點。當你瀏覽一個Web地圖的時候，就像在一個很大的連續的圖片上漫游，你可以通過在地圖上平移（移動距離可能會比較遠）來自由地查看紐約、巴黎甚至東京。通過放大和縮小Web地圖，你會從國家輪廓看到越來越多的細節，如城市街道和建築物。
Web地圖可以在一個連續的空間系統內為你導航，而不是從這個國家直接跳躍到那個州或者某個城市。盡管名字叫做Web地圖，但這個概念同樣適用於許多移動地圖並且在網上有了越來越多的Web地圖，這使得紙質地圖逐漸孤立。然而，從現在起，我們稱這種概念為Web地圖。
瓦片地圖和縮放級別
一幅精確到街道級別的世界地圖圖片寬度為數以百萬計的像素，由於這些數據太大了，從而導致無法一次下載並且在內存里也無法一次都hold住。實際上，Web地圖由許多小的正方形的圖片組成，這些小圖片稱作瓦片。瓦片的大小一般為256*256像素，這些瓦片一個挨一個並列放置以組成一張很大的看似無縫的地圖。
如果我們想看到更多的地圖細節，如想了解國家輪廓級別的地圖與街道級別地圖的不同，可以使用不同的縮放級別達到目的。縮放級別越高，顯示地圖的物理尺寸和細節表現也會相應增加。
為了組織如此多的地圖瓦片，Web地圖使用了一個簡單的坐標系統。每一個瓦片都有一個z坐標來表示其縮放級別，還有一個x坐標和一個y坐標用來表示該瓦片在當前縮放級別下的網格內的位置，如：z/x/y。
第一張瓦片在Web地圖系統中的坐標為0/0/0，此時縮放級別為0，只有一張瓦片並覆蓋了整個世界的范圍。
當縮放級別為1時，把縮放級別為0時的那張瓦片分割成四個相等的方塊，其中坐標為1/0/0和1/1/0的兩塊覆蓋北半球，坐標為1/0/1和1/1/1的兩塊覆蓋南半球。
每一個縮放級別包含的瓦片數量為4的n次方，其中n為縮放級別。如：
縮放級別0包含1張瓦片；
縮放級別1包含4張瓦片；
縮放級別2包含16張瓦片；
依此類推。
由於瓦片數量是隨縮放級別按指數增長的，因此每提高一個縮放級別會增加大量的地圖細節，同時為了應付越來越多的瓦片，對帶寬和存儲空間的需求也會相應增加。
例如，一張縮放級別為15的地圖，精確到可以看到城市建築，大約需要11億張瓦片才能覆蓋整個世界，而縮放級別為17時，僅僅是增加了兩個縮放級別，同樣覆蓋全世界卻需要170億張瓦片。
為什么要使用瓦片？
簡單來說，因為瓦片地圖可以很好的工作，所以Web地圖使用瓦片。
1.瓦片地圖緩存非常高效。如果你曾查看中央公園的地圖而下載過曼哈頓的瓦片，當你需要顯示澤西城的地圖時，你的瀏覽器可以使用之前緩存的相同的瓦片，而不是重新再下載一次。
2.瓦片地圖可以漸進加載。中央公園的瓦片會在曼哈頓地圖邊緣加載之前加載，你可以移動或縮放地圖到某一個特定點，即使當前地圖的邊緣部分還沒有加載完成。
3.瓦片地圖簡單易用。描述地圖瓦片的坐標系統很簡單，使得很容易在服務器、網絡、桌面或移動設備上實現技術集成。
地圖客戶端與瓦片
讓我們來展示一下中央公園的地圖。因為地圖瓦片是在網絡上的圖片，你需要把如下HTML代碼嵌入到你的網頁中。
<img src=‘https://a.tiles.mapbox.com/v4/examples.map-i86l3621/0/0/0.png?access_token=pk.eyJ1IjoidHJpc3RlbiIsImEiOiJuZ2E5MG5BIn0.39lpfFC5Nxyqck1qbTNquQ‘ />
你將會在瀏覽器中看到坐標為0/0/0的瓦片。
你需要進行許多縮放才能定位到中央公園。通過一些HTML、CSS和JavaScript代碼，你可以按如下步驟顯示中央公園的地圖：
1.首先確定能夠覆蓋曼哈頓且能夠詳細顯示中央公園的瓦片的z/x/y坐標。
2.在網頁中添加一系列<img>標簽並使用CSS以便在網格中將它們定位到合適的位置。
3.為地圖添加縮放按鈕及拖拽平移等事件的響應處理，然后再次開始這些處理過程。
幸運的是，你已不需要再做上面這些，這是地圖客戶端做的事情。地圖客戶端通常是一個JavaScript庫，這個庫可以幫你找到需要顯示的瓦片，幫助你從地圖服務器下載並將它們顯示到地圖的合適位置。MapBox JavaScript API就是一種地圖客戶端，當然你還可以使用其他的地圖客戶端。
地圖客戶端需要知道你要顯示的中心位置以及縮放級別，你可以輸入一個位置的坐標然后MapBox.js就能找到你需要的瓦片。
中央公園的經緯度為40.783和-73.966，且查看該公園的最佳縮放級別為13。我們可以使用setView([40.783, -73.966], 13)方法告訴MapBox.js將中央公園的位置在地圖上居中並縮放到13的級別。顯示效果如下圖：
原文檔地址：https://www.mapbox.com/guides/how-web-maps-work/
原文：http://blog.csdn.net/ahence/article/details/44057681