将Google Maps多边形路径转换为SVG路径

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

的最小x值
最大-x值
的最小y值
最大y值

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

的4个参数的viewBox是：

X：使用minX
ÿ：使用minY
宽度：使用(maxX-minX)
高度：使用(maxY-minY)

演示（绘图美国的形状）：http://jsfiddle.net/doktormolle/9xhsL39u/

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

来源

2015-01-10 21:59:05

完美地工作。没有使用解码和使用单个多边形，我不得不像这样格式化我的数据： var paths = []; （）函数（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>

在这里可以更换x和与纬度和经度变量用户具有输入以绘制多边形上map.For例如用于第一点X1 = 200和y 1中的特定位置y坐标= 10，同样。

希望这会有所帮助！

来源

2015-01-08 21:50:03 AniV

将Google Maps多边形路径转换为SVG路径

回答

相关问题