Responsive Bild zum Aufzeichnen der Benutzerauswahl

Question

Ich möchte Benutzern erlauben, auf einen bestimmten Teil eines Fotos in einem Tablet/Telefon (über einen Webbrowser oder Software) zu klicken, und es wird ihre Wahl aufzeichnen.

Im Wesentlichen habe ich einige Luftaufnahmen und ich möchte ein regelmäßiges Gitter (sagen wir 100m x 100m über die Spitze). Dieses Gitter wäre halbtransparent, und jede Gitterzelle wäre klar, wenn nicht geklickt ("aus") und blau wird, wenn geklickt wird ("an"). Jede Gitterzelle würde einen Wert speichern, wenn sie "an" oder "aus" ist.

Dies würde vorzugsweise unter Verwendung eines raumbezogenen Geotiff-Bildes erfolgen, ist jedoch nicht wesentlich.

Ich habe viel Erfahrung in GIS-Software, aber ich bin auf der Suche nach einer einfachen Lösung.

Ist das möglich? Welche Tools, Web-Sprachen (HTML, Java usw.) oder Software wird empfohlen. Responsive Image Maps scheinen hier relevant zu sein, aber ich bin mir nicht sicher?

Answer 1

Tracking Benutzerinteraktion über ein Bild ist möglich. Sie können ein Raster von anklickbaren div überlagern, und hören Sie einfach auf Klicks auf jedem div. Hier

ist ein Ansatz, wo ich Platz einen 10x10 Raster von div oben auf ein Bild:
https://jsfiddle.net/o31p99wh/

Der Schlüssel ist, um die Größe/Skalierung des Bildes zu kennen, und stellen Sie sicher, dass die Fliesen abgebildet werden dazu. Z.B. jede 35 x 35px quadratische Karten zu 350 x 350m.