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

Question

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

但是，对于某些几何对象来说，获得所有必要的地理坐标对我来说并不容易。对于多边形，我得到一个 SVG 路径字符串，如下所示:

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

以及中间点的像素坐标。

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

希望大家能够帮助我。

最诚挚的问候!

enter image description here

Answer 1

你有 GoJS Part (或 Node )持有一个 Shape ，其 Shape.geometryString是你发布的内容吗？

如果是这样，我建议您查看 Shape.geometry 并查看其 Geometry.figures 'PathFigure s和他们的PathSegment s。对于每个点，您可以通过添加 Part.position 加上一半 Shape.linesWidth 来转换为 GoJS 文档坐标。然后，您可以通过调用Leaflet map 的containerPointToLatLng方法将文档坐标转换为LatLng。