谷歌地图多边形转换为SVG路径

Question

我拥有绘制以下多边形的谷歌地图API坐标：

以下是坐标示例：

longitude: -71.09972, latitude: 9.15553

根据这篇文章中的墨卡托投影公式：将Google地图多边形路径转换为SVG路径，我得到了一个具有负值的SVG路径，如下所示：

M-50.559802168888886,121.46151557464762 -50.589327502222226,121.46285530595195 -50.643108835555566,121.428264939842 ...

当我尝试绘制这条路径时，没有图像显示。但是当我去掉负号时，会展示以下SVG图像： 这个SVG图像被翻转了。有办法改变公式以得到正确的值吗？我需要一个干净的SVG路径，也就是说用CSS翻转图像不是一个选项。

谢谢！

- Ricardo Carrera

---

可能需要将路径进行转换，使用 transform="translate(x, y)"，其中你需要自己确定 x 和 y 的值。 - Robert Longson

假设您的经度是-71，公式为x:(latLng.lng+180)*(256/360)，则无法获得负x值。您能分享您的代码吗？ - antonio

将SVG代码作为代码发布（使用4个空格）...请查看我的答案以了解如何操作，并检查您是否遗漏了一些可能性。 - Spektre

Answer 1

看不到您实际的SVG输出（以SVG文件格式），很难确定问题所在。可能是错误的坐标转换，或者错误的编码。

1. The most often cause of no image shown in SVG export is wrong or no viewport

   For example this is one of my SVG exports (2D slice of glass mesh profile used as input for some machinery):

   <svg width="512" height="512" viewBox="-84.609371 -84.500872 461.177478 1568.45906" stroke-width="1.5px" stroke="black" fill="none" >
    <path stroke="blue" stroke-width="1px" d="M 285.581417 0.067317 l 6.4185 12.837 l -3.2093 1386.3928 l -0.000617 0.092881 l -288.79 -0.039845 "/>
    <path stroke="red" stroke-width="1px" d="M 285.581417 0.067317 l -38.5109 1222.7214 l -16.0462 22.4647 l -41.7202 16.0462 l -189.3453 0 "/>
   </svg>
   

   

   Take a look especially on the first line. And check if your SVG has it. The viewBox property selects which part of the space will be shown and width,height are the output image resolution where the viewBox is mapped to. You need to set booth to maintain aspect ratio.

2. The mirror x (flip) is done quite easily see the same example again

   <svg width="512" height="512" viewBox="-84.609371 -84.500872 461.177478 1568.45906" stroke-width="1.5px" stroke="black" fill="none" >
    <g transform="scale(-1.0,1.0) translate(+84.609371,0.0) translate(-461.177478,0.0)">
     <path stroke="blue" stroke-width="1px" d="M 285.581417 0.067317 l 6.4185 12.837 l -3.2093 1386.3928 l -0.000617 0.092881 l -288.79 -0.039845 "/>
     <path stroke="red" stroke-width="1px" d="M 285.581417 0.067317 l -38.5109 1222.7214 l -16.0462 22.4647 l -41.7202 16.0462 l -189.3453 0 "/>
    </g>
   </svg>
   

   

   As you can see I added <g> tag with transform to flip the whole thing without changing path coordinates. I use scale and 2x translate (can be done with one but I wanted to show where the values comes from) You can also use matrix instead. The scale just inverts x axis and translates shift the image so it is centered again ...

如果你想要路径上的“干净”点

那么你需要直接对它们应用变换，这样大写字母（如M，L）表示绝对值...所以在它们上面同时应用比例和平移。小写字母表示相对值，所以只需应用比例即可。另一个选择是将其应用于导出到SVG的输入多边形。

- Spektre