leaflet.js: 设置每层最大缩放级别？

Question

我正在使用 CartoDB.js（3.15.9，基于 Leaflet.js）和两个地图基础层，一个来自 CartoDB 的街道层和一个来自 MapQuest 的卫星层：

  var options = {
    center: [53.2, -2.0],
    zoom: 6
  };
  var map = new L.Map('map', options);
  var streetLayer = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors</a>'
  }).addTo(map);
  L.control.layers({
    'Map': streetLayer, 
    'Satellite': MQ.satelliteLayer()
  }, null, {'collapsed': false, 'position': 'bottomleft'}).addTo(map);

我可以设置每层最大缩放级别吗？我希望街道层的最大缩放比例为 18，卫星层的最大缩放比例为 21（这是因为它们具有不同的可用最大缩放级别）。

我尝试在 streetLayer 对象上设置 maxZoom: 18，但这似乎没有任何作用。 options 上的相同选项设置全局最大缩放，但这显然不是我想要的。

Answer 1

如您所见，地图的 maxZoom 选项限制了导航（用户不能缩放到指定级别以上）。

在图块图层上，maxZoom 选项定义图块图层在地图上更新到哪个级别。通过该级别后，Tile Layer 不再更新，即不再下载和显示瓦片。

您可能有兴趣将它与 maxNativeZoom 选项结合使用：

Maximum zoom number the tile source has available. If it is specified, the tiles on all zoom levels higher than maxNativeZoom will be loaded from maxNativeZoom level and auto-scaled.

例如，对于您的街道图层，您可以将 maxNativeZoom 设置为 18，将 maxZoom 设置为 21。

现在，如果您想要根据地图当前显示的内容使用不同的导航限制（例如，如果您在图层控件中将 2 个图块图层作为底图，以便它们不会同时显示），您可以使用 map.setMaxZoom() 在用户切换底图时动态更改该限制。

leaflet.js: 设置每层最大缩放级别？

leaflet.js: set max zoom level per layer?

maps

leaflet

cartodb