Leaflet对接WMS 1.3.0版本时BBOX坐标顺序适配问题求助

Leaflet默认未针对WMS 1.3.0的坐标轴顺序翻转逻辑做适配，你可以通过重写WMS图层的getTileUrl方法手动调整BBOX顺序，无需修改Leaflet核心源码，具体实现步骤如下：

前置准备 #

如果你的项目还未配置投影依赖，先引入proj4和proj4leaflet依赖包，再配置EPSG:6706的投影定义：

// 配置EPSG:6706投影参数
proj4.defs("EPSG:6706","+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");

核心适配代码 #

创建WMS图层后，重写其getTileUrl方法，手动翻转BBOX的坐标顺序：

// 初始化WMS图层
const wmsLayer = L.tileLayer.wms('你的WMS服务接口地址', {
  layers: '需要加载的图层ID',
  format: 'image/png',
  transparent: true,
  version: '1.3.0',
  crs: L.CRS.EPSG4326, // 目标投影为EPSG:4326
  // 其他自定义WMS参数
}).addTo(map);

// 重写瓦片请求方法调整BBOX顺序
wmsLayer.getTileUrl = function (coords) {
  // 获取当前瓦片的原始边界
  const tileBounds = this._tileCoordsToBounds(coords);
  // 调整BBOX顺序为WMS 1.3.0要求的[minLat, minLng, maxLat, maxLng]
  const adjustedBbox = [
    tileBounds.getSouth(), 
    tileBounds.getWest(), 
    tileBounds.getNorth(), 
    tileBounds.getEast()
  ].join(',');

  // 拼接GetMap请求参数
  const requestParams = {
    service: 'WMS',
    request: 'GetMap',
    layers: this.options.layers,
    styles: this.options.styles || '',
    format: this.options.format,
    transparent: this.options.transparent,
    version: this.options.version,
    crs: this.options.crs.code,
    width: this.options.tileSize,
    height: this.options.tileSize,
    bbox: adjustedBbox
  };

  // 拼接最终请求地址
  const queryStr = Object.keys(requestParams)
    .map(key => `${key}=${encodeURIComponent(requestParams[key])}`)
    .join('&');
  return `${this._url}?${queryStr}`;
};

如果你的WMS服务仅支持EPSG:6706坐标系返回瓦片，只需要将配置项中的crs参数替换为你通过proj4leaflet创建的EPSG:6706实例即可，适配逻辑无需修改。

可选快速解决方案：如果你的WMS服务兼容1.1.1版本，可直接将version参数修改为1.1.1，无需做任何适配即可正常加载。

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