Je développe une application web qui affiche des marqueurs animés sur une carte Leaflet. La carte est zoomée par programmation sur les premières limites d'animation, puis l'animation est jouée, puis la carte est zoomée sur les secondes limites d'animation et la deuxième animation est jouée, et ainsi de suite ...Comment précharger des vignettes de feuillets de limites connues dans le cache du navigateur pour un affichage plus rapide?
Mon problème est que le OpenStreetMap le temps de chargement des dalles dépasse parfois la durée de l'animation, de sorte que la carte est partiellement chargée ou même pas chargée lorsque l'animation du marqueur atteint sa fin. Comme je sais depuis le début toutes les limites que je vais zoomer, je voudrais faire des appels ajax pour télécharger toutes les images de tuiles utiles à l'avance (avant que l'animation ne commence) pour être sûr qu'elles sont dans le navigateur cache quand j'en ai besoin.
J'ai beaucoup cherché et je ne trouve pas un moyen d'obtenir une liste d'URL de carreaux à partir des limites de Leaflet. Existe-t-il un moyen de charger manuellement les tuiles dans le cache du navigateur pour les limites connues et le niveau de zoom?
SOLUTION grâce à: réponse YaFred
Voici le code de pré-charger les carreaux autour de "mypolyline" avec 20% padding:
var bounds = mypolyline.getBounds().pad(0.2);
var zoom = map.getBoundsZoom(bounds);
var east = bounds.getEast();
var west = bounds.getWest();
var north = bounds.getNorth();
var south = bounds.getSouth();
var dataEast = long2tile(east, zoom);
var dataWest = long2tile(west, zoom);
var dataNorth = lat2tile(north, zoom);
var dataSouth = lat2tile(south, zoom);
for(var y = dataNorth; y < dataSouth + 1; y++) {
for(var x = dataWest; x < dataEast + 1; x++) {
var url = 'https://a.tile.openstreetmap.fr/osmfr/' + zoom + '/' + x + '/' + y + '.png';
var img=new Image();
img.src=url;
}
}
Il combine ses deux réponses. Quand une animation est en cours d'exécution, je suis maintenant en mesure de précharger des tuiles pour le prochain à venir. Cela fonctionne fantastique.