将Google Maps多边形路径转换为SVG路径 [英] Convert a Google Maps polygon path to an SVG path

问题描述

当用户使用内置的图形管理器在Google地图中绘制多边形时，我保存多边形路径。我希望将此多边形路径转换为SVG路径，以便我可以轻松再现绘制的多边形的形状，而不需要大量额外的地图加载和调用Google Maps API。

我确定这只是一些相当微不足道的数学，但不知道如何去做。我需要在点周围创建一个边界框，并将其转换为LatLng 0,0，然后再缩小它，还是可以使用每个点的LatLng坐标来简化操作？

我发现很多问题要求实现相反的效果，将SVG转换为地图多边形，但不是这样。任何指向正确方向的人都会赞赏。

解决方案

不能直接使用坐标，首先必须将它们转换为点基于投影。

对于mercator投影，您可以在这里找到公式： https://stackoverflow.com/a/14457180/459897

基于此公式的JavaScript函数可能如下所示： p>

  / ** 
 * @ param latLng对象，具有属性lat和lng（坐标）
 * @返回带有x和y属性的对象
 ** / 
函数latLng2point（latLng）{
 
 return {
x：（latLng.lng + 180）*（256/360），
y：（256/2） - （256 * Math.log（Math.tan（（Math.PI / 4）
 +（（latLng.lat * Math ）/（2 * Math.PI））
}; 
} 
  

通过此函数转换路径的坐标。 svg中的路径是一系列 x，y -pairs，由AniV在答案中看到的空格分隔（但我想你知道如何处理svg

当您转换路径时，请在您存储的位置创建4个变量：

1. 最小x值


2. 最大x值


3. 最小y值


4. 最大y值

这些变量用来计算 viewBox svg-element。

viewBox 的4个参数是：

$ b

1. x ：使用 minX

y ：使用 minY

2. 宽度：use （maxX-minX）


3. 身高：使用 code



演示（绘制美国的形状）： http://jsfiddle.net/doktormolle/9xhsL 39u /

$ b

（注意：）演示加载maps-API，但仅用于路径 - 解码，使用的路径非常复杂，因此被编码。坐标转换/ svg绘图）
不需要maps-API

When a user has drawn a polygon in Google Maps using the built in Drawing Manager I save the polygon path. I want to convert this polygon path to an SVG path so that I can reproduce the shape of the polygon drawn easily, without requiring lots of additional map loads and calls to the Google Maps API.

I'm sure it's just some fairly trivial mathematics but can't work out how to do it. Do I need to create a bounding box around the points and translate it to LatLng 0, 0 before scaling it down or can I do something simpler using just the LatLng coordinates of each point?

I've found lots of questions asking to achieve the opposite, converting SVG to a map polygon but not this. Any pointing me in the right direction appreciated.

解决方案

You can't use the coordinates directly, you first must translate them to points based on a projection.

For the mercator-projection you'll find the formula here: https://stackoverflow.com/a/14457180/459897

A javascript-function based on this formula may look like this:

/**
  *@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))
         };
}

Convert the coordinates of the path via this function. A path in svg is a sequence of x,y-pairs, delimited by a space as seen in the answer by AniV( but I guess you know what to do with a svg-path).

When you Convert the path, create 4 variables where you store:

1. the min-x-value
2. the max-x-value
3. the min-y-value
4. the max-y-value

These variables use to calculate the viewBox of the svg-element.

the 4 parameters for the viewBox are:

1. x: use minX
2. y: use minY
3. width: use (maxX-minX)
4. height: use (maxY-minY)

Demo(drawing the shape of the US): http://jsfiddle.net/doktormolle/9xhsL39u/

(Note: the demo loads the maps-API, but only for the purpose of path-decoding, the used paths are very complex and therefore encoded. The maps-API is not required for the coordinate-conversion/svg-drawing)

这篇关于将Google Maps多边形路径转换为SVG路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！