web-dev-qa-db-fra.com

Comment faire des cartes hors ligne (en utilisant le dépliant OSM), en mettant en cache?

J'essaie de créer des cartes hors ligne via la mise en cache (IndexedDB) dans le navigateur. Je comprends que le concept est que je télécharge et stocke d'abord les tuiles de la carte lorsque je suis connecté à Internet.

Ensuite, je dois charger les tuiles logiquement hors ligne.

Cependant, je ne suis pas en mesure de le comprendre.

Comment puis-je les stocker et comment les recharger logiquement? Je suis coincé ici. J'utilise le leaflet API pour les cartes. Comment cela peut-il être mis en œuvre?

22
Abhi Ram A

Voir mes recherches approfondies à ce sujet à:

Stockage des données d'image pour une application Web hors ligne (base de données de stockage côté client)

et à:

https://gis.stackexchange.com/questions/44813/database-for-offline-slippy-map-tiles

La clé de ce que vous voulez faire est une couche de tuiles fonctionnelles pour obtenir des éléments de la base de données:

https://github.com/ismyrnow/Leaflet.functionaltilelayer

BTW, je suis en train de tester PouchDB pour cela, qui est beaucoup plus propre que l'IndexeDB brut.

Suivez mes résultats sur:

https://groups.google.com/forum/?fromgroups#!topic/pouchdb/RG6wUsAi2R

11
Dr.YSG

J'ai un exemple d'implémentation de cache http://tbicr.github.com/OfflineMap/leaflet/index.html et du code https://github.com/tbicr/OfflineMap/tree/master/leaflet_idb_sql_site .

Pour le stockage, utilisez IndexedDB et WebSQL. Le stockage avait de faibles performances et n'a pas été testé.

5
tbicr

Je travaille sur une solution pour le même problème. Stocker des tuiles à partir d'un serveur de tuiles et les charger à partir de la base de données dans leafletjs.

J'ai implémenté une couche personnalisée qui charge les tuiles à partir d'une base de données (indexeddb/webdatabase) si disponible, et les substitutions à un serveur de tuiles (qui a l'en-tête Access-Control-Allow-Origin, voir https: //developer.mozilla. org/en-US/docs/Web/HTTP/Access_control_CORS # Access-Control-Allow-Credentials )

J'ai implémenté un contrôle qui enregistre les tuiles actuellement affichées dans indexeddb ou webdatabase.

Le code est activé https://github.com/allartk/leaflet.offline Ceci est toujours en cours en ce moment!

3
Allartk