首页 / Leaflet / API 文档

Renderer

先看结论

矢量图层的渲染基类，负责把经纬度换算成屏幕坐标并绘制，不直接实例化。

最后验证 2026-11-03 · Leaflet 1.9.4 · 更新 2026-10-28 · 引用本文

L.Renderer(options) → Renderer　·　L.svg(options) / L.canvas(options) 为可用实现

参数

选项	默认值	说明
`padding`	0.1	渲染容器向外扩展的比例，0.1 表示各边多留 10% 视野，减少拖动时的重绘
`tolerance`	0	点击命中范围向外扩张的像素值，Canvas 实现使用
`pane`	'overlayPane'	渲染容器挂载的 pane，层级 400
`map.preferCanvas`	false	地图级开关，为 true 时所有矢量默认走 Canvas
`map.renderer`	—	地图级默认渲染器实例，替代 preferCanvas 的布尔开关
`Path.renderer`	—	单个矢量指定渲染器，优先级最高

成员

成员	返回值	说明
`L.svg(options)`	Renderer	创建 SVG 渲染器，每个要素一个 DOM 节点
`L.canvas(options)`	Renderer	创建 Canvas 渲染器，整层只有一张画布
`addTo(map)`	this	把渲染器挂到地图，再由矢量引用
`remove()`	this	移除渲染器与其中的矢量
`getPane()`	HTMLElement	读取所在 pane 的 DOM
`options.padding`	Number	修改后在下一次视图更新时生效，已有矢量会一起重算

/* 全局切到 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);

不要直接 new Renderer。基类只定义了抽象流程，缺少具体的绘制容器，实例化后矢量不会显示。需要什么实现就用 L.svg() 或 L.canvas()。

一个地图上的所有矢量若未指定 renderer，会共享地图的默认渲染器。混用时要注意：Canvas 渲染的要素没有独立 DOM，CSS 的 filter、 animation、mix-blend-mode 全部无效；SVG 要素多了之后拖动会明显掉帧。数量与样式需求冲突时，按图层拆分渲染器，而不是全局切换。

引用本文

经纬志（2026）。《Renderer》。https://www.jingweizhi.com/leaflet/api/renderer.html（访问日期 2026-11-03）。