Angular集成Leaflet：Max-Zoom对控件生效但手势操作（触控板/移动端）不生效的问题咨询

这不是Leaflet的bug，是你搞混了瓦片图层的maxZoom和地图实例的maxZoom两个完全不同的配置项！

核心区别解释 #

• TileLayer的maxZoom：这个配置只作用于当前瓦片图层，它控制的是该图层能加载渲染的最高缩放级别。当地图缩放超过这个值时，该图层会停止显示瓦片，但地图本身的缩放操作并不会被限制——这就是为什么你用手势还能继续放大的原因。
• 地图实例的maxZoom：这才是全局控制所有缩放行为的关键！不管是内置的缩放控件、触控板/触摸屏的手势缩放，还是键盘快捷键缩放，都会被这个配置限制在设定的级别以内。

具体解决方案 #

你需要在创建Leaflet地图实例的时候，明确设置maxZoom属性，把它和你想要限制的级别（比如你提到的14）保持一致：

// 创建地图时设置全局最大缩放级别
const map = L.map('your-map-container-id', {
  center: [51.505, -0.09], // 示例中心点
  zoom: 10, // 初始缩放级别
  maxZoom: 14, // 这里是全局缩放限制
});

然后你的瓦片图层配置可以和地图的maxZoom保持同步（或者直接省略图层的maxZoom，Leaflet会自动继承地图的配置）：

var humanitarianMap = new L.TileLayer(
  "http://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png",
  {
    maxZoom: 14, // 和地图maxZoom一致，确保图层不会加载超范围瓦片
    attribution: "© OpenStreetMap",
  }
);

// 添加图层到地图
humanitarianMap.addTo(map);

如果是已经创建好的地图，也可以通过API动态修改全局缩放限制：

map.setMaxZoom(14);

这样配置后，所有缩放操作（控件、手势、键盘）都会被限制在14级以内，同时你的瓦片图层也不会尝试加载超过14级的资源，完美解决你遇到的问题~

内容的提问来源于stack exchange，提问作者Dominik