我有一个中等大小的SVG,可以在传单地图上显示为叠加层-基本上是从道路网络中选择的道路。传单地图的实例化为:
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缩放问题] [1]] [1]
您如何停止/控制这种行为?
[Sample SVG for which this behaviour occurs][2]
[1]: https://i.stack.imgur.com/FisxS.png
[2]: https://drive.google.com/open?id=1EDV9xgYNgLRvuTB2i66wdHch4ckr0hZH
答案 0 :(得分:0)
我没有深入研究这个问题,但为了得到一些可能有帮助的答案:
在我看来,您想将 svg 用于地理空间数据(如道路网络)似乎很不寻常。
如果将来有人遇到类似的问题,我建议不要尝试修复 svg 渲染,而是将数据转换为 geojson,这更像是此类数据显示需求的标准选项,然后将样式设置为需要使用传单中的选项。
对 OP,你有没有找到解决方案?
请注意,我不清楚发布的图像的哪些部分是 svg 的,哪些部分是底图或其他图层。