javascript - 矩阵变换 : Converting SVG path coordinates to Leaflet coordinate system

Question

简短版本:如何将 SVG 路径添加到 Leaflet map ，以便在 map 坐标更改时(例如缩放更改或滑动时)路径会更新？

长版:你好，我有一个地形image包含建筑轮廓。对图像进行地理校正后，我使用 Photoshop 将栅格数据转换为 SVG .我知道描述 SVG 周边的边界框的地理坐标，并且知道 SVG 路径元素的内部坐标。我想知道现在将上面 SVG 的路径元素中描述的建筑物添加到 Leaflet map 的最佳方法。

这是一个 fiddle ，它以红色显示 SVG 图像的边界框，以蓝色显示建筑物:http://jsfiddle.net/duhaime/4vL925Lj/如您所见，建筑物尚未根据边界框正确定向。

我最初对齐建筑物的计划是使用一次性脚本将路径元素从 SVG 坐标系转换为纬度、经度坐标，然后使用我用来绘制的折线函数在 map 上绘制建筑物边界框:

var polyline = L.polyline(
  [upperLeft, upperRight, lowerRight, lowerLeft, upperLeft], 
  {color: 'red', className: 'bounding-box', weight: 2}
).addTo(map); 

这种方法的问题在于 Leaflet 折线无法绘制贝塞尔曲线，而贝塞尔曲线出现在上面的 SVG 路径元素中。作为一种解决方法，我认为我可以对贝塞尔曲线使用线性近似值，尽管这可能需要大量工作。

最终我意识到上面 fiddle 中边界框的 SVG 使用贝塞尔曲线，这让我想到我可以使用矩阵变换将建筑 SVG 的坐标空间转置到 Leaflet 坐标空间中。上面的 fiddle 使用示例矩阵变换 css 规则来变换建筑层。

在深入这个兔子洞之前，我想问:其他人认为将上面 SVG 中描述建筑物的路径添加到 fiddle 中的 Leaflet map 的最佳方法是什么？如果其他人可以就此问题提供任何建议，我将不胜感激!

进展:我决定简化这个问题并弄清楚如何使用矩阵变换将一个 div(“A”)转换为另一个 div(“B”)的纵横比。在这样做的过程中，我做了一个小 Python script它将输入 div A 的像素坐标和所需的输出 div B 的像素坐标作为输入。此脚本生成变换矩阵 X，使得 AX=B。该脚本在内部记录，并附有 fiddle .

我还做了一个gist导出变换矩阵以将 SVG 空间中的点投影到适当的经纬度坐标中。最坏的情况是，我可以划分 SVG 路径元素，将每个点与变换矩阵进行点积，然后用传单绘制多段线来绘制建筑物。但是，这将失去贝塞尔曲线......

Answer 1

这花了很多时间，但我找到了解决方案。

阅读之后，我意识到可以通过识别变换矩阵将点从一个坐标空间(例如 SVG 坐标空间)转置到另一个坐标空间(例如纬度/经度坐标空间)，然后乘以通过该变换矩阵输入空间(SVG)。此操作会将给定点转置到 map 中的适当位置。

我写了this script计算所需的变换矩阵。该脚本将 SVG 的边界框坐标和从中提取 SVG 元素的地理校正 geotiff 的边界框坐标作为参数。该脚本生成变换矩阵并展示如何将 SVG 空间中的点乘以该矩阵以找到它们合适的纬度/经度坐标。

有一个问题——需要在没有任何 CSS 转换的情况下表示 SVG 中的点。为了直接表示 SVG 点在 SVG 中的位置，我使用 this tool 将 SVG 中的路径元素转换为多边形元素。 , 为此 source是公开可用的。

如果其他人需要完成类似的任务，这里是我使用的完整工作流程:

1. 找到感兴趣的栅格 map (jpg/tiff)。
2. 使用 QGIS、ArcGIS 或 MapWarper 对 map 进行地理校正。这会产生一个 geotiff。
3. 下载并安装 GDAL ，一个强大的地理空间库，带有 Python 绑定(bind)。
4. 在 Adob​​e Illustrator 中对 Geotiff 中感兴趣的特征(例如建筑物)运行图像跟踪。这会产生一个矢量图层；将矢量图层保存为 SVG 文件。
5. 如果有<rect>或您保存的 SVG 中的其他几何形状，将它们转换为路径并重新保存。
6. 确定您的 SVG 边界框坐标和您作为 Illustrator 输入输入的 Geotiff。后者的边界框可以通过运行 gdalinfo {your-geotiff-file.tif} 从 GDAL 获得。
7. 在上面引用的脚本中内嵌那些边界框坐标。然后将您的 SVG 划分为 <polygon> 的数组元素，并且对于每个元素，将多边形拆分为点数组。将每个点乘以变换矩阵以找到该点的纬度/经度位置。
8. 将每个形状的每个点保存为适当的 geojson 格式，以便您可以将数据加载到客户端。

就其值(value)而言，我用于生成矩阵变换和转置的脚本 <polygon>元素指向纬度/经度空间是 here .请注意脚本中的某些路径需要根据您的情况进行更新——例如该脚本将输出 geojson 推送到我的实验室管理的 S3 存储桶:)

我希望这对发现自己面临这项任务的其他人有所帮助!坦率地说，我很惊讶这需要付出如此多的努力，并且我很确定必须有一个更优雅的工作流程......