leaflet缩放级别-更深入地了解缩放级别是什么

缩放级别

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 像素：

只是要明确一点：地球不是正方形。相反，地球具有不规则的形状，可以近似为类似于球体的东西。

所以我们假设地球大部分是圆的。为了让它变平，我们放了一个假想的圆柱体，展开它，然后把它剪成方形：

这不是在平面上显示地球表面的唯一方法。有数百种方法，每种方法都有自己的优点和缺点。

像大地测量学、地图投影和坐标系这样的东西很难，非常难（并且超出了本教程的范围）。假设地球是正方形并不总是正确的做法，但大多数情况下工作得很好，使事情变得更简单，并让 Leaflet（和其他地图库）变得更快。

现在，让我们假设世界是一个正方形：

当我们以零缩放级别表示世界时，它的宽度和高度为 256 像素。当我们进入一级缩放时，它的宽度和高度加倍，并且可以由四个 256 像素 x 256 像素的图像表示：

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

这种情况一直在继续。大多数磁贴服务提供的磁贴缩放级别最高为 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);将地图的缩放级别设置为0。此示例再次使用超时自动在缩放级别 0 和 1 之间交替：

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

注意缩放级别 0 和 1 显示的图像与上一节中显示的图像是如何对应的！设置缩放的其他方法是：

setView(center, zoom), which also sets the map center
flyTo(center, zoom), like setView but with a smooth animation
zoomIn() / zoomIn(delta), zooms in delta zoom levels, 1 by default
zoomOut() / zoomOut(delta), zooms out delta zoom levels, 1 by default
setZoomAround(fixedPoint, zoom), sets the zoom level while keeping a point fixed (what scrollwheel zooming does)
fitBounds(bounds), automatically calculates the zoom to fit a rectangular area on the map

分数缩放

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 等。以下示例使用 0.25 的 zoomSnap 值：

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 键的同时用鼠标拖动）使用放大/缩小按钮本教程到此结束。现在在您的地图中使用您的缩放级别！

0 0 投票数

文章评分