Leaflet 根据缩放级别获取缩放后边界框(bounding box)的问题求解

三个方法结果不一致的原因 #

• 第一个方法（创建假地图）的结果完全符合Leaflet内部逻辑，因为setView方法会自动执行两个关键步骤：① 按照地图实例的minZoom、maxZoom、zoomSnap配置对传入的zoom值做校验和对齐，默认zoomSnap=1，非整数zoom会被自动取整；② 内部自动处理跨国际日期变更线、坐标边界裁剪等逻辑。
• 第二个纯计算方法的偏差几乎都来自没有做zoom值对齐：你直接用了传入的原始zoom值计算，没有和Leaflet内部的缩放规则对齐，当传入非整数zoom、或者zoom超出地图配置的缩放范围时，计算结果自然和实际运行的假地图结果不一致。如果你的地图开了worldCopyJump配置，还会额外存在边界wrap的偏差。
• 第三个方法的偏差来自错误的缩放系数计算：你自定义的zoomFactor推导逻辑不符合Leaflet的CRS坐标转换规则，不需要手动计算缩放系数，Leaflet提供的project/unproject方法已经封装了不同CRS下的坐标缩放逻辑，手动计算反而容易出错。

高效正确的实现方案 #

直接复用Leaflet内部的缩放校验逻辑，不需要创建额外的DOM和地图实例，性能和你写的纯计算方法一致，结果和假地图方案100%对齐：

function getScaledBounds(center: L.LatLng, zoom: number): L.LatLngBounds {
  // 复用Leaflet内部的zoom校验逻辑，对齐minZoom、maxZoom、zoomSnap配置
  const validZoom = lMap._limitZoom(zoom);
  // 获取地图容器的像素尺寸
  const viewSize = lMap.getSize();
  const halfViewSize = viewSize.divideBy(2);
  // 计算目标zoom下中心点的像素坐标
  const centerPixel = lMap.project(center, validZoom);
  // 计算可视区域的像素边界
  const viewPixelBounds = L.bounds(
    centerPixel.subtract(halfViewSize),
    centerPixel.add(halfViewSize)
  );
  // 像素边界转回经纬度边界
  return L.latLngBounds(
    lMap.unproject(viewPixelBounds.getBottomLeft(), validZoom),
    lMap.unproject(viewPixelBounds.getTopRight(), validZoom)
  );
}

如果你的地图启用了worldCopyJump，只需要在返回边界前额外调用L.latLngBounds的wrap方法对齐世界边界即可。

内容的提问来源于stack exchange，提问作者hugo der hungrige