Comment fonctionnent les cartes glissantes?

Question

Les cartes glissantes sont des widgets Web qui permettent à l’utilisateur de se déplacer dans un plan bidimensionnel en le saisissant et en le faisant glisser. Ce contrôle a été rendu populaire par Google Maps et peut être vu sur de nombreux systèmes de cartographie modernes. Lorsque vous les regardez charger, il est évident qu’elles constituent en réalité une grille d’images qui sont chargées au fur et à mesure que les utilisateurs effectuent un panoramique. Ma question est; Comment ces images sont-elles alignées, déplacées et chargées dynamiquement dans HTML / JS / CSS? Sont-ils divs avec des images de fond? Sont-ils chargés dans une div parente avec overflow: hidden? Quelles stratégies utilisent-ils pour éviter les fuites de mémoire lorsque l'utilisateur effectue un panoramique? Existe-t-il des bibliothèques tierces qui facilitent leur construction? Les cartes géographiques ne m'intéressent pas, mais uniquement l'interface couramment utilisée pour les afficher. Merci!

Answer 1

Normalement, une grille d’éléments d’image est déplacée. Lorsque certains s’éloignent de la fin de la visionneuse et deviennent cachés, ils sont déplacés du côté opposé de la grille et les attributs src sont modifiés pour pointer vers la nouvelle mosaïque de la carte.

Tous ceux-ci, comme vous le dites, seront chargés dans un élément parent avec débordement: hidden;

En termes d'exemples, vous pouvez regarder l'implémentation Open Lay Open Layers:

http://openlayers.org/