Come funzionano le mappe slippy?

Question

Le mappe slippy sono widget web che consentono all'utente di spostarsi su un piano bidimensionale afferrandolo e trascinandolo. Questo controllo è stato reso popolare dalle mappe di Google e può essere visto oggi su molti moderni sistemi di mappatura. È ovvio mentre li guardi caricare che in realtà sono una griglia di immagini che vengono caricate quando necessario mentre l'utente esegue la panoramica. La mia domanda è; come vengono allineate, spostate e caricate dinamicamente quelle immagini in HTML / JS / CSS? Sono div con immagini di sfondo? Sono caricati in un div genitore con overflow: nascosto? Quali strategie usano per evitare la perdita di memoria mentre l'utente esegue una panoramica. Esistono librerie di terze parti che semplificano la loro creazione. Non mi interessa il persay delle mappe geografiche, ma solo l'interfaccia che viene comunemente utilizzata per visualizzarle. Grazie!

Answer 1

Normalmente una griglia di elementi di immagine viene spostata e quando alcuni si allontanano dalla fine del visualizzatore e diventano nascosti vengono spostati sul lato opposto della griglia e gli attributi src cambiano in modo da puntare alla nuova tessera della mappa.

Tutti questi, come dici tu, verranno caricati in un elemento genitore con overflow: nascosto;

In termini di esempi puoi vedere l'implementazione Open Layers open source:

http://openlayers.org/