如何从 SVG 路径字符串中获取像素坐标

Question

我想结合使用 go.js 和 leaflet.js 在地图上显示几何对象 对我来说重要的是几何对象坚持他们的地理位置。我只是将像素坐标转换为 lat/lng 地理坐标。

但是，对于某些几何对象来说，获得所有必要的地理坐标并不是那么容易。 对于多边形，我得到一个 SVG-Path 字符串，例如：

"F M54 77 L39 128 L0 146 L18 178 L45 215 L87 220 L79 321 L79 400 L153 371 L246 340 L296 325 L332 255 L324 207 L355 164 L338 138 L368 105 L380 23 L336 0 L282 35 L222 10 L147 10 L95 38 L60 44z"

以及中间Point的像素坐标。

所以我需要每个角点的像素坐标。 您对如何将 SVG 路径转换为其像素坐标有任何想法或建议吗？

希望你们能帮助我。

最好的问候！

enter image description here

Answer 1

您是否有一个 GoJS Part（或 Node），其中包含一个 Shape，其 Shape.geometryString 是您发布的内容？

如果是这样，我建议你看看Shape.geometry，看看它的Geometry.figures'PathFigures 和他们的PathSegments。对于这些点中的每一个，您都可以通过添加Part.position 加上一半的Shape.strokeWidth 来转换为GoJS 文档坐标。然后可以调用 Leaflet map 的containerPointToLatLng 方法将文档坐标转换为 LatLng。