J'ai actuellement une application de carte HTML5 hors ligne (construite sur Leaflet et KendoUI avec des ajouts personnalisés) qui a un manifeste d'application et fonctionne très bien sur plusieurs plates-formes. Cependant, j'hésite à utiliser le manifeste pour stocker les tuiles de carte réelles de cette façon (fichiers PNG stockés sous forme de cache de tuiles de style TMS).
Problèmes:
- Il pourrait y avoir beaucoup de tuiles (10 Mo - 50 Mo) dans environ 1 000 fichiers PNG
- Le téléchargement initial peut être très lent (et difficile de montrer la progression à l'utilisateur)
- Les manifestes d'application fonctionnent ou ne fonctionnent pas s'ils ne le font pas, la mise en cache hors ligne entière échouera (selon [whatwg.org] [1])
- L'utilisateur hors ligne se reconnectera de temps en temps et devra obtenir des rafraîchissements des tuiles, ce sont de petits deltas mais le mécanisme du manifeste de l'application rechargerait tous les fichiers js, css et PNG dès que les mises à jour du manifeste
Idée alternative: séparer l'application Web du stockage des tuiles de carte glissantes. Stockez les tuiles dans une base de données conviviale pour les applications Web
Mise à jour:
[PouchDB a récemment ajouté la prise en charge des blobs binaires. J'obtiens de bons premiers résultats. Voir: /programming/16721312/using-pouchdb-as-an-offline-raster-map-cache ]
- Ceci est suggéré par Ben Nolan http://bennolan.com/2011/06/03/offline-mapping.html
- Travaux similaires sur Maps on a Stick: http://developmentseed.org/blog/2010/oct/02/maps-stick-version-2-released/ ([obsolète] [2])
- MBtiles http://mapbox.com/developers/mbtiles/
- TileStream https://github.com/mapbox/tilestream
- Lous Remi: http://louisremi.com/2011/10/07/offline-web-applications-were-not-there-yet/
Question: Que dit la sagesse collective (et l'expérience) des choix suivants pour une base de données compatible JavaScript:
- SqlLite
- On dirait que vous devez créer un wrapper d'application natif pour cela afin de lui permettre de parler avec JavaScript
- Par exemple, ajoutez votre DLL à un programme natif pour Windows et PhoneGap pour Android / IOS
- WebSQL
- déprécié
- mais c'était un SQL Lite que je pouvais facilement générer et distribuer depuis le serveur web hôte
IndexDB
- Le stockage des objets blob semble fonctionner, voir: https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
- Je suis inquiet si c'est le seul moyen de remplir initialement la base de données
- S'agit-il essentiellement d'un fichier SQLLite? Puis-je l'expédier pour un téléchargement de base de données en masse?
- Je penche vers cette solution. Est-ce que leurs accrochages sont inconnus?
Exigences:
- Population initiale rapide (via téléchargement) vers la base de données Web du client
- Compatible avec l'API Leaflet TileLayer actuelle (c'est-à-dire que je préfère ne pas écrire de couche personnalisée, mais si nécessaire ...) (par exemple MbTiles)
- Plateforme: ordinateurs portables Windows, mais tablettes Android et IOS souhaitées (je peux attendre la sortie d'IndexDB, pas besoin de support immédiat)
- Je préfère ne pas écrire une application native (EXE, IOS, Android) mais si c'est le meilleur moyen ...
- Génération côté serveur de cartes Web (ce sera un processus automatisé). L'utilisateur choisit un emplacement, choisit des cartes, et elles sont transformées dynamiquement et transformées en cache de tuiles glissantes (ce travail est déjà en grande partie effectué).
- Téléchargement initial rapide en masse
- Rafraîchissement du delta de changement de carte (j'écrirai cette logique, basée sur des numéros de stock constants et une logique de date de mise à jour)
- Impact minimal sur l'application Web actuelle de Leaflet et KendoUI
Mise à jour:
Idée d'arrière-plan clé: bien que l'application Web soit assez stable, les tuiles de carte glissantes sont générées à la volée pour votre emplacement et le type de problème que vous faites (à l'arrière-plan). J'ai donc pensé à deux autres façons de transférer le «big bang» initial, puis à mettre à jour:
Fichier Zip (probablement pas une bonne idée - car il ajoute la charge du serveur) également l'expansion sur la machine client nécessitera une interaction de l'utilisateur, mais elle permet aux tuiles glissantes d'utiliser les URL locales
API de fichiers HTML5: je n'ai pas examiné cela en détail. Mais il semble que la plupart des opérations permettent de créer une arborescence de fichiers locale au format TMS: http://www.html5rocks.com/en/tutorials/file/filesystem/ ce qui sera intéressant à tester est la performance (par exemple, puis-je utiliser des œuvres Web pour maximiser la bande passante sur le disque et sur le net). IndexDB n'est pas largement implémenté pour être convivial pour les travailleurs Web (interface de synchronisation: /programming/10698728/indexeddb-in-web-worker-on-firefox
J'ai trouvé quelques informations supplémentaires sur l'utilisation d'IndexDB avec Leaflet:
https://github.com/calvinmetcalf/leaflet.pouch (synchronise couchdb avec indexdb pour hors ligne) Voici également quelques tests pour les vitesses de lecture / écriture pour indexdb, websql et magasin local: http://jsperf.com/indexeddb -vs-localstorage / 15
Et voici comment utiliser l'API de fichier en lecture / écriture à partir de javascript: (et aussi pour demander d'augmenter les limites de stockage) http://www.html5rocks.com/en/tutorials/file/filesystem/
Merci, Tom MacWright (alias tmcw), pour certains bons commentaires. Votre exemple va vraiment aider lorsque j'arriverai à créer des calques personnalisés pour ingérer les blobs binaires.
J'ai fait quelques tests hier avec IndexedDB et en utilisant des polyfills et des bibliothèques, je pense que cela résoudra mes problèmes. Il est maintenant temps de mettre un peu de sueur dans tout cela, et je ferai rapport.
BTW: si vous voulez voir mes résultats de mon étude sur les bases de données côté client voir:
/programming/14113278/storing-image-data-for-offline-web-application-client-side-storage-database
la source
Réponses:
PhoneGap et MBTiles .
WebSQL et IndexDB ne suffiront pas. «Ordinateurs portables Windows» ne sera pas le même code que les appareils mobiles.
la source
Résultats Cache blob hors ligne pour les cartes glissantes PNG
Essai
Récupérer à partir du serveur Web
Espace de rangement
Afficher
Résultats
la source
donc vous ne voulez presque certainement pas utiliser leaf.pouch, j'ai fait en pensant aux données vectorielles et non aux tuiles, vous feriez probablement mieux d'utiliser Strait up PouchDB pour stocker vos tuiles, car vous pouvez également répliquer à partir de CouchDB pour le chargement initial rapide, la réponse de @tmcw ci-dessus fonctionnerait également si vous avez plus d'une application téléphonique que d'une page Web mobile.
la source
utiliser le format MBTILES du conteneur SQLite3 standard avec table de tuiles avec le champ blob tile_data avec PNG ou JPG ou WebP ou PBF GZippé intégré avec MBTILES.JS https://github.com/tilemapjp/mbtiles.js/tree/master https: // www.npmjs.com/package/Leaflet.TileLayer.MBTiles
vous pouvez convertir des tuiles TMS ou XYZ en mbtiles avec MBUTIL by MapBox. si vous avez besoin de générer un dossier de tuiles, utilisez d'abord GDAL2TILES_Parallel.py ou gdal2tilesp.py les implémentations parallèles de python multiprocessing de l'original. Ils nécessitent tous deux GDAL.
la source
il lira les mbtiles locaux et distants. Package sous forme d'application mobile avec IONIC ou React Native. ou bureau avec Electron Atom. MBTILES est la voie à suivre
la source