Путь полигона Google Maps к пути SVG

У меня есть координаты, которые рисуют следующий многоугольник в API карт Google:

Изображение многоугольника

Вот пример координат:

longitude: -71.09972, latitude: 9.15553

Следуя формуле проекции Меркатора из этого сообщения: ">Преобразование пути многоугольника Google Maps в путь SVG, я получаю путь SVG с отрицательными значениями, например:

M-50.559802168888886,121.46151557464762 -50.589327502222226,121.46285530595195 -50.643108835555566,121.428264939842 ...

Когда я пытаюсь нарисовать этот путь, изображение не отображается. Однако, когда я удаляю отрицательный символ, покажите следующее изображение SVG:

SVG-изображение

Изображение SVG перевернуто. Есть ли способ изменить формулу, чтобы получить правильное значение? Мне нужен чистый путь SVG, это означает, что перевернуть изображение с помощью CSS не вариант.

Спасибо и привет.


google-maps svg math polygon mercator
person Ricardo Carrera    schedule 22.06.2016    source источник
comment
переведите путь, возможно, transform=translate(x, y), где вам нужно будет определить x и y самостоятельно   -  person Robert Longson    schedule 22.06.2016
comment
Учитывая ваши долготы -71 и формулу x x:(latLng.lng+180)*(256/360), вы не можете получить отрицательные значения x. Можете ли вы опубликовать свой код?   -  person antonio    schedule 22.06.2016
comment
Опубликуйте SVG как код (намеревается на 4 пробела)... посмотрите мой ответ, чтобы узнать, как это сделать, и проверьте, не пропустили ли вы то, что в нем есть.   -  person Spektre    schedule 22.06.2016

Ответы (1)


arrow_upward
1
arrow_downward

Не видя фактического вывода SVG (в формате файла SVG), трудно сказать, в чем проблема. Это может быть неправильное преобразование координат, неправильная кодировка.

  1. Самая частая причина того, что изображение не отображается при экспорте SVG, неправильное или отсутствует окно просмотра

    Например, это один из моих экспортов SVG (2D фрагмент профиля стеклянной сетки, используемый в качестве входных данных для некоторых механизмов):

    <svg width="512" height="512" viewBox="-84.609371 -84.500872 461.177478 1568.45906" stroke-width="1.5px" stroke="black" fill="none" >
 <path stroke="blue" stroke-width="1px" d="M 285.581417 0.067317 l 6.4185 12.837 l -3.2093 1386.3928 l -0.000617 0.092881 l -288.79 -0.039845 "/>
 <path stroke="red" stroke-width="1px" d="M 285.581417 0.067317 l -38.5109 1222.7214 l -16.0462 22.4647 l -41.7202 16.0462 l -189.3453 0 "/>
</svg>

    предварительный просмотр

    Обратите особое внимание на первую строку. И проверьте, есть ли он в вашем SVG. Свойство viewBox выбирает, какая часть пространства будет отображаться, а width,height — разрешение выходного изображения, на которое сопоставляется viewBox. Вам нужно настроить стенд для сохранения соотношения сторон.

  2. Зеркало x (флип) выполняется довольно легко, см. тот же пример еще раз

    <svg width="512" height="512" viewBox="-84.609371 -84.500872 461.177478 1568.45906" stroke-width="1.5px" stroke="black" fill="none" >
 <g transform="scale(-1.0,1.0) translate(+84.609371,0.0) translate(-461.177478,0.0)">
  <path stroke="blue" stroke-width="1px" d="M 285.581417 0.067317 l 6.4185 12.837 l -3.2093 1386.3928 l -0.000617 0.092881 l -288.79 -0.039845 "/>
  <path stroke="red" stroke-width="1px" d="M 285.581417 0.067317 l -38.5109 1222.7214 l -16.0462 22.4647 l -41.7202 16.0462 l -189.3453 0 "/>
 </g>
</svg>

    превью перевернуто

    Как видите, я добавил тег <g> с преобразованием, чтобы перевернуть все это без изменения координат path. Я использую scale и 2x translate (можно сделать с одним, но я хотел показать, откуда берутся значения). Вместо этого вы также можете использовать matrix. Масштаб просто инвертирует ось x и сдвигает изображение, чтобы оно снова оказалось в центре...

[Edit1], если вы хотите "очистить" точки на пути

Затем вам нужно применить преобразование к ним напрямую, чтобы прописные буквы (например, M,L) означали абсолютные значения... поэтому применяйте к ним как масштаб, так и перевод. Строчные буквы означают относительные значения, поэтому применяйте к ним просто масштаб, и все будет в порядке. Другой вариант — применить это к входному полигону, который вы экспортируете в SVG.

person Spektre    schedule 22.06.2016