Baza danych dla śliskich kafelków offline

25

Obecnie mam aplikację mapową offline HTML5 (zbudowaną na Leaflet i KendoUI z niestandardowymi dodatkami), która ma manifest aplikacji i działa dobrze na wielu platformach. Jednak waham się przed użyciem manifestu do przechowywania w ten sposób rzeczywistych kafelków mapy (pliki PNG przechowywane jako pamięć podręczna kafelków w stylu TMS).

Zagadnienia:

  • W około 1000 plików PNG może być dużo kafelków (10 MB - 50 MB)
  • Pierwsze pobieranie może być bardzo powolne (i trudne do pokazania postępowi użytkownikowi)
  • Manifesty aplikacji działają lub nie działają, jeśli nie zawiodą całego buforowania offline (zgodnie z [whatwg.org] [1])
  • Użytkownik offline czasami łączy się ponownie i musi uzyskać odświeżenie kafelków. Są to małe delty, ale mechanizm manifestu aplikacji przeładuje wszystkie pliki js, css i PNG, gdy tylko aktualizacje manifestu

Alternatywny pomysł: oddziel aplikację internetową od przechowywania śliskich kafelków mapy. Przechowuj kafelki w bazie danych przyjaznej dla aplikacji internetowych

Aktualizacja:

[PouchDB ostatnio dodał obsługę binarnych obiektów blob. Otrzymuję dobre wstępne wyniki. Zobacz: /programming/16721312/using-pouchdb-as-an-offline-raster-map-cache ]

Pytanie: Co kolektywna mądrość (i doświadczenie) mówi o następujących wyborach bazy danych przyjaznej JavaScript:

  1. SqlLite
    • Wygląda na to, że musisz w tym celu utworzyć natywną aplikację, aby móc rozmawiać z JavaScript
    • Np. Dodaj bibliotekę DLL do rodzimego programu dla Windows i PhoneGap dla Androida / IOS
  2. WebSQL
    • osłabiony
    • ale był to SQL Lite, który mogłem łatwo generować i dystrybuować z hosta serwera WWW
  3. IndexDB

    • Przechowywanie obiektów blob wydaje się działać, patrz: https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
    • Jestem zaniepokojony, czy jest to jedyny sposób, aby początkowo wypełnić DB
    • Czy to w zasadzie plik SQLLite? Czy mogę wysłać go do masowego przesyłania bazy danych?
    • Skłaniam się ku temu jako rozwiązaniu. Czy to ich mamki, o których nie wiem?

    Wymagania:

    • Szybka początkowa populacja (poprzez pobranie) do klienta Web DB
    • Kompatybilny z obecnym API Leaflet TileLayer (tzn. Wolałbym nie pisać niestandardowej warstwy, ale w razie potrzeby ...) (np. MbTiles)
    • Platforma: Laptopy z systemem Windows, ale pożądane są tablety z Androidem i IOS (mogę poczekać na wydanie IndexDB, nie potrzebuję natychmiastowej pomocy)
    • Wolałbym nie pisać aplikacji natywnej (EXE, IOS, Android), ale jeśli to najlepszy sposób ...
    • Generowanie map internetowych po stronie serwera (będzie to proces automatyczny). Użytkownik wybiera lokalizację, wybiera mapy, a następnie dynamicznie przekształca się i zamienia w śliską pamięć podręczną kafelków (ta praca jest już w dużej mierze wykonana).
    • Szybkie początkowe pobieranie zbiorcze
    • Odświeżanie delty zmiany mapy (napiszę tę logikę na podstawie stałych numerów akcji i aktualizacji daty)
    • Minimalny wpływ na bieżącą aplikację internetową Ulotka i KendoUI

Aktualizacja:

Kluczowy pomysł w tle: podczas gdy aplikacja internetowa jest dość stabilna, śliskie kafelki mapy są generowane w locie dla Twojej lokalizacji i rodzaju problemu, który robisz (na zapleczu). Pomyślałem więc o dwóch innych sposobach przeniesienia początkowego „wielkiego wybuchu”, a następnie aktualizacji:

Plik zip (prawdopodobnie nie jest to dobry pomysł - ponieważ dodaje obciążenie serwera) również rozbudowa na komputerze klienckim będzie wymagała interakcji użytkownika, ale pozwala śliskim kafelkom używać lokalnych adresów URL

Interfejs API plików HTML5: Nie przyjrzałem się temu szczegółowo. Ale wygląda na to, że ma większość operacji tworzenia lokalnego drzewa plików w formacie TMS: http://www.html5rocks.com/en/tutorials/file/filesystem/ to, co będzie interesujące do przetestowania, to wydajność (np. Czy mogę korzystać z stron internetowych aby zmaksymalizować przepustowość dysku i sieci). IndexDB nie jest powszechnie wdrażany jako przyjazny dla pracownika sieci (interfejs synchronizacji: /programming/10698728/indexeddb-in-web-worker-on-firefox

Znalazłem dodatkowe informacje na temat korzystania z IndexDB z Ulotką:

https://github.com/calvinmetcalf/leaflet.pouch (synchronizuje couchdb z indexdb w trybie offline) Również tutaj są niektóre testy prędkości odczytu / zapisu dla indexdb, websql i lokalnego sklepu: http://jsperf.com/indexeddb -vs-localstorage / 15

A oto jak korzystać z interfejsu API pliku do odczytu / zapisu z javascript: (a także z prośbą o zwiększenie limitów pamięci) http://www.html5rocks.com/en/tutorials/file/filesystem/


Dziękuję, Tom MacWright (aka tmcw), za dobre opinie. Twój przykład naprawdę pomoże, gdy będę mógł tworzyć niestandardowe warstwy do przyjmowania binarnych obiektów blob.

