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

Question

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

Answer 1

我会这样做，例如：

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

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

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

• 是否可以在传单中拉伸 imageOverlay？（但看起来它在文件中使用了 SVG，而不是动态生成）
• 如何在不使用 D3 的情况下在 Leaflet 上制作自定义 SVG 覆盖？（没有答案）

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