WMS 图层一片空白，服务端回了段 XML

现象

地图上没有该图层的内容，网络面板中 GetMap 请求返回 200， Content-Type 为 application/vnd.ogc.se_xml。响应内容：

<?xml version="1.0" encoding="UTF-8"?>
<ServiceExceptionReport version="1.3.0">
  <ServiceException code="LayerNotDefined">
    Layer not defined: roads
  </ServiceException>
</ServiceExceptionReport>

原因

1.3.0 版本的 BBOX 轴序是纬度在前，与常见的 minx,miny,maxx,maxy 相反， 坐标系又没出错，画面却整体偏移或拉伸。

排查过程

把实际请求的 URL 复制出来，只改一个参数，用浏览器直接打开， 看返回是图片还是 XML：

map.getLayers().forEach(function (l) {
  var src = l.getSource();
  if (src instanceof ol.source.TileWMS) {
    console.log(src.getFeatureInfoUrl(
      map.getView().getCenter(),
      map.getView().getResolution(),
      'EPSG:3857',
      { INFO_FORMAT: 'text/html' }
    ));
  }
});

解决方案

参数写全，版本与坐标系列保持一致。图层名带上工作区：

var wmsSource = new ol.source.TileWMS({
  url: 'https://gis.example.cn/geoserver/wms',
  params: {
    LAYERS: 'workspace:roads',
    STYLES: '',
    VERSION: '1.1.1',
    SRS: 'EPSG:3857',
    FORMAT: 'image/png',
    TRANSPARENT: true,
    TILED: false
  },
  projection: 'EPSG:3857',
  serverType: 'geoserver',
  crossOrigin: 'anonymous'
});

var wmsLayer = new ol.layer.Tile({ source: wmsSource });
map.addLayer(wmsLayer);

服务端是 1.3.0 且坚持用新版时，写 CRS， 并让 OpenLayers 处理轴序，不要自己拼 BBOX：

var src13 = new ol.source.TileWMS({
  url: 'https://gis.example.cn/geoserver/wms',
  params: {
    LAYERS: 'workspace:roads',
    STYLES: '',
    VERSION: '1.3.0',
    CRS: 'EPSG:3857'
  },
  projection: 'EPSG:3857',
  serverType: 'geoserver'
});

叠加在底图上必须用 PNG 并开启透明，否则会把底图整块盖住：

params: {
  LAYERS: 'workspace:roads',
  FORMAT: 'image/png',
  TRANSPARENT: true
}

验证

单张 GetMap 请求的 Content-Type 为 image/png， 不再出现 XML。图层叠加在底图上能看到透明背景。 放大到 16 级，要素位置与底图路网对齐，不出现整体偏移。