Banco de dados para blocos de mapa escorregadios offline

25

Atualmente, tenho um aplicativo de mapa HTML5 offline (desenvolvido no Leaflet & KendoUI com adições personalizadas) que possui um manifesto de aplicativo e funciona bem em várias plataformas. No entanto, hesito em usar o manifesto para armazenar os blocos de mapa reais dessa maneira (arquivos PNG armazenados como um cache de mosaico no estilo TMS).

Problemas:

  • Pode haver muitos blocos (10 MB - 50 MB) em cerca de 1.000 arquivos PNG
  • O download inicial pode ser muito lento (e difícil de mostrar o progresso para o usuário)
  • Os manifestos de aplicativos funcionam ou, se não, todo o cache offline falhará (de acordo com [whatwg.org] [1])
  • Ocasionalmente, o usuário off-line se reconecta e precisa receber atualizações dos ladrilhos. Estes são pequenos deltas, mas o mecanismo de manifesto do aplicativo recarregaria todos os arquivos js, css e PNG assim que as atualizações do manifesto

Idéia alternativa: mantenha o aplicativo da Web separado do armazenamento dos blocos de mapa deslizantes. Armazene os blocos em um banco de dados amigável para aplicativos da web

Atualizar:

[O PouchDB recentemente adicionou suporte para blobs binários. Estou obtendo bons resultados iniciais. Consulte: /programming/16721312/using-pouchdb-as-an-offline-raster-map-cache ]

Pergunta: O que a sabedoria coletiva (e a experiência) dizem sobre as seguintes opções para um banco de dados amigável para JavaScript:

  1. SqlLite
    • Parece que você precisa criar um invólucro de aplicativo nativo para permitir que ele fale com JavaScript
    • Por exemplo, adicione sua DLL a um programa nativo para Windows e PhoneGap para Android / IOS
  2. WebSQL
    • privado
    • mas era um SQL Lite que eu poderia gerar e distribuir facilmente a partir do servidor da web host
  3. IndexDB

    • O armazenamento de blobs parece funcionar, consulte: https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
    • Estou preocupado se esta é a única maneira de preencher inicialmente o banco de dados
    • Isso é basicamente um arquivo SQLLite? Posso enviá-lo para upload em massa de banco de dados?
    • Estou inclinado a isso como uma solução. São suas dicas que eu não conheço?

    Requisitos:

    • População inicial rápida (via download) para o banco de dados da Web do cliente
    • Compatível com a API Leaflet TileLayer atual (ou seja, eu preferiria não escrever uma camada personalizada, mas se necessário ...) (por exemplo, MbTiles)
    • Plataforma: laptops com Windows, mas tablets Android e IOS desejados (posso esperar até o IndexDB ser lançado, não preciso de suporte imediato)
    • Prefiro não escrever um aplicativo nativo (EXE, IOS, Android), mas se essa for a melhor maneira ...
    • Geração de mapas da Web no servidor (este será um processo automatizado). O usuário escolhe um local, escolhe mapas e eles são transformados dinamicamente e transformados em um cache de mosaico (esse trabalho já está em grande parte feito).
    • Download inicial em massa rápido
    • Atualizações delta de alteração de mapa (escreverei essa lógica, com base em números de estoque constantes e lógica de data de atualização)
    • Impacto mínimo no aplicativo da Web atual do Leaflet e KendoUI

Atualizar:

Ideia principal: enquanto o aplicativo Web é bastante estável, os blocos de mapas escorregadios são gerados rapidamente para sua localização e que tipo de problema você está fazendo (no back-end). Então, pensei em duas outras maneiras de transferir o 'big bang' inicial e depois atualizá-lo:

O arquivo zip (provavelmente não é uma boa ideia - pois adiciona carga do servidor) também a expansão na máquina do cliente exigirá interação do usuário, mas permite que blocos lisos usem URLs locais

API de arquivos HTML5: eu não olhei para isso em grandes detalhes. Mas parece que há muitas operações para criar uma árvore de arquivos local no formato TMS: http://www.html5rocks.com/en/tutorials/file/filesystem/, o que será interessante testar é o desempenho (por exemplo, posso usar trabalhos na Web para maximizar a largura de banda em disco e na rede). O IndexDB não é amplamente implementado para ser amigável ao trabalhador da Web (interface de sincronização: /programming/10698728/indexeddb-in-web-worker-on-firefox

Encontrei algumas informações adicionais sobre o uso do IndexDB com o Leaflet:

https://github.com/calvinmetcalf/leaflet.pouch (sincroniza couchdb com indexdb para offline) Também aqui estão alguns testes para as velocidades de leitura / gravação para indexdb, websql e loja local: http://jsperf.com/indexeddb -vs-localstorage / 15

E aqui está como usar a API de arquivo de leitura / gravação do javascript: (e também para pedir para aumentar os limites de armazenamento) http://www.html5rocks.com/en/tutorials/file/filesystem/


