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框架不需要動態生成（即，您可以將其導出爲獨立文件，並根據其顯示的大小自動調整其「波形」），那麼標準的圖像覆蓋甚至可以足夠。