用于记录用户选择的响应图像

Responsive image for recording user selection

我想让用户在 tablet/phone(通过网络浏览器或软件)中点击照片的特定部分,它会记录他们的选择。

基本上我有一些航拍照片,我想放置一个规则的网格(比如顶部 100m x 100m)。此网格将是半透明的,如果未单击 ('off'),每个网格单元格将是透明的,单击时将变为蓝色 ('on')。如果每个网格单元格是 'on' 或 'off',则它会存储一个值。

这最好使用空间参考的 geotiff 图像来完成,但这不是必需的。

我在 GIS 相关软件方面有很多经验,但我正在寻找一个简单的解决方案。

这可能吗? 推荐使用哪些工具、网络语言(html、java 等)或软件。 响应式图像映射在这里似乎很相关,但我不确定?

可以跟踪用户对图像的交互。您可以覆盖可点击的 div 网格,然后简单地监听每个 div.

上的点击

这是我在图像顶部放置 div 的 10x10 网格的方法:
https://jsfiddle.net/o31p99wh/

关键是要知道图像的大小/比例,并确保图块映射到它。例如。每个 35 x 35px 方格映射到 350 x 350m.