如何在Leaflet.js中最好地混合可点击的SVG多边形和divIcon标记?

3
我有一张地图,其中包含GeoJSON多边形和点。我使用标准的Leaflet方法分别创建SVG和html标记来表示它们。你可以查看这个链接以了解更多:http://i.imgur.com/GSJSZIc.jpg。SVG是蓝色的,标记是绿色的。Leaflet创建了'panes',div.leaflet-overlay-pane用于SVG,div.leaflet-marker-pane用于标记。 div.leaflet-marker-pane(红框)覆盖了半个视口,并具有比leaflet-overlay-pane更高的z-index,从而使其下面的SVG polys不可点击。如果我将覆盖层(zindex)设置为小于标记层,所有标记都将无法单击,因为覆盖层会覆盖整个视口。我在Leaflet Github问题中阅读到了一些关于createPane()的内容,但目前还没有看到它起作用。这是否应该是可以解决此问题的东西?即将所有标记和SVG polys放置在同一个pane/div中。目前,我已将标记窗格设置为1像素×1像素。这似乎很好用,这让我想问,为什么标记窗格会设置为半个视口大小呢?
1个回答

0

你需要将你的SVG添加到leaflet-marker-pane中,只需在将SVG添加到地图时使用“pane”选项即可。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接