缩放级别

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 像素的图像表示

在每个缩放级别，每个图块都分成四个，其大小（边的长度，由 tileSize 选项给出）加倍，面积增加四倍。（换句话说，世界的宽度和高度为 256·2^zoomlevel 像素）


缩放 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 键，然后用鼠标拖动）
使用放大/缩小按钮

查看这个独立的示例。

本教程到此结束。现在，在您的地图中使用您的缩放级别进行玩耍吧！