咨询：浏览器端大竖幅图片仅Y轴平移缩放的现成实现方案

基于Leaflet的低成本改造 #

• 锁定X轴平移：监听drag事件，每次拖拽后强制将地图的X坐标重置为固定值（比如初始居中位置），或者直接通过事件拦截禁用X方向拖拽触发
• 限制X轴缩放：监听zoomend事件，缩放完成后手动锁定X轴缩放比例，仅保留Y轴的缩放变化；切割瓦片时只在Y轴方向按层级划分，X轴保持统一瓦片宽度
• 核心代码片段：

  // 禁用X轴拖拽
  map.on('drag', function(e) {
    const currentCenter = map.getCenter();
    map.panTo([currentCenter.lat, 固定X坐标], { animate: false });
  });
  // 锁定X轴缩放比例
  map.on('zoomend', function(e) {
    // 自定义逻辑：仅维护Y轴缩放参数，X轴保持初始比例
  });
  

OpenSeadragon的参数适配 #

• 禁用水平平移：初始化时设置panHorizontal: false，直接关闭X轴拖拽功能
• 强制单轴缩放：监听zoom事件，获取当前视图缩放因子后，手动固定X轴缩放值，仅更新Y轴缩放参数，通过viewport.setZoom()实现单轴缩放
• 瓦片生成适配：生成Deep Zoom格式瓦片时，仅在Y轴方向做层级切割，X轴保留原始分辨率，避免冗余瓦片资源

纵向专属瓦片库选型 #

• 选择针对长图优化的轻量级瓦片库，这类库原生支持仅Y轴的平移和缩放，无需额外改造，只需传入切割好的纵向瓦片目录即可完成加载
• 这类库通常内置按需加载逻辑，自动处理Y轴方向的瓦片请求，适配浏览器性能限制

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