在Leaflet.js中如何获取正确x/y值来处理tileLayer的WMS请求参数

算力阿峰

2026-10-14

核心实现方案

你需要重写Leaflet L.TileLayer 的getTileUrl方法，在该方法内动态计算当前瓦片的坐标、完成坐标系转换后拼接请求地址即可，无需使用固定占位模板变量。

步骤1：配置坐标系转换规则

如果你的本地地图坐标系与目标WMS的EPSG:3067不一致，先引入proj4js库完成坐标系定义：

// 定义EPSG:3067坐标系参数
proj4.defs("EPSG:3067","+proj=utm +zone=35 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs");

如果本地地图本身就是基于EPSG:3067初始化，可跳过这一步。

步骤2：自定义瓦片图层实现动态BBOX拼接

var CustomWMSLayer = L.TileLayer.extend({
  getTileUrl: function (coords) {
    // 获取当前瓦片在本地坐标系下的边界范围
    const tileBounds = this._map.getTileBounds(coords);
    const nwPoint = tileBounds.getNorthWest();

    // 坐标系转换：如果本地坐标系不是4326，替换第一个参数为你的本地坐标系编码即可
    const [x1, y1] = proj4('EPSG:4326', 'EPSG:3067', [nwPoint.lng, nwPoint.lat]);
    const x2 = x1 + 1024;
    const y2 = y1 + 1024;

    // 拼接最终WMS请求地址
    return `https://blablablabla.com/service/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&LAYERS=blablabla&ID=3400&STYLES=blablablabla&WIDTH=256&HEIGHT=256&CRS=EPSG:3067&BBOX=${x1},${y1},${x2},${y2}`
  }
});

// 实例化图层并添加到地图
new CustomWMSLayer({
  id: 'mapbox.eight',
  maxNativeZoom: 18,
  maxZoom: 24
}).addTo(map);