Leaflet发起WMS请求时如何设置TileSize以减少付费服务请求次数并避免偏移

你遇到的多请求和偏移问题本质是误用了瓦片图层的逻辑：TileLayer.WMS的设计初衷是将地图拆分为固定尺寸的瓦片网格加载，哪怕你调大瓦片尺寸，Leaflet默认会加载视口外的缓冲瓦片（默认缓冲为2个瓦片宽度），同时你直接用window.screen.width作为瓦片尺寸，和地图容器实际尺寸、瓦片网格对齐规则不匹配，自然会出现多请求和渲染偏移。

以下是两种可落地的解决方案： #

方案1：最优解——使用单张WMS静态图请求（仅1次请求/视图更新） #

放弃瓦片图层逻辑，直接用L.ImageOverlay动态拼接WMS GetMap请求，每次地图视图变化仅拉取1张刚好覆盖当前视口的图片，完全避免多余请求，也不会出现偏移：

// 初始化时先创建空ImageOverlay
let wmsOverlay = L.imageOverlay().addTo(map);

// 定义更新WMS图层的方法
function updateWMS() {
  const bounds = map.getBounds();
  const size = map.getSize();
  // 拼接标准WMS GetMap请求
  const wmsUrl = `http://wmsserver/wms?service=WMS&version=1.3.0&request=GetMap&layers=mix:precip_24h:mm&styles=&format=image/png&transparent=true&width=${size.x}&height=${size.y}&crs=EPSG:${map.options.crs.code}&bbox=${bounds.toBBoxString()}`;
  wmsOverlay.setUrl(wmsUrl).setBounds(bounds);
}

// 监听地图视图变化事件，更新WMS图层
map.on('moveend', updateWMS);
// 首次加载触发一次更新
updateWMS();

该方案完全匹配当前视口的尺寸和地理范围，不会出现渲染偏移，每次视图更新仅产生1次WMS请求，最大化节省计费额度。

方案2：保留TileLayer.WMS的参数调整方案 #

如果你需要保留瓦片图层的相关能力，调整配置即可解决问题：

var wmsserver = L.tileLayer.wms('http://wmsserver/wms?', {
  layers: 'mix:precip_24h:mm' ,
  format: 'image/png',
  tileSize: map.getSize(), // 用地图容器实际尺寸而非屏幕宽度
  version: '1.3.0',
  transparent: true,
  tileBuffer: 0, // 关闭视口外缓冲瓦片加载，消除多余请求
  noWrap: true, // 禁止跨日期线重复加载瓦片
  bounds: map.getBounds() // 限制瓦片仅加载当前视口范围
});

注意该方案需要在地图初始化完成、容器尺寸确定后再初始化WMS图层，否则map.getSize()获取的尺寸不准会导致偏移。

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