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

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

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

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

источник

2015-01-08 chris22smith

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

Для Меркатора-проекции вы найдете формулу здесь: https://stackoverflow.com/a/14457180/459897

А 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-контуром).

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

минимальное-х-значение
макс-х-значение
в мин-у-значение
max-y-value

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

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

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

Demo (рисунок формы США): http://jsfiddle.net/doktormolle/9xhsL39u/

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

источник

2015-01-10 21:59:05

Работает отлично. Без использования декодирования и использования одного полигона мне пришлось отформатировать мои данные следующим образом: var paths = []; polygon.getPaths(). ForEach (function (x) { paths.push (x.getArray()); }); – chris22smith

@ Dr.Mollie спасибо за образец кода! У меня ужасное время, пытаясь сделать рендер полигона как контур, а не заполненный. Просто изменив атрибут fill на none и установив штрих, заполните весь SVG цветом штриха, и ни одна из моих попыток настроить формат пути не сработала. У вас есть понимание того, как можно достичь контура? –

@DaveMorro: установите заливку 'g' в' none' и желаемый штрих для 'path' (вместо' g') https://jsfiddle.net/doktormolle/eg58oupw/ –

Вот базовый 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>

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

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

источник

2015-01-08 21:50:03 AniV

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

ответ

Смежные вопросы