如何将外部svg文件（由D3.js）添加到Leaflet映射

Question

我有关于Leaflet.js地图和D3.js外部svg文件的问题。 我想知道如何将外部svg文件（现在我使用D3.js）添加到Leaflet地图。

我发现了很多教程，但他们使用.json：http://bost.ocks.org/mike/leaflet/

我尝试了一切（据我所知）将外部svg图像移动到Leaflet地图上的叠加层，但我不能这样做。

请帮帮我： Here is my jsfiddle

感谢大家的阅读和回答。 ：）

Answer 1

只是澄清你可以/ shoud使用

 map.getPanes().overlayPane.appendChild(svgImg.documentElement);

而不是

d3.select(map.getPanes().overlayPane).node().appendChild(svgImg.documentElement);

d3.select从原生DOM转到d3。 .node()走另一条路。

g.node().appendChild(svgImg.documentElement);

会将一个<svg>嵌套在另一个中，所以这不是最佳做法。

这里有一个“工作”小提琴：https://jsfiddle.net/tco3c8wh/1/

Answer 2

user3667118的回答是正确的，这个问题只是将SVG图像覆盖在传单层的顶部。

然而，一旦放大和缩小，您将看到传单图层重新调整大小，但重叠的图像保持相同的大小。

您需要首先确保初始叠加层的位置和大小正确，然后每次重新调整小册子图层时都能按比例重新调整大小。

Answer 3

只需将svg附加到您创建的其中一个元素即可。 第24行使用

g.node().appendChild(svgImg.documentElement);

或

svg.node().appendChild(svgImg.documentElement);

如果您希望自己的svg直接位于overlayPane下，请使用

d3.select(map.getPanes().overlayPane).node().appendChild(svgImg.documentElement);