小编Jet*_*Jim的帖子

在传单地图上显示SVG

我有一个较大的SVG,可以在传单地图上显示为叠加层-基本上是从道路网络中选择的道路。传单地图的实例化为:

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

并使用以下命令创建SVG层:

var imgUrl = url, imgBnds;
L.imageOverlay(imgUrl, imgBnds, {opacity:0.3}).addTo(testMap);
Run Code Online (Sandbox Code Playgroud)

缩小时,这一切都可以很好地显示,但是放大时,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... -->
Run Code Online (Sandbox Code Playgroud)

它最终看起来像这样(示例实际上显示了左上图块,但是如果向右放大,则实际上从叠加SVG中看不到任何东西):[![SVG缩放问题] [1]] [1] …

svg leaflet

5
推荐指数
1
解决办法
525
查看次数

标签 统计

leaflet ×1

svg ×1