Преобразовать путь многоугольника Карт Google в путь SVG

Когда пользователь нарисовал многоугольник в Картах Google, используя встроенный Диспетчер чертежей, я сохраняю путь многоугольника. Я хочу преобразовать этот путь многоугольника в путь SVG, чтобы можно было легко воспроизвести форму нарисованного многоугольника, не требуя много дополнительных загрузок карты и вызовов API Карт Google.

Я уверен, что это просто довольно тривиальная математика, но я не могу понять, как это сделать. Нужно ли создавать ограничивающий прямоугольник вокруг точек и переводить его в LatLng 0, 0, прежде чем уменьшать его, или я могу сделать что-то попроще, используя только координаты LatLng каждой точки?

Я нашел много вопросов, требующих достижения противоположности, преобразования SVG в полигон карты, но не это. Любые, указывающие мне в правильном направлении, приветствуются.

Источник

2 ответа

Решение

Вы не можете использовать координаты напрямую, вы должны сначала перевести их в точки на основе проекции.

Для проекции меркатора вы найдете формулу здесь: /questions/31578131/preobrazovat-tochku-shirotyi-dolgotyi-v-pikseli-xy-na-proektsii-merkatora/31578136#31578136

Javascript-функция, основанная на этой формуле, может выглядеть так:

/**
  *@param latLng object with properties lat and lng(of the coordinate)
  *@return object with properties x and y(of the translated latLng)
  **/
function latLng2point(latLng){

  return {
          x:(latLng.lng+180)*(256/360),
          y:(256/2)-(256*Math.log(Math.tan((Math.PI/4)
                     +((latLng.lat*Math.PI/180)/2)))/(2*Math.PI))
         };
}

Преобразуйте координаты пути через эту функцию. Путь в SVG представляет собой последовательность x,y-пары, разделенные пробелом, как видно из ответа AniV(но я думаю, вы знаете, что делать с svg-path).

Когда вы преобразуете путь, создайте 4 переменные, в которых вы храните:

  1. мин-х-значение
  2. макс-х-значение
  3. минимальное значение y
  4. max-y-значение

Эти переменные используют для расчета viewBox svg-элемента.

4 параметра для viewBox являются:

  1. х: использовать minX
  2. у: использовать minY
  3. ширина: использовать (maxX-minX)
  4. высота: использовать (maxY-minY)

Демо (рисует форму США): http://jsfiddle.net/doktormolle/9xhsL39u/

(Примечание: демонстрационная программа загружает API-интерфейс maps, но только с целью декодирования пути, используемые пути очень сложны и поэтому кодируются. API-интерфейс maps не требуется для преобразования-преобразования /svg-drawing)

Источник

Вот базовый HTML-код для рисования многоугольника, когда у вас есть набор точек, вы можете встроить его в функцию Javascript и вызвать с объектом карты.

<!DOCTYPE html>
<html>
<body>

<svg height="210" width="500">
<polygon points="200,10 250,190 160,210,102,108" style="fill:red;stroke:purple;stroke-     width:1" />
</svg>
</body>
</html>

Здесь вы можете заменить координаты x и y переменными для широты и долготы для определенного местоположения, которое пользователь ввел, чтобы нарисовать многоугольник на карте. Например, для первой точки x1 = 200 и y1 = 10 и аналогично.

Надеюсь, это поможет!

Источник
Другие вопросы по тегам