Renderer
Quick answer
L.Renderer is the abstract base that projects vectors and paints them, implemented concretely by L.svg and L.canvas. Select an implementation through L.svg, L.canvas, the map's preferCanvas flag or a path's renderer option instead of instantiating the base. All renderer subclasses share the padding, tolerance and pane options.
L.Renderer( options ) → Renderer · L.svg( options ) / L.canvas( options ) 为可用实现
Key points
- Every vector without an explicit renderer shares the map's default renderer instance.
- L.svg gives each path its own DOM node, enabling className styling and CSS animation.
- L.canvas paints all paths into one surface, keeping node counts constant.
Example
/* 全局切到 Canvas：适合点位上千、样式简单的场景 */
var map = L.map('map', {
center: [39.907359, 116.391263],
zoom: 12,
preferCanvas: true
});
/* 只让某一组矢量使用 Canvas，其余保持 SVG */
var canvasRenderer = L.canvas({ padding: 0.3, tolerance: 4 }).addTo(map);
var block = L.polygon([
[39.900, 116.380], [39.900, 116.405],
[39.918, 116.405], [39.918, 116.380]
], {
renderer: canvasRenderer,
color: '#1f5fd0',
fillOpacity: 0.12
}).addTo(map);
/* SVG 渲染器可以给要素加 class，用 CSS 做滤镜与动画 */
var svgRenderer = L.svg({ padding: 0.1 }).addTo(map);
L.polyline([[39.895, 116.370], [39.920, 116.420]], {
renderer: svgRenderer,
className: 'route-line',
color: '#c2410c',
weight: 3
}).addTo(map);Notes
- Instantiating the base Renderer directly produces an object with no drawing surface.
- CSS filters, animations and blend modes do nothing on canvas rendered vectors.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Renderer. https://www.jingweizhi.com/en/leaflet/api/renderer.html (accessed 2026-11-03).