svg - 在 Leaflet.js 中混合可点击的 SVG 多边形和 divIcon 标记的最佳方法是什么？

Question

我有一张 map ，其中包含 GeoJSON 多边形和点。

我使用标准 Leaflet 方法分别创建 SVG 和 html 标记来表示它们。

想了解一下:http://i.imgur.com/GSJSZIc.jpg

SVG = 蓝色，标记 = 绿色。

Leaflet 创建“ Pane ”，div.leaflet-overlay-pane 用于 SVG，div.leaflet-marker-pane 用于标记。 leaflet-marker-pane(以红色边框)覆盖了一半的视口(viewport)，并且具有比 leaflet-overlay-pane 更高的 z-index，从而使其下的 SVG 多边形不可点击。

如果我将覆盖 Pane 的 zindex 设置为小于标记 Pane ，则所有标记都不可点击，因为覆盖 Pane 覆盖了整个视口(viewport)。

我已经在 Leaflet Github 问题中阅读了一些关于 createPane() 的内容，但到目前为止还没有看到它起作用。这应该/将是解决这个问题的东西吗？即，在同一个 Pane /div 中放置所有标记和 SVG 多边形。

暂时我将标记 Pane 设置为 1px x 1px。这似乎工作正常，让我问，为什么将标记 Pane 设置为视口(viewport)大小的一半？

Answer 1

你必须将你的 svg 添加到 leaflet-marker-pane 中，因为当你将你的 SVG 添加到 map 时只需使用选项'pane'

  L.svgOverlay(svgOverlayElement, map.getBounds(), { pane: 'markerPane' }).addTo(map)