Leaflet.Draw 矩形的自定义波浪路径

Question

如何将自定义路径样式应用于 Leaflet.draw 中的矩形？我一直在玩 CSS 并且可以设置它的样式，但我只能使用 stroke-width、stroke-dasharray 等。我们正在构建一个允许人们标记照片并希望实现“照片”的地图框架”之类的感觉。可以吗？

Answer 1

例如，我会这样做：

1. 一旦用户绘制了一个矩形，检索矩形尺寸。寻找"draw:created" event。
2. 根据这些尺寸为自定义 SVG 框架生成代码。
3. 将 SVG 插入地图（可能替换 Leaflet.draw 矩形），类似于图像叠加层。

对于最后一步，您可能需要稍微修改 L.imageOverlay 代码，使其添加 SVG 容器而不是图像，但这样做应该没有任何困难。

您可能对以下内容感兴趣：

• Is it possible to stretch a imageOverlay in leaflet?（但看起来它在文件中使用了 SVG，而不是动态生成）
• How can I make a custom SVG overlay on Leaflet without using D3?（无人接听）

如果您的自定义 SVG 框架不需要动态生成（即您可以将其导出到一个独立的文件中，并且它会根据其显示的大小自动调整其“波浪”），那么标准的图像叠加就足够了.