Datenbank für offline rutschige Kartenkacheln


25

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 ]

Frage: Was sagt die kollektive Weisheit (und Erfahrung) über die folgenden Optionen für eine JavaScript-freundliche Datenbank aus:

  1. 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
  2. WebSQL
    • beraubt
    • Es war jedoch ein SQL Lite, das ich problemlos vom Host-Webserver generieren und verteilen konnte
  3. 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:

https://stackoverflow.com/questions/14113278/storing-image-data-for-offline-web-application-client-side-storage-database



Gibt es einen bestimmten Grund für das Duplizieren? stackoverflow.com/questions/14058489/…
radek

Underdunkel, nicht Undershark? ;]
radek

Danke für deine Bearbeitung Anita. Ich bin ein Neuling und kannte nicht die richtige Etikette, um diese Notiz zu schließen, aber ich überließ den Lesern Hinweise auf das, was ich für die Lösung gewählt hatte.
Dr.YSG

Antworten:


7

PhoneGap und MBTiles .

WebSQL & IndexDB werden nicht ausreichen. "Windows-Laptops" entsprechen nicht dem Code von Mobilgeräten.


Zusätzlicher Hintergrund: Der Kunde hat nur um Laptop-Support gebeten. Es ist mein persönlicher Wunsch zu sehen, ob ich dies auf Tablets (IOS, Android) ausdehnen kann. Meiner Meinung nach wird PhoneGap die Entwicklungszeit zu sehr verlängern und zu einer Fragmentierung der Codebasis führen (Software-Wartungskosten). Aber danke für den Artikel, er war wegweisend.
Dr.YSG

Ich habe gerade daran erinnert, dass es hier eine zusätzliche Einschränkung gibt: Wenn wir es mit PhoneGap implementieren, nennt der Sponsor dies eine native App, und dann muss es ein Jahr lang eine Zertifizierung durchlaufen. Das wollen wir unbedingt vermeiden.
Dr.YSG

1
Was Sie wollen, ist ohne eine native Komponente nicht möglich. Es ist wahrscheinlich Zeit, neu zu verhandeln.
tmcw

Was ist für meine Neugier das Problem mit IndexDB oder der FileAPI?
Dr.YSG

1
Nahezu null und fleckige Browser-Unterstützung sowie geringe Größenbeschränkungen. Probieren Sie es aus.
tmcw

3

Ergebnisse Offline-Blob-Cache für rutschige PNG-Karten

Testen

  • 171 PNG-Dateien (insgesamt 3,2 MB)
  • Getestete Plattformen: Chrome v24, FireFox 18, IE 10
  • Sollte auch mit Chrome & FF für Android funktionieren

Vom Webserver abrufen

  • Verwenden von XHR2 (wird von fast allen Browsern unterstützt) zum Herunterladen von Blobs vom Webserver
  • Ich habe mich für XHR2-Lib von Phil Parsons entschieden, das JQUERY .ajax () sehr ähnlich ist.

Lager

Anzeige

  • Ich verwende Leaflet http://leafletjs.com/ , um die Kartenkacheln anzuzeigen
  • Ich habe das funktionale Kachel-Layer-Plugin von Ishmael Smyrnow zum Abrufen des Kachel-Layers aus der DB verwendet
  • Ich habe den DB-basierten Kachel-Layer mit einem rein lokalen Speicher (localhost: //) verglichen
  • Es ist kein Leistungsunterschied festzustellen! zwischen der Verwendung von IndexedDB und lokalen Dateien!

Ergebnisse

  • Chrome: Abrufen (6,551 s), Speichern (8,247 s)
  • Firefox: Abrufen (0,422 s), Speichern (34,519 s)
  • IE 10: Abrufen (0,668 s), Speichern: (0,896 s)

2

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.


0

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.


Ich habe das direkte Lesen von MBTiles (Raster, Vektor und Gelände / Höhe) in der Broschüre für die vollständige Offline-Anzeige implementiert.
GeospatialInformationTech

Meine Implementierung fügte OGC GeoPackage-Unterstützung hinzu. Raster-, Vektor-, Höhen- und Vektor-Kacheln. mit GeoPackage-JS
GeospatialInformationTech

0

MBTILES in Leafletjs Bildbeschreibung hier eingeben

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

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.