Leaflet中Canvas与SVG渲染层排序问题：多边形遮挡Marker无法点击

问题根源：Leaflet中，Canvas和SVG渲染器的图层分别位于独立的DOM容器内，layer.bringToBack()/layer.bringToFront()仅能调整同一渲染器内部的图层顺序，无法跨容器改变层级。你的场景中，SVG渲染器的容器层级高于Canvas渲染器，导致多边形遮挡Marker。

以下是几种可行的解决方法：

方法1：创建渲染器时指定zIndex #

在初始化SVG和Canvas渲染器时，直接设置zIndex参数，让Canvas容器层级高于SVG：

// 创建SVG渲染器，设置更低的zIndex
const svgRenderer = L.svg({ zIndex: 300 });
// 创建多边形并使用该渲染器
const polygon = L.polygon([[lat1, lng1], [lat2, lng2], [lat3, lng3]], {
  renderer: svgRenderer
}).addTo(map);

// 创建Canvas渲染器，设置更高的zIndex
const canvasRenderer = L.canvas({ zIndex: 400 });
// 创建Marker并使用该渲染器
const marker = L.marker([lat, lng], {
  renderer: canvasRenderer
}).addTo(map);

方法2：手动调整容器DOM的z-index #

如果已经创建了渲染器，可直接修改对应容器的样式层级：

// 获取多边形的SVG渲染器容器，设置z-index
map.getRenderer(polygon)._container.style.zIndex = 300;
// 获取Marker的Canvas渲染器容器，设置更高的z-index
map.getRenderer(marker)._container.style.zIndex = 400;

方法3：放弃Canvas渲染Marker（如果允许） #

如果没有强制要求用Canvas渲染Marker，直接使用默认的DOM渲染（Marker默认在markerPane，z-index默认600，远高于overlayPane的400），自然不会被SVG多边形遮挡：

// 不指定renderer，使用默认DOM渲染
const marker = L.marker([lat, lng]).addTo(map);

内容的提问来源于stack exchange，提问作者Ravi