Suite

Comment obtenir les tuiles sur l'événement tileload et les stocker localement ?


J'utilise openlayers3 pour faire une petite démo de cartographie, maintenant ce que je veux faire, c'est quand l'utilisateur visite la démo de carte la première fois, bien sûr les tuiles sont chargées à partir d'Internet, donc la première fois, j'aimerais vraiment stocker les tuiles de la carte localement, de sorte que lorsque l'utilisateur visite la carte la seconde fois que les tuiles sont chargées à partir du stockage local de l'appareil de l'utilisateur plutôt que depuis Internet. Jusqu'à présent j'ai fait CETTE démo.

Voici comment j'initialise la carte:

var map = new ol.Map({ couches : [ new ol.layer.Tile({ source : new ol.source.OSM() }) ], cible : 'map', contrôles : ol.control.defaults({ attributionOptions : /** @type {olx.control.AttributionOptions} */ ({ repliable : false }) }), vue : vue });

Voici comment je reçois une notification, chaque fois qu'une tuile est chargée,

var source = map.getLayers().item(0).getSource(); source.on('tileloadend', function (evt) { console.log('loaded… '); console.log(source.getUrls()); //console.log(tileUrlFunction(evt.tile.getTileCoord(), 1, ol.proj.get('EPSG:3857'))); });

Si vous vérifiez l'url que j'ai posté, vous verrezconsole.log('chargé… ');dans la console. Mais maintenant, quelle fonction/méthode dois-je utiliser pour obtenir la tuile, afin que je puisse la stocker localement ? C'EST À DIRE. stocker la tuile localement ?


Si vous utilisez un fichier XML pour référencer votre carte OSM, vous pouvez créer unCacherparamètre pour faire en sorte que les tuiles de carte soient mises en cache localement.

Voici un exemple de l'un des miens :

  http://tile.openstreetmap.org/${z}/${x}/${y}.png">ici. Faites défiler jusqu'àCacherportion. Vous verrez qu'il y a une certaine personnalisation que vous pouvez faire.


Voir la vidéo: Piano tuiles 2 (Octobre 2021).