Javascript 创建用作下方图像网格遮罩的贴图

我不确定他是否适合回答这个问题

简介如下:

我要画一幅国家地图。 地图将充当图像网格的遮罩。用户可以上传图片。 可以点击网格上的这些图像，并显示更大的版本。 不必担心浏览器/移动支持。 这是我的意思的附件。试着想象那些是一个黑色的正方形=用户提交的图像

我能想到的解决方案是：

使用CSS剪辑路径。合并用户生成的所有图像，创建网格图像拼贴。将地图创建为SVG，用作剪辑路径的遮罩。网格图像将位于地图后面，并被SVG屏蔽。 我们能用帆布做这个吗？我们可以创建地图边界并进行一些数学计算，这样图像就会很好地位于地图中吗？使用画布库，如easeljs、kineticjs或p5js。 我们可以使用谷歌地图并定制它吗？ 使用d3或snap等库在SVG中执行所有操作。 -

---

我正在考虑如何实现这一点。

CSS掩码或剪辑路径将是AFAICS最简单的方法。此外，与画布相比，它还有一个优势，即蒙面图像可以在悬停等屏幕上保持交互式CSS效果。最棘手的部分是确保图像位于网格中，以便它们在地图上可见，而不是在某个海域。你应该先制作一个版本的图像，将黑色替换为透明的另存为.gif或.png。因此，在这个z-指数下的任何图像都会显示出来，但你会看到海岸的尖锐形状。你可以制作一个css网格；例如class=tile_4_2之类的类，并给出这些位置：absolute。计算图像在地图上的位置很容易。现在，您的瓷砖约为360°世界周长的1°。将顶部纬度除以N.Z.的底部纬度，再除以所需的瓷砖数量。。。