TileLayer
Quick answer
L.tileLayer loads raster map tiles from a URL template containing z, x, y and optional s placeholders, making it the standard basemap and raster overlay type. It handles zoom ranges, retina detection, TMS flipping and tile lifecycle events. Attribution strings registered on the layer reach the attribution control automatically.
L.tileLayer( urlTemplate , options ) → TileLayer
Key points
- tms true flips the y axis for servers that number rows from the south.
- detectRetina halves tileSize and raises the requested zoom on high density screens.
- getTileUrl exposes the resolved template, which helps debug broken providers.
Example
var tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors',
keepBuffer: 4
}).addTo(map);
tiles.on('load', function () {
console.log('当前视野瓦片加载完成');
});
tiles.on('tileerror', function (e) {
console.log('失败瓦片', e.coords, e.tile.src);
});tiles.setUrl('https://tile.openstreetmap.org/{z}/{x}/{y}.png?v=2');
tiles.redraw();Notes
- A map maxZoom above the layer maxZoom keeps stale tiles scaled up and blurry.
- setUrl refreshes the template but requires redraw before existing tiles are replaced.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). TileLayer. https://www.jingweizhi.com/en/leaflet/api/tile-layer.html (accessed 2026-11-03).