在Leaflet地图上显示SVG

Question

我有一个相对较大的SVG需要作为覆盖层显示在Leaflet地图上，它基本上是从道路网络中选择出来的一些道路。Leaflet地图是通过以下方式实例化的：

testMap = L.map('mapdiv', { renderer: L.svg({ padding: 100 }) })
              .setView([33.085, -96.815], 11);

SVG 图层是这样创建的：

var imgUrl = url, imgBnds;
L.imageOverlay(imgUrl, imgBnds, {opacity:0.3}).addTo(testMap);

这在缩小页面时都能正常显示，但是当放大页面时，SVG会被分成多个瓦片，只有左上角的瓦片被显示，尽管这不是地图上正在显示的区域。

SVG具有以下内容：

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:space="preserve" 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" width="1920" height="767" 
    clip-path="url(#MapClipRectangle)" style="overflow:hidden;text-rendering:optimizeLegibility" xmlns="http://www.w3.org/2000/svg">
</desc>
    <defs>
        <clipPath clipPathUnits="userSpaceOnUse" id="MapClipRectangle">
            <rect x="0" y="0" width="1920" height="767" />
        </clipPath>
        <symbol id="1" style="fill:none">
            <path d="M985.96 476.76 l-0.26 0.06" />
<!-- ... Many Symbols and Paths, plus some Polygons, Text,  Line_artwork, Map_decoration and a Map_frame... -->

最终看起来会像这样（实际示例显示的是左上角的图块，但如果我放大到右侧，您实际上不会看到任何来自叠加SVG的东西）：

你如何停止/控制这种行为？ 出现此行为的示例SVG

- JetSetJim

---

有没有可能分享SVG文件？ - Andrew Reid

添加了一个链接（参考文献＃2） - JetSetJim

Answer 1

我并没有深入研究这个问题，但为了有一些可能有所帮助的答案：

对于像道路网络这样的地理空间数据，您想使用svg似乎很不寻常。

如果将来有人遇到类似的问题，我建议不要试图修复svg渲染，而是将数据转换为geojson，这是更标准的选项，用leaflet中的选项进行必要的样式设置。

楼主，你找到解决方案了吗？

顺便说一句，我不清楚发布的图片中哪些部分是svg，哪些部分是底图或其他图层。

- Hugh_Kelley

---

我从未找到解决方案，令人不快的是，我使用的库只能输出SVG格式，如果我没记错的话。我发布的图片只有两层，一层是来自Google地图的底图，另一层是只有黑色道路轮廓和白色背景的SVG图形。 - JetSetJim