Obrigado, Tom MacWright (aka tmcw), por alguns bons comentários. Seu exemplo realmente ajudará quando eu criar camadas personalizadas para ingerir os blobs binários.

Ontem fiz alguns testes com o IndexedDB e, usando alguns polyfills e bibliotecas, acho que isso resolverá meus problemas. Agora é hora de colocar um pouco de suor nisso, e irei relatar.


BTW: se você quiser ver meus resultados do meu estudo em bancos de dados do lado do cliente, consulte:

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


Dr.YSG
fonte
Alguma razão específica para duplicar? stackoverflow.com/questions/14058489/…
radek
underdark não undershark? ;]
radek
Obrigado por sua edição Anita. Sou novato e não conhecia a etiqueta adequada para fechar esta nota, mas deixei pistas para os leitores sobre o que escolhi para a solução.
Dr.YSG

Respostas:

7

PhoneGap e MBTiles .

WebSQL e IndexDB não serão suficientes. 'Laptops com Windows' não terão o mesmo código que os dispositivos móveis.

tmcw
fonte
Histórico adicional: o cliente solicitou apenas suporte para laptop. É um desejo pessoal da minha parte ver se consigo estender isso para tablets (IOS, Android). Meu senso é que o PhoneGap aumentará muito o tempo de desenvolvimento e levará à fragmentação da base de código (custos de manutenção de software). Mas obrigado pelo artigo, foi seminal.
Dr.YSG
Acabei de lembrar que há uma restrição adicional aqui: se o implementarmos com o PhoneGap, o patrocinador o chamará de um aplicativo nativo e terá que passar por um ano ou mais de certificação. Nós realmente queremos evitar isso.
Dr.YSG
1
O que você deseja fazer não é possível sem um componente nativo. Provavelmente é hora de renegociar.
tmcw
Para minha curiosidade, qual é o problema com o IndexDB ou o FileAPI?
Dr.YSG
1
Suporte a navegador quase nulo e irregular, além de limites de tamanho baixos. Tente você mesmo.
tmcw
3

Resultados Cache offline de blob para mapas com faixas PNG

Teste

  • 171 arquivos PNG (total de 3.2MB)
  • Plataformas testadas: Chrome v24, FireFox 18, IE 10
  • Também deve funcionar com o Chrome e o FF para Android

Buscar no servidor da web

  • usando XHR2 (suportado em quase todos os navegadores) para baixar blob do servidor web
  • Fui com o XHR2-Lib de Phil Parsons, que é muito parecido com o JQUERY .ajax ()

Armazenamento

Exibição

  • Estou usando o Leaflet http://leafletjs.com/ para mostrar os blocos do mapa
  • Eu usei o plugin da camada de blocos funcional de Ishmael Smyrnow para buscar a camada de blocos do DB
  • Comparei a camada de blocos baseada em banco de dados com um armazenamento puramente local (localhost: //)
  • Não há diferença perceptível no desempenho! entre usar o IndexedDB e arquivos locais!

Resultados

  • Chrome: Buscar (6.551s), Store (8.247s)
  • FireFox: Buscar (0.422s), Loja (34.519s)
  • IE 10: Buscar (0.668s), Loja: (0.896s)
Dr.YSG
fonte
2

para que você quase definitivamente não queira usar leaf.pouch, eu fiz isso com dados vetoriais em mente, e não blocos, provavelmente seria melhor usar o PouchDB restrito para armazenar seus blocos, pois você também pode replicar do CouchDB para o carregamento inicial rápido, a resposta de @tmcw acima também funcionaria se você tiver mais de um aplicativo de telefone em vez de uma página da web para celular.

Calvin
fonte
0

use o formato MBTILES do contêiner SQLite3 padrão com tabela de blocos com o campo blob tile_data com PNG ou JPG ou WebP ou PBF com GZip integrado ao MBTILES.JS https://github.com/tilemapjp/mbtiles.js/tree/master https: // www.npmjs.com/package/Leaflet.TileLayer.MBTiles

você pode converter TMS ou XYZ Tiles em mbtiles com MBUTIL by MapBox. se você precisar gerar uma pasta de blocos, use primeiro GDAL2TILES_Parallel.py ou gdal2tilesp.py as implementações paralelas de multiprocessamento python do original. Ambos exigem GDAL.

GeospatialInformationTech
fonte
Eu implementei a leitura direta de mbtiles (varredura, vetor e terreno / elevação) no folheto para visualização completamente offline.
GeospatialInformationTech
Minha implementação adicionou suporte ao OGC GeoPackage. Telhas de varredura, vetor, elevação e vetor. usando GeoPackage-JS
GeospatialInformationTech
0

MBTILES em Leafletjs insira a descrição da imagem aqui

lerá mbtiles locais e remotos. Empacote como aplicativo móvel com IONIC ou React Native. ou Desktop com Atom eletrônico. MBTILES são o caminho a percorrer

GeospatialInformationTech
fonte