SVG с координатами на карте с помощью Leaflet, D3 или др.

У меня есть несколько инфографик, созданных в Inkscape и Illustrator, и я хотел бы показать их на базовой карте OpenLayers с помощью Leaflet.

Экспорт графики в SVG не проблема. Поскольку я уже спроектировал их в сферическом Меркаторе (EPSG: 3857, так же, как Google, OpenStreetMap и т. д.), мне не нужно никакого повторного проецирования.

В Интернете я нашел много тем о SVG, Leaflet и D3.js, но большинство из них были о загрузке точек GeoJSON или TopoJSON. Я не могу использовать GeoJSON или TopoJSON, так как моя инфографика содержит кривые, и я не хочу преобразовывать эти кривые (безье и т. д.) в линии.

Можно ли загрузить эти 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(). Но поддерживается ли он вообще?


person Lars-Daniel Weber    schedule 11.12.2015    source источник
comment
Вы можете спроецировать координаты одного угла SVG, который вы хотите включить, и расположить его по этому углу.   -  person Lars Kotthoff    schedule 12.12.2015
comment
@LarsKotthoff Не могли бы вы дать мне еще одну важную подсказку, как это сделать? Я читал об этом целый день, но либо SVG загружается статически в фиксированной позиции, либо вообще не загружается.   -  person Lars-Daniel Weber    schedule 12.12.2015
comment
См. stackoverflow.com/questions/21209549/ - вы можете загрузить SVG, а затем поместить его в элемент g, который вы можете расположить соответствующим образом.   -  person Lars Kotthoff    schedule 12.12.2015
comment
@LarsKotthoff Спасибо за помощь, думаю, я слишком глуп для этого :(   -  person Lars-Daniel Weber    schedule 12.12.2015
comment
Ну, в первом ответе есть в основном полный пример. Я предлагаю вам сначала попробовать загрузить SVG и расположить его в каком-нибудь месте. Затем вы можете беспокоиться о проецировании угловой координаты, чтобы получить правильный перевод.   -  person Lars Kotthoff    schedule 12.12.2015