Wczoraj przeprowadziłem kilka testów z IndexedDB i używając niektórych wielopełniaczy i bibliotek myślę, że rozwiąże to moje problemy. Teraz nadszedł czas, aby włożyć w to trochę potu, a ja zdam raport.


BTW: jeśli chcesz zobaczyć moje wyniki moich badań w bazach danych po stronie klienta, zobacz:

/programming/14113278/storing-image-data-for-offline-web-application-client-side-storage-database


Dr.YSG
źródło
Czy jest jakiś konkretny powód duplikatu? stackoverflow.com/questions/14058489/…
radek
podmrok nie jest pod znakiem? ;]
radek
Dziękujemy za edycję Anita. Jestem nowicjuszem i nie znałem właściwej etykiety, aby zamknąć tę notatkę, ale pozostawiając czytelnikom wskazówki, co wybrałem do rozwiązania.
Dr.YSG

Odpowiedzi:

7

PhoneGap i MBTiles .

WebSQL i IndexDB nie wystarczą. „Laptopy z systemem Windows” nie będą tym samym kodem co urządzenia mobilne.

tmcw
źródło
Dodatkowe informacje: Klient poprosił tylko o wsparcie dla laptopa. Z mojej strony osobiście chcę sprawdzić, czy mogę to rozciągnąć na tablety (IOS, Android). Wydaje mi się, że PhoneGap zbyt długo wydłuży czas projektowania i doprowadzi do fragmentacji bazy kodu (koszty utrzymania oprogramowania). Ale dzięki za ten artykuł był przełomowy.
Dr.YSG
Właśnie przypomniałem sobie, że istnieje tutaj dodatkowe ograniczenie: jeśli wdrożymy go za pomocą PhoneGap, sponsor nazwie tę aplikację natywną, a następnie będzie musiał przejść rok lub więcej certyfikacji. Naprawdę chcemy tego uniknąć.
Dr.YSG,
1
To, czego szukasz, nie jest możliwe bez komponentu natywnego. Prawdopodobnie nadszedł czas na renegocjację.
tmcw
Co do mojej ciekawości, jaki jest problem z IndexDB lub FileAPI?
Dr.YSG,
1
Obsługa przeglądarki prawie zerowej i nierównej oraz niskie limity rozmiarów. Spróbuj sam.
tmcw
3

Wyniki Offline pamięć podręczna obiektów blob dla śliskich map PNG

Testowanie

  • 171 plików PNG (łącznie 3,2 MB)
  • Testowane platformy: Chrome v24, FireFox 18, IE 10
  • Powinien także współpracować z Chrome i FF na Androida

Pobierz z serwera WWW

  • za pomocą XHR2 (obsługiwanego przez prawie wszystkie przeglądarki) do pobierania obiektów blob z serwera WWW
  • Poszedłem z XHR2-Lib Phila Parsonsa, który jest bardzo podobny do JQUERY .ajax ()

Przechowywanie

Pokaz

  • Korzystam z Ulotki http://leafletjs.com/, aby wyświetlić kafelki mapy
  • Użyłem funkcjonalnej wtyczki warstwy kafelków Ishmael Smyrnow do pobrania warstwy kafelków z bazy danych
  • Porównałem warstwę kafelków opartą na DB z czysto lokalnym magazynem (localhost: //)
  • Nie ma zauważalnej różnicy w wydajności! między używaniem IndexedDB i plików lokalnych!

Wyniki

  • Chrome: Fetch (6.551s), Store (8.247s)
  • FireFox: Fetch (0.422s), Store (34.519s)
  • IE 10: Pobierz (0,668 s), Sklep: (0,896 s)
Dr.YSG
źródło
2

więc prawie na pewno nie chcesz używać leaf.pouch, zrobiłem to, że mając na uwadze dane wektorowe, a nie kafelki, prawdopodobnie lepiej byłoby użyć PouchDB do przechowywania kafelków, ponieważ możesz również replikować z CouchDB dla szybkie ładowanie początkowe, powyższa odpowiedź @tmcw działałaby również, jeśli masz więcej aplikacji na telefon niż na mobilną stronę internetową.

Calvin
źródło
0

użyj standardowego formatu MBTILES kontenera SQLite3 z tabelą kafelków z polem blob tile_data z PNG lub JPG lub WebP lub GZipped PBF zintegrowane z MBTILES.JS https://github.com/tilemapjp/mbtiles.js/tree/master https: // www.npmjs.com/package/Leaflet.TileLayer.MBTiles

za pomocą MBUTIL firmy MapBox możesz konwertować płytki TMS lub XYZ na mbtiles. jeśli chcesz wygenerować folder kafelków, najpierw użyj GDAL2TILES_Parallel.py lub gdal2tilesp.py równoległe wieloprocesowe implementacje Pythona w orginal. Oba wymagają GDAL.

GeospatialInformationTech
źródło
W ulotce zaimplementowałem bezpośredni odczyt mbtiles (raster, wektor i ukształtowanie terenu / wysokość), aby oglądać je całkowicie offline.
GeospatialInformationTech
Moja implementacja dodała obsługę OGC GeoPackage. Płytki rastrowe, wektorowe, elewacyjne i wektorowe. using GeoPackage-JS
GeospatialInformationTech
0

MBTILES w Leafletjs wprowadź opis zdjęcia tutaj

odczyta lokalne i zdalne pliki mbtiles. Pakuj jako aplikację mobilną z IONIC lub React Native. lub Desktop z Electron Atom. MBTILES to droga

GeospatialInformationTech
źródło