縮放層級

Leaflet 使用緯度、經度和「縮放層級」。

較低的縮放層級表示地圖顯示整個大陸，而較高的縮放層級表示地圖可以顯示城市的細節。

為了理解縮放層級如何運作，首先我們需要對大地測量學有一個基本的介紹。

地球的形狀

讓我們看看一個鎖定在縮放層級零的簡單地圖

var map = L.map('map', {
	minZoom: 0,
	maxZoom: 0
});

var cartodbAttribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attribution">CARTO</a>';

var positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
	attribution: cartodbAttribution
}).addTo(map);

map.setView([0, 0], 0);

請查看這個獨立的範例。

請注意，「整個地球」只是一張寬 256 像素、高 256 像素的圖片

為了清楚起見：地球不是正方形。相反地，地球具有不規則的形狀，可以近似為類似於球體的形狀。

因此我們假設地球大致是圓形的。為了將其變平，我們在周圍放置一個假想的圓柱體，將其展開，並將其切割成看起來像正方形

這稱為「圓柱地圖投影」。

這不是將地球表面顯示在平面上的唯一方法。有數百種方法，每種方法都有其自身的優點和缺點。以下 6 分鐘的影片是對此主題的一個很好的介紹

諸如大地測量學、地圖投影和座標系統之類的東西很難，非常難（並且超出本教學的範圍）。假設地球是正方形並不總是正確的做法，但在大多數情況下都足夠好用，可以簡化事情，並使 Leaflet（和其他地圖函式庫）能夠快速運作。

二次方

現在，我們假設世界是一個正方形

當我們在縮放層級零表示世界時，它寬 256 像素且高 256 像素。當我們進入縮放層級一時，它的寬度和高度會加倍，並且可以用四個 256 像素 x 256 像素的圖片來表示

在每個縮放層級，每個圖磚都會分成四個，並且其大小（邊長，由tileSize選項給定）會加倍，面積則會變成四倍。（換句話說，世界的寬度和高度是256·2^縮放層級像素）


縮放 0	縮放 1	縮放 2

這個過程會不斷地進行下去。大多數圖磚服務會提供縮放層級高達 18 的圖磚，具體取決於其涵蓋範圍。這足以讓每個圖磚看到幾個城市街區。

關於比例的注意事項

使用圓柱投影的缺點之一是比例不是恆定的，並且測量距離或大小不可靠，尤其是在較低的縮放層級。

在技術術語中，Leaflet 使用的圓柱投影是等角的（保留形狀），但不是等距的（不保留距離），也不是等面積的（不保留面積，因為靠近赤道的事物看起來比實際要小）。

透過向地圖新增一個L.Control.Scale，並平移到赤道和北緯 60°，我們可以看到比例因子如何加倍。以下範例使用JavaScript 定時器自動執行此操作

L.control.scale().addTo(map);

setInterval(function(){
	map.setView([0, 0]);
	setTimeout(function(){
		map.setView([60, 0]);
	}, 2000);
}, 4000);

請查看這個獨立的範例。

L.Control.Scale顯示適用於地圖中心點的比例。在高縮放層級，比例的變化非常小，並且不明顯。

控制縮放

Leaflet 地圖有多種控制顯示縮放層級的方法，但最明顯的一種是setZoom()。例如，map.setZoom(0);會將map的縮放層級設定為0。

這個範例再次使用定時器自動在縮放層級0和1之間切換

setInterval(function(){
	map.setZoom(0);
	setTimeout(function(){
		map.setZoom(1);
	}, 2000);
}, 4000);

請查看這個獨立的範例。

請注意，縮放層級 0 和 1 顯示的圖片與上一節中顯示的圖片相對應！

其他設定縮放的方法是

setView(center, zoom)，這也會設定地圖中心
flyTo(center, zoom)，類似於setView，但具有平滑的動畫效果
zoomIn() / zoomIn(delta)，放大delta個縮放層級，預設為1
zoomOut() / zoomOut(delta)，縮小delta個縮放層級，預設為1
setZoomAround(fixedPoint, zoom)，設定縮放層級，同時保持一個點固定（滾輪縮放的作用）
fitBounds(bounds)，自動計算縮放以在地圖上擬合矩形區域

小數縮放

Leaflet 1.0.0 中引入的功能是小數縮放的概念。在此之前，地圖的縮放層級只能是整數（0、1、2等等）；但現在您可以使用諸如1.5或1.25之類的小數。

小數縮放預設為停用。若要啟用它，請使用地圖的zoomSnap選項。zoomSnap選項的預設值為1（表示地圖的縮放層級可以是0、1、2等等）。

如果您將zoomSnap的值設定為0.5，則地圖的有效縮放層級將為0、0.5、1、1.5、2等等。

如果您設定的值為0.1，則地圖的有效縮放層級將為0、0.1、0.2、0.3、0.4等等。

以下範例使用zoomSnap值為0.25

var map = L.map('map', {
	zoomSnap: 0.25
});

請查看這個獨立的範例。

如您所見，Leaflet 將僅載入縮放層級0或1的圖磚，並會根據需要調整其比例。

Leaflet 會將縮放層級貼齊到最接近的有效值。例如，如果您有zoomSnap: 0.25，並且您嘗試執行map.setZoom(0.8)，則縮放會貼齊回0.75。當使用map.fitBounds(bounds)或在觸控螢幕上結束雙指縮放手勢時，也會發生相同的情況。

zoomSnap可以設定為零。這表示 Leaflet 將不貼齊縮放層級。

還有一個與zoomSnap相關的重要地圖選項：zoomDelta選項。這會控制使用縮放按鈕（來自預設的L.Control.Zoom）或鍵盤上的+/-鍵時要放大/縮小多少縮放層級。

對於滑鼠滾輪縮放，wheelPxPerZoomLevel選項控制滑鼠滾輪放大或縮小的速度。

以下是一個將zoomSnap設定為零的範例

var map = L.map('map', {
	zoomDelta: 0.25,
	zoomSnap: 0
});

請嘗試以下操作，並查看縮放層級如何變化

如果您有觸控螢幕，請使用雙指縮放
使用滑鼠滾輪放大/縮小
執行方塊縮放（在鍵盤上按住shift鍵的同時用滑鼠拖曳）
使用放大/縮小按鈕

請查看這個獨立的範例。

本教學到此結束。現在，在您的地圖中玩玩縮放層級吧！