Google Maps Polygon to SVG Path

Question

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

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

longitude: -71.09972, latitude: 9.15553

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

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

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

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

Спасибо и всего наилучшего.

Answer 1

Не видя фактического вывода 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. Зеркало х (перевернуть) сделано довольно легко, см. Тот же пример снова

   <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.