使用Leaflet,D3或其他人在地图上使用坐标的SVG

时间:2015-12-11 22:21:46

标签: javascript d3.js svg leaflet raphael

我在Inkscape和Illustrator中创建了一些信息图表,我想使用Leaflet在OpenLayers底图上显示它们。

将图形导出为SVG不是问题。由于我已经在球形墨卡托中设计它们(EPSG:3857,与Google,OpenStreetMap等相同),我不需要任何重投影。

在网络上,我发现了很多关于SVG,Leaflet和D3.js的主题,但大多数都是关于加载GeoJSON或TopoJSON点的。我不能使用GeoJSON或TopoJSON,因为我的图表包含曲线,我不想将这些曲线(beziers等)转换为直线。

是否可以将这些SVG直接加载到SVG并将其显示在正确的位置?我在三个不同的版本中创建了一个简单的例子:

使用矩阵变换和相对坐标:

<svg    xmlns="http://www.w3.org/2000/svg"
        preserveAspectRatio="xMidYMax"
        viewBox="812896.94 6695163.911 37373.381 32963.7">

<path   transform="matrix(76 0 0 76 804256.57 6674154.8)"
        d="M 220.21,309.9 C 210.7217,311.7252 214.7519,328.286 209.098,331.113 206.1734,332.5753 200.5513,323.5765 198.996,322.0216 191.8277,314.8533 175.314,336.6126 172.732,339.1946 165.1553,346.7713 184.428,351.9006 185.864,353.3366 189.001,356.4736 186.8742,370.9476 186.8742,375.5596 186.8742,387.1296 181.6493,413.5966 186.8742,424.0466 191.6999,433.6979 207.9152,451.6656 207.0772,453.3406 197.8004,471.8946 146.3782,455.451 124.2442,477.5846 121.7051,480.1237 111.4042,500.0996 114.1422,502.8386 116.2846,504.981 121.7503,516.4436 128.2842,509.9097 128.71476,509.47914 134.7402,503.2337 135.3553,503.8488 144.5064,512.9999 135.72031,533.5078 144.4467,542.2348 148.4363,546.2244 163.0587,518.4198 170.7107,526.0728 178.2309,533.593 170.81592,549.4118 178.7919,557.3878 184.6845,563.2804 208.2549,551.4952 214.1469,557.3878 217.642,560.8829 219.4776,568.7798 222.2281,571.5298 225.4823,574.784 234.1131,572.303 238.3901,576.5806 244.2603,582.4508 238.3881,598.8026 244.451,604.8646 252.1294,612.543 263.124,618.4866 270.715,626.0776 282.744,638.1066 285.486,664.0816 300.009,678.6056 302.4371,681.0337 306.7434,677.2587 310.111,676.5853 311.8312,676.24127 322.773,678.0657 324.253,676.5853 328.839,671.9993 336.125,674.6901 342.436,671.5345 359.553,662.9759 356.578,689.6345 356.578,704.8695 L 356.578,711.9406 C 356.578,709.8734 414.855,714.2723 419.207,709.9203 425.7684,703.3589 415.0532,686.8003 421.2273,680.6263 423.6604,678.1931 439.6743,663.7183 446.4813,670.5243 446.6532,670.6962 454.3327,678.8354 456.5833,676.5852 465.9323,667.2362 461.6379,630.1142 470.7253,621.0272 473.4265,618.326 469.79549,605.7142 471.7355,601.8342 474.3195,596.6661 483.5695,594.0406 487.8975,589.7122 524.0865,553.5232 517.7225,621.5062 552.5475,586.6817 568.2535,570.9757 549.8146,501.5317 551.5373,499.8087 565.1333,486.2127 587.4163,469.4667 594.9743,454.3517 598.1113,448.0776 594.9743,432.0637 594.9743,425.0577 594.9743,416.4878 596.6187,405.7477 593.9641,397.7837 588.4796,381.3297 573.5271,406.6408 558.6091,391.7228 553.8885,387.0022 556.5888,370.1448 556.5888,362.4288 556.5888,337.3148 539.8448,366.3157 537.3958,361.4186 529.494,345.6146 548.8338,342.5526 530.3247,324.0426 527.1369,320.8548 518.8817,322.8669 515.1727,321.0121 509.8378,318.3447 497.9557,311.9431 489.9187,315.9613 484.1086,318.8664 423.9957,336.9113 417.1877,330.1033 409.6036,322.5192 409.9369,309.7203 402.0357,301.8193 400.2374,300.021 385.8517,311.9323 383.8527,312.9313 378.3536,315.6809 321.3847,328.2453 318.1927,325.0533 311.5491,318.4097 295.9067,327.9583 289.9087,315.9619 286.8461,309.8368 296.3308,287.3529 288.8985,283.6369 271.3675,274.8714 257.7145,307.7499 250.5125,314.9519 242.6225,322.8519 231.0125,307.2019 220.2125,309.9019 Z"
        fill="none"
        stroke="red"/>
</svg>

没有转变:

<svg    xmlns="http://www.w3.org/2000/svg"
        preserveAspectRatio="xMidYMax"
        viewBox="812896.94 6695163.911 37373.381 32963.7">

<path   d="M820992.53 6697707.2c-721.11 138.715-414.816 1397.336-844.512 1612.188-222.27 111.135-649.55-572.774-767.752-690.946-544.79-544.79-1799.832 1108.916-1996.064 1305.148-575.83 575.83 888.896 965.656 998.032 1074.792 238.412 238.412 76.775 1338.436 76.775 1688.948 0 879.32-397.1 2890.812 0 3685.012 366.75 733.498 1599.11 2099.044 1535.42 2226.344-705.04 1410.104-4613.13 160.39-6295.31 1842.544-192.97 192.97-975.84 1711.14-767.76 1919.304 162.82 162.822 578.21 1033.98 1074.79 537.403 32.72-32.722 490.65-507.376 537.4-460.628 695.48 695.48 27.74 2254.08 690.94 2917.33 303.21 303.21 1414.51-1809.94 1996.065-1228.31 571.533 571.53 7.995 1773.76 614.17 2379.94 447.84 447.83 2239.19-447.84 2686.98 0 265.63 265.62 405.133 865.79 614.17 1074.79 247.32 247.32 903.26 58.76 1228.313 383.86 446.13 446.13-.157 1688.87 460.623 2149.58 583.56 583.55 1419.15 1035.27 1996.065 1612.18 914.204 914.2 1122.596 2888.3 2226.344 3992.13 184.534 184.53 511.812-102.37 767.75-153.55 130.735-26.147 962.312 112.51 1074.792 0 348.535-348.537 902.27-144.036 1381.907-383.86 1300.894-650.456 1074.794 1375.6 1074.794 2533.46v537.402c0-157.11 4429.05 177.21 4759.803-153.546 498.664-498.668-315.69-1757.12 153.54-2226.345 184.916-184.923 1401.97-1285.01 1919.305-767.752 13.062 13.063 596.704 631.64 767.75 460.627 710.524-710.52 384.15-3531.793 1074.792-4222.405 205.29-205.29-70.665-1163.786 76.776-1458.666 196.384-392.778 899.384-592.316 1228.31-921.27 2750.366-2750.37 2266.7 2416.34 4913.4-230.32 1193.658-1193.66-207.7-6471.4-76.773-6602.35 1033.295-1033.298 2726.803-2305.99 3301.21-3454.73 238.413-476.83 0-1693.89 0-2226.348 0-651.31 124.975-1467.56-76.774-2072.826-416.82-1250.5-1553.21 673.14-2686.98-460.626-358.766-358.77-153.543-1639.93-153.543-2226.343 0-1908.67-1272.55 295.4-1458.67-76.78-600.54-1201.105 869.29-1433.817-537.407-2840.577-242.27-242.27-869.665-89.355-1151.55-230.32-405.45-202.724-1308.49-689.245-1919.303-383.86-441.566 220.785-5010.147 1592.2-5527.555 1074.79-576.39-576.39-551.06-1549.11-1151.55-2149.584-136.67-136.67-1229.987 768.59-1381.91 844.51-417.93 208.97-4747.57 1163.864-4990.16 921.27-504.91-504.91-1693.737 220.78-2149.585-690.945-232.756-465.51 488.08-2174.282-76.774-2456.7-1332.357-666.18-2369.985 1832.59-2917.337 2379.94-599.64 600.4-1482-589-2302.8-383.8z"
        fill="none"
        stroke="red"
        stroke-width="76"/>
</svg>

当然,我认为绝对坐标也是可能的。

也许我需要将这些SVG转换为geo.path()。但它是否受到支持?

0 个答案:

没有答案