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

问题描述

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

我确定这只是一些相当琐碎的数学，但不知道如何去做.我是否需要在点周围创建一个边界框并将其转换为 LatLng 0, 0，然后再将其缩小，或者我是否可以仅使用每个点的 LatLng 坐标来做一些更简单的事情?

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

解决方案

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

对于墨卡托投影，您可以在此处找到公式:https://stackoverflow.com/a/14457180/459897

基于此公式的 javascript 函数可能如下所示:

/***@param latLng 对象，具有 lat 和 lng(坐标)属性*@return 具有 x 和 y 属性的对象(翻译后的 latLng)**/函数 latLng2point(latLng){返回 {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-pairs，由空格分隔，如 AniV 的答案所示(但我想您知道如何处理 svg-path).

当您转换路径时，创建 4 个存储变量:

1. 最小 x 值
2. 最大 x 值
3. 最小 y 值
4. 最大 y 值

这些变量用于计算 svg 元素的 viewBox.

viewBox 的 4 个参数是:

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

Demo(绘制美图):http://jsfiddle.net/doktormolle/9xhsL39u/

(注意:演示加载了maps-API，但只是为了路径解码，使用的路径非常复杂，因此编码.maps-API不是必需的坐标转换/svg-绘图)

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屋！