传单：使用GeoJSON蒙版添加图像叠加层

Question

我正在尝试在Leaflet地图顶部添加图像叠加层，但我希望仅在geo-json多边形关闭的区域中绘制图像（因此请将geo-json图层视为图像的蒙版） ）。 The image I want to display是矩形，没有透明区域。

通过使用SVG蒙版，可以实现我的目的。由于geo-json放在SVG元素中，因此我可以用图像填充它。

https://gyazo.com/069ecec5904026d5f4d0624c6f1a2a7e

但是当我开始放大时会出现问题。放置geo-json的SVG会更改其大小。它变得比原来的要小（因为从SVG中删除了地图外部的区域），因此图像不再以其精确位置为中心。

https://gyazo.com/68148043d5ff3d11c0a13aa1d29c197b

如您所见，在缩放和平移地图时，图像都会移动，这是因为显示geo-json的SVG会更改其宽度和高度。

以下是我目前提出的代码：https://jsfiddle.net/8n3m6t51/

我可以考虑几种解决方案：

• 强制传单始终绘制整个geo-json区域，甚至是屏幕外的多边形或区域。
• 使用ImageOverlay并将其设置为蒙版（但是我认为这是不可能的）。

但是目前我还没有弄清楚该问题的解决方法。