【譯者按：在看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/