WMS
Quick answer
L.tileLayer.wms builds OGC GetMap requests into a tiled layer, connecting Leaflet to GeoServer and MapServer publications. It forwards layers, styles, format, version and transparency parameters, and setParams changes them without rebuilding the layer. Large tileSize values reduce request counts, and the uppercase option helps with legacy servers.
L.tileLayer.wms( baseUrl , options ) → TileLayer.WMS
Key points
- transparent true plus format image png is required for overlays placed over a basemap.
- version 1.3.0 changes the axis order to latitude then longitude and uses the CRS parameter.
- setParams with noRedraw true defers the redraw until you explicitly request it.
Example
var wms = L.tileLayer.wms('https://gis.example.com/geoserver/wms', {
layers: 'city:roads,city:water',
styles: '',
format: 'image/png',
transparent: true,
version: '1.3.0',
attribution: '© 城市地理信息中心',
opacity: 0.8,
maxZoom: 18
}).addTo(map);
/* 切换图层时不要重建,setParams 只改参数并重绘 */
document.getElementById('switch').addEventListener('click', function () {
wms.setParams({ layers: 'city:buildings' }, true);
wms.redraw();
});
/* 打印实际发出的 GetMap 地址,排查 400 时很有用 */
console.log(wms.getTileUrl({ x: 6745, y: 3104, z: 13 }));
Notes
- The default image jpeg fills blank areas with white and hides the basemap beneath.
- Some services return blank tiles at version 1.3.0, and falling back to 1.1.1 usually fixes it.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). WMS. https://www.jingweizhi.com/en/leaflet/api/wms.html (accessed 2026-11-03).