javascript - 传单：使用 GeoJSON 掩码添加图像叠加层

我正在尝试在 Leaflet 地图上添加图像叠加层，但我希望它仅在 geo-json 多面体关闭的区域中绘制（因此将 geo-json 图层视为图像的蒙版）。我要显示的图像是矩形的，没有透明区域。

通过使用 SVG 蒙版，我达到了我的目的。由于 geo-json 被放入 SVG 元素中，我可以用我的图像填充它。

但是当我开始放大时问题就出现了。放置 geo-json 的 SVG 改变了它的大小和形状。它变得比应有的小（因为地图之外的区域已从 SVG 中删除），因此图像不再以它的确切位置为中心。

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

这是我目前提出的代码的一个小提琴：https ://jsfiddle.net/8n3m6t51/

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

但目前我还没有想出如何解决这个问题。

标签： javascriptsvgleafletgeojsonmask