3

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

多边形图像

这是坐标的示例：

longitude: -71.09972, latitude: 9.15553

按照这篇文章中的墨卡托投影公式：将 Google Maps 多边形路径转换为 ​​SVG 路径，我得到一个 SVG 路径，它具有如下负值：

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

当我尝试绘制该路径时，没有显示任何图像。但是，当我删除负号时，显示以下 SVG 图像：

SVG 图像

SVG 图像被翻转。有没有办法改变公式以获得正确的值？我需要清理 SVG 路径，这意味着不能使用 CSS 翻转图像。

谢谢并恭祝安康。

4

1 回答 1

1

如果没有看到您的实际SVG输出（以SVG文件格式），很难说问题出在哪里。可能是坐标转换错误，编码错误。

  1. SVG 导出中没有显示图像的最常见原因是错误或没有视口

    例如，这是我的SVG导出之一（玻璃网格轮廓的2D切片用作某些机器的输入）：

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

    预习

    尤其看第一行。并检查您的SVG是否有它。该viewBox属性选择将显示空间的哪一部分，并且是映射到width,height的输出图像分辨率。viewBox您需要设置展位以保持纵横比。

  2. 镜子x（翻转）很容易再次看到相同的例子

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

    预览翻转

    如您所见，我添加了带有变换的标签，以在不更改坐标<g>的情况下翻转整个事物。path我使用scaleand 2x translate（可以用一个来完成，但我想显示值的来源）您也可以使用matrix。比例尺只是反x转轴并平移图像，使其再次居中......

[Edit1] 如果你想要路径中的“干净”点

然后，您需要直接对它们应用变换，因此大写字母（如M,L）表示绝对值......所以对它们应用缩放和平移。小写字母表示相对值，所以只在它们上应用比例，你应该没问题。另一种选择是将其应用于您要导出到SVG的输入多边形。

于 2016-06-22T07:44:22.117 回答