-1

我正在处理的项目涉及解析 SVG、提取路径坐标、将它们转换为众所周知的文本,然后转换为 GeoJSON 以添加到 Google Maps API 数据层。

这一切都可以正常工作,直到路径中有一个或多个洞。在这种情况下,我正在处理描述大量相互连接的道路的单一复合路径。我正在使用SVG-to-WKT来生成 WKT,它的路径函数指出,如果路径中有孔,则返回的原语将转换为减法多边形语法,孔的坐标数组位于坐标数组之后大纲。该多边形似乎可以正确转换为 GeoJSON(使用Terraformer),从而生成一组坐标数组。然后将由此转换产生的像素坐标转换为地图坐标。

但是,当将 GeoJSON 添加到数据层时,孔的坐标会变形并出现在其预期位置的左上角,一些多边形在两点之间延伸。

这只是结果的一小部分摘录(不显示拉伸):http ://bl.ocks.org/d/4ace4c9c25e02ad658be21c92187b336

如果缩小,您会注意到应该在道路底部切割一个洞的小矩形。

下面是道路组如何存在于 SVG 中的屏幕截图,其中选择了单个复合路径:

在此处输入图像描述

这就是整个道路路径组的渲染方式:

在此处输入图像描述

我真的不知道还能尝试什么。我想可能是因为孔的坐标不是顺时针方向,所以我添加了一个函数来检查并在必要时反转数组并且它没有改变任何东西。我最初是通过SVGOMG运行 SVG ,但主要是为了将原语转换回路径。

4

1 回答 1

0

这个问题原来是相当微不足道的,但花了一段时间才意识到。我将 SVG 缩减为一条路径,并仔细研究了坐标数据。我注意到这些孔被添加为相对路径而不是绝对路径。这对于 SVG 来说是正常的,但是 WKT 转换器会假设每个路径都是绝对的。

我只是添加了Snap库并通过 toAbsolute() 函数传递了每个路径。

于 2018-01-23T08:31:07.193 回答