Ich habe derzeit eine Offline-HTML5-Kartenanwendung (basierend auf Leaflet & KendoUI mit benutzerdefinierten Ergänzungen), die ein App-Manifest hat und auf mehreren Plattformen funktioniert. Ich zögere jedoch, das Manifest zum Speichern der tatsächlichen Kartenkacheln auf diese Weise zu verwenden (PNG-Dateien, die als Tile-Cache im TMS-Stil gespeichert sind).
Probleme:
- In etwa 1.000 PNG-Dateien können sich viele Kacheln (10 MB - 50 MB) befinden
- Der erste Download kann sehr langsam sein (und es ist schwierig, dem Benutzer den Fortschritt anzuzeigen).
- App Manifeste funktionieren oder funktionieren nicht, wenn nicht das gesamte Offline-Caching fehlschlägt (gemäß [whatwg.org] [1])
- Der Offline-Benutzer stellt gelegentlich die Verbindung wieder her und muss Aktualisierungen der Kacheln abrufen. Dies sind kleine Deltas, aber der App-Manifest-Mechanismus lädt alle js-, css- und PNG-Dateien neu, sobald das Manifest aktualisiert wird
Alternative Idee: Halten Sie die Webanwendung von der Speicherung der rutschigen Kartenkacheln getrennt. Speichern Sie die Kacheln in einer webanwendungsfreundlichen Datenbank
Aktualisieren:
[PouchDB hat kürzlich Unterstützung für binäre Blobs hinzugefügt. Ich bekomme gute erste Ergebnisse. Siehe: https://stackoverflow.com/questions/16721312/using-pouchdb-as-an-offline-raster-map-cache ]
- Dies wird von Ben Nolan unter http://bennolan.com/2011/06/03/offline-mapping.html vorgeschlagen
- Ähnliche Arbeiten an Maps on a Stick: http://developmentseed.org/blog/2010/oct/02/maps-stick-version-2-released/ ([veraltet] [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/
Frage: Was sagt die kollektive Weisheit (und Erfahrung) über die folgenden Optionen für eine JavaScript-freundliche Datenbank aus:
- SqlLite
- Es scheint, als müssten Sie einen nativen App-Wrapper erstellen, damit dieser mit JavaScript kommunizieren kann
- ZB Fügen Sie Ihre DLL zu einem nativen Programm für Windows und PhoneGap für Android / iOS hinzu
- WebSQL
- beraubt
- Es war jedoch ein SQL Lite, das ich problemlos vom Host-Webserver generieren und verteilen konnte
IndexDB
- Das Speichern von Blobs scheint zu funktionieren: https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
- Ich mache mir Sorgen, ob dies der einzige Weg ist, die Datenbank anfangs zu füllen
- Ist das im Grunde eine SQLLite-Datei? Kann ich es für Bulk-DB-Upload versenden?
- Ich neige dazu als Lösung. Sind ihre Fallstricke, von denen ich nichts weiß?
Bedarf:
- Schnelle Erstauffüllung (per Download) in die Client-Web-DB
- Kompatibel mit der aktuellen TileLayer-API von Leaflet (dh ich würde lieber keine benutzerdefinierte Ebene schreiben, aber wenn nötig ...) (z. B. MbTiles)
- Plattform: Windows-Laptops, aber Android- und IOS-Tablets erwünscht (ich kann warten, bis IndexDB veröffentlicht wird, brauche keine sofortige Unterstützung)
- Ich würde lieber keine native App (EXE, IOS, Android) schreiben, aber wenn das der beste Weg ist ...
- Serverseitige Erstellung von Webkarten (dies wird ein automatisierter Prozess sein). Der Benutzer wählt einen Ort aus, wählt Karten aus und sie werden dynamisch umgewandelt und in einen rutschigen Kachel-Cache verwandelt (diese Arbeit ist bereits weitgehend erledigt).
- Schneller Bulk-Download
- Delta-Aktualisierung der Kartenänderung (Ich werde diese Logik auf der Grundlage konstanter Bestandszahlen und der Aktualisierungsdatum-Logik schreiben.)
- Minimale Auswirkung auf die aktuelle Leaflet & KendoUI-Webanwendung
Aktualisieren:
Wichtige Hintergrundidee: Während die Web-App ziemlich stabil ist, werden die rutschigen Kartenkacheln im Handumdrehen für Ihren Standort und die Art des Problems, das Sie tun (am Back-End), generiert. Also habe ich mir zwei andere Möglichkeiten ausgedacht, um den ursprünglichen 'Urknall' zu übertragen und dann zu aktualisieren:
Die Zip-Datei (wahrscheinlich keine gute Idee - da sie die Serverlast erhöht) erfordert auch die Erweiterung des Client-Rechners eine Benutzerinteraktion, ermöglicht aber rutschigen Kacheln, lokale URLs zu verwenden
HTML5-Datei-API: Ich habe mir das nicht so genau angesehen. Es scheint jedoch, dass die meisten Operationen zum Erstellen eines lokalen Dateibaums im TMS-Format ausgeführt werden müssen: http://www.html5rocks.com/de/tutorials/file/filesystem/ Interessant zu testen ist die Leistung (z. B. kann ich Web Works verwenden) um die Bandbreite zur Festplatte und über das Netz zu maximieren). IndexDB ist nicht weit verbreitet, um Web-Worker-freundlich zu sein (Synchronisierungsoberfläche: https://stackoverflow.com/questions/10698728/indexeddb-in-web-worker-on-firefox)
Ich habe einige zusätzliche Informationen zur Verwendung von IndexDB mit Leaflet gefunden:
https://github.com/calvinmetcalf/leaflet.pouch (synchronisiert die Couchdb mit der Indexdb für den Offline-Betrieb) Außerdem finden Sie hier einige Tests für die Lese- / Schreibgeschwindigkeit für Indexdb, Websql und den lokalen Speicher: http://jsperf.com/indexeddb -vs-localstorage / 15
Und hier ist , wie die Lese / Schreib - Datei - API von Javascript zu verwenden: (und auch Speichergrenzen zu erhöhen , zu fragen) http://www.html5rocks.com/en/tutorials/file/filesystem/
Vielen Dank, Tom MacWright (aka tmcw), für ein gutes Feedback. Ihr Beispiel wird wirklich hilfreich sein, wenn ich benutzerdefinierte Ebenen zum Aufnehmen der binären Blobs erstellen möchte.
Ich habe gestern einige Tests mit IndexedDB durchgeführt und durch die Verwendung einiger Polyfills und Bibliotheken denke ich, dass dies meine Probleme lösen wird. Jetzt ist es an der Zeit, diesbezüglich ein wenig ins Schwitzen zu kommen, und ich werde darüber berichten.
Übrigens: Wenn Sie meine Ergebnisse meiner Studie in clientseitigen Datenbanken sehen möchten, sehen Sie:
quelle
Antworten:
PhoneGap und MBTiles .
WebSQL & IndexDB werden nicht ausreichen. "Windows-Laptops" entsprechen nicht dem Code von Mobilgeräten.
quelle
Ergebnisse Offline-Blob-Cache für rutschige PNG-Karten
Testen
Vom Webserver abrufen
Lager
Anzeige
Ergebnisse
quelle
so dass Sie fast auf jeden Fall habe ich, nicht verwenden leaf.pouch mögen , dass mit Vektordaten im Kopf nicht Fliese, würden Sie wahrscheinlich weg oben mit Straße besser PouchDB Ihre Fliesen zu speichern, wie Sie auch von CouchDB für die replizieren können Schnelles anfängliches Laden. Die Antwort von @tmcw oben würde auch funktionieren, wenn Sie im Gegensatz zu einer mobilen Webseite mehr eine Telefon-App haben.
quelle
Verwenden Sie das Standard-SQLite3-Container-MBTILES-Format mit Tiles-Tabelle mit Tile_Data-Blob-Feld mit PNG oder JPG oder WebP oder GZipped PBF, integriert in MBTILES.JS https://github.com/tilemapjp/mbtiles.js/tree/master https: // www.npmjs.com/package/Leaflet.TileLayer.MBTiles
Mit MBUTIL von MapBox können Sie TMS- oder XYZ-Kacheln in MBTiles konvertieren. Wenn Sie einen Ordner mit Kacheln generieren müssen, verwenden Sie zuerst GDAL2TILES_Parallel.py oder gdal2tilesp.py, um die parallelen Multiprozessor-Python-Implementierungen des Originals zu erstellen. Beide benötigen GDAL.
quelle
es werden lokale und entfernte mbtiles gelesen. Paket als mobile App mit IONIC oder React Native. oder Desktop mit Electron Atom. MBTILES sind der richtige Weg
quelle