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（这是因为它们具有不同的最大缩放级别）。

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

Answer 1

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

在切片图层上，该maxZoom选项定义了切片图层在地图上更新的级别。通过该级别，瓷砖层不再更新，即不再下载和显示瓷砖。

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

平铺源可用的最大缩放数。如果指定，所有缩放级别高于的图块maxNativeZoom将从maxNativeZoom级别加载并自动缩放。

例如，对于街道图层，您可以设置maxNativeZoom为 18 和maxZoom21。

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