RasterSource
Quick answer
RasterSource serves image tiles to raster layers through map.addSource(id, {type: 'raster', tiles, tileSize, minzoom, maxzoom, attribution}). Every tile is a decoded image, which suits satellite imagery, scanned maps and thematic rasters. Runtime helpers include setTiles, setUrl and loaded, though setSourceProperty is reserved for changes the standard setters cannot express.
map.addSource( id , { type: 'raster', tiles: [...], tileSize: 256 , … })
Key points
- tiles holds URL templates with {z}, {x} and {y} placeholders.
- tileSize defaults to 512 and affects how zoom levels are interpreted.
- setTiles swaps templates without rebuilding the source.
Example
map.addSource('basemap', {
type: 'raster',
tiles: ['https://basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'],
tileSize: 256,
minzoom: 0,
maxzoom: 19,
attribution: '© OpenStreetMap contributors © CARTO'
});
map.addLayer({
id: 'basemap',
type: 'raster',
source: 'basemap',
paint: {
'raster-opacity': 0.9,
'raster-fade-duration': 150
}
});
/* 换一套瓦片，图层不用动 */
var src = map.getSource('basemap');
src.setTiles(['https://basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png']);Notes
- A tileSize that disagrees with the real image resolution shifts zoom levels.
- Tiles served without CORS headers cannot be read back or canvas-captured.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). RasterSource. https://www.jingweizhi.com/en/maplibre/api/raster-source.html (accessed 2026-11-03).