将Google地图多边形路径转换为SVG路径

Question

当用户使用内置的绘图管理器在Google地图中绘制多边形时,我保存了多边形路径.我想将此多边形路径转换为SVG路径,以便我可以轻松地重现绘制多边形的形状,而无需大量额外的地图加载和对Google Maps API的调用.

我敢肯定这只是一些相当琐碎的数学,但无法解决如何做到这一点.我是否需要在点周围创建一个边界框并在缩小之前将其转换为LatLng 0,0或者我是否可以仅使用每个点的LatLng坐标做一些更简单的事情？

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

Answer 1

您不能直接使用坐标,首先必须根据投影将它们转换为点.

对于mercator-projection,你可以在这里找到公式: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-Airs,由AniV在答案中看到的空格分隔(但我想你知道如何处理svg-path).

转换路径时,创建存储的4个变量:

1. min-x值
2. max-x值
3. 最小值
4. 最大y值

这些变量用于计算viewBoxsvg元素.

这4个参数viewBox是:

1. x:使用minX
2. y:使用minY
3. 宽度:使用(maxX-minX)
4. 身高:使用(maxY-minY)

演示(绘制美国的形状):http://jsfiddle.net/doktormolle/9xhsL39u/

(注意:演示加载maps-API,但仅用于路径解码的目的,使用的路径非常复杂,因此编码.坐标转换/ svg绘图不需要maps-API)