Base de datos para mosaicos de mapas deslizantes fuera de línea

25

Actualmente tengo una aplicación de mapa HTML5 fuera de línea (construida en Leaflet y KendoUI con adiciones personalizadas) que tiene un manifiesto de aplicación y funciona bien en múltiples plataformas. Sin embargo, dudo en usar el manifiesto para almacenar los mosaicos de mapas reales de esta manera (archivos PNG almacenados como una memoria caché de mosaicos de estilo TMS).

Cuestiones:

  • Podría haber muchos mosaicos (10MB - 50MB) en aproximadamente 1,000 archivos PNG
  • La descarga inicial podría ser realmente lenta (y difícil de mostrar el progreso al usuario)
  • Los manifiestos de aplicaciones funcionan o no lo hacen si no lo hacen, todo el almacenamiento en caché sin conexión fallará (de acuerdo con [whatwg.org] [1])
  • El usuario fuera de línea ocasionalmente se volverá a conectar y necesitará actualizaciones de los mosaicos. Estos son pequeños deltas, pero el mecanismo de manifiesto de la aplicación volvería a cargar todos los archivos js, css y PNG tan pronto como las actualizaciones del manifiesto

Idea alternativa: mantener la aplicación web separada del almacenamiento de los mosaicos de mapas resbaladizos. Almacene los mosaicos en una base de datos amigable para aplicaciones web

Actualizar:

[PouchDB agregó recientemente soporte para blobs binarios. Estoy obteniendo buenos resultados iniciales. Ver: /programming/16721312/using-pouchdb-as-an-offline-raster-map-cache ]

Pregunta: ¿Qué dice la sabiduría colectiva (y la experiencia) sobre las siguientes opciones para un DB amigable con JavaScript:

  1. SqlLite
    • Parece que necesita crear un contenedor de aplicaciones nativo para esto para permitirle hablar con JavaScript
    • Por ejemplo, agregue su DLL a un programa nativo para Windows y PhoneGap para Android / IOS
  2. WebSQL
    • despojado
    • pero era un SQL Lite que podía generar y distribuir fácilmente desde el servidor web host
  3. IndexDB

    • El almacenamiento de blobs parece funcionar, consulte: https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
    • Me preocupa si esta es la única forma de poblar inicialmente la base de datos
    • ¿Es esto básicamente un archivo SQLLite? ¿Puedo enviarlo para una carga masiva de DB?
    • Me estoy inclinando hacia esto como una solución. ¿Son sus problemas los que no conozco?

    Requisitos:

    • Población inicial rápida (mediante descarga) a la base de datos web del cliente
    • Compatible con la API actual de Leaflet TileLayer (es decir, prefiero no escribir una capa personalizada, pero si es necesario ...) (por ejemplo, MbTiles)
    • Plataforma: computadoras portátiles Windows, pero se desean tabletas Android e IOS (puedo esperar hasta que se publique IndexDB, no necesito soporte inmediato)
    • Prefiero no escribir una aplicación nativa (EXE, IOS, Android) pero si esa es la mejor manera ...
    • Generación de mapas web del lado del servidor (este será un proceso automatizado). El usuario elige una ubicación, elige mapas y se transforman dinámicamente y se convierten en un caché de mosaico resbaladizo (este trabajo ya está hecho en gran medida).
    • Descarga inicial masiva rápida
    • Actualizaciones del delta de cambio de mapa (escribiré esta lógica, basada en números de stock constantes y lógica de fecha de actualización)
    • Impacto mínimo en la aplicación web actual de Leaflet y KendoUI

Actualizar:

Idea de fondo clave: aunque la aplicación web es bastante estable, los mosaicos de mapas resbaladizos se generan sobre la marcha para su ubicación y qué tipo de problema está haciendo (en el back-end). Así que pensé en otras dos formas de transferir el 'big bang' inicial y luego las actualizaciones:

Archivo Zip (probablemente no sea una buena idea, ya que agrega carga del servidor) también la expansión en la máquina del cliente requerirá la interacción del usuario, pero permite que los mosaicos resbaladizos usen las URL locales

API de archivos HTML5: no he visto esto con gran detalle. Pero parece que tiene la mayoría de las operaciones para crear un árbol de archivos local en formato TMS: http://www.html5rocks.com/en/tutorials/file/filesystem/ lo que será interesante probar es el rendimiento (por ejemplo, ¿puedo usar trabajos web? para maximizar el ancho de banda al disco y a través de la red). IndexDB no está ampliamente implementado para ser apto para trabajadores web (interfaz de sincronización: /programming/10698728/indexeddb-in-web-worker-on-firefox

He encontrado información adicional sobre el uso de IndexDB con Leaflet:

https://github.com/calvinmetcalf/leaflet.pouch (sincroniza couchdb con indexdb para fuera de línea) También aquí hay algunas pruebas para las velocidades de lectura / escritura para indexdb, websql y tienda local: http://jsperf.com/indexeddb -vs-localstorage / 15

Y aquí se explica cómo usar la API de lectura / escritura de archivos desde JavaScript: (y también para pedir que aumenten los límites de almacenamiento) http://www.html5rocks.com/en/tutorials/file/filesystem/


Gracias, Tom MacWright (también conocido como tmcw), por algunos buenos comentarios. Su ejemplo realmente ayudará cuando llegue a crear capas personalizadas para ingerir los blobs binarios.

Ayer hice algunas pruebas con IndexedDB y al usar algunos polyfills y bibliotecas, creo que resolverá mis problemas. Ahora es el momento de poner algo de sudor en esto, e informaré de nuevo.


Por cierto: si desea ver mis resultados de mi estudio en bases de datos del lado del cliente, consulte:

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


Dr.YSG
fuente
¿Alguna razón particular para duplicar? stackoverflow.com/questions/14058489/…
radek
¿No está oscuro? ;]
radek
Gracias por tu edición Anita. Soy un novato y no sabía la etiqueta adecuada para cerrar esta nota, pero dejaba pistas para los lectores sobre lo que elegí para la solución.
Dr.YSG

Respuestas:

7

PhoneGap y MBTiles .

WebSQL e IndexDB no serán suficientes. Las 'computadoras portátiles de Windows' no serán el mismo código que los dispositivos móviles.

tmcw
fuente
Antecedentes adicionales: el cliente solo solicitó asistencia para computadoras portátiles. Es un deseo personal de mi parte ver si puedo extender esto a las tabletas (IOS, Android). Mi sensación es que PhoneGap aumentará demasiado el tiempo de desarrollo y conducirá a la fragmentación de la base del código (costos de mantenimiento del software). Pero gracias por el artículo, fue fundamental.
Dr.YSG
Acabo de recordar que hay una restricción adicional aquí: si lo implementamos con PhoneGap, el patrocinador lo llamará una aplicación nativa, y luego tendrá que pasar por un año más o menos de certificación. Realmente queremos evitar esto.
Dr.YSG
1
Lo que está buscando hacer no es posible sin un componente nativo. Probablemente sea hora de renegociar.
tmcw
Para mi curiosidad, ¿cuál es el problema con IndexDB o FileAPI?
Dr.YSG
1
Soporte de navegador casi cero e irregular, más límites de tamaño bajo. Pruébalo por ti mismo.
tmcw
3

Resultados Offline blob cache para mapas deslizantes PNG

Pruebas

  • 171 archivos PNG (total de 3.2MB)
  • Plataformas probadas: Chrome v24, FireFox 18, IE 10
  • También debería funcionar con Chrome y FF para Android

Obtener del servidor web

  • usando XHR2 (compatible con casi todos los navegadores) para la descarga de blobs del servidor web
  • Fui con XHR2-Lib de Phil Parsons, que es muy parecido a JQUERY .ajax ()

Almacenamiento

Monitor

  • Estoy usando el folleto http://leafletjs.com/ para mostrar los mosaicos del mapa
  • Usé el complemento de capa de mosaico funcional de Ishmael Smyrnow para obtener la capa de mosaico del DB
  • Comparé la capa de mosaicos basada en DB con un almacenamiento puramente local (localhost: //)
  • ¡No hay una diferencia notable en el rendimiento! entre usar IndexedDB y archivos locales!

Resultados

  • Chrome: Fetch (6.551s), Tienda (8.247s)
  • FireFox: Fetch (0.422s), Tienda (34.519s)
  • IE 10: Fetch (0.668s), Tienda: (0.896s)
Dr.YSG
fuente
2

así que casi definitivamente no quieres usar leaf.pouch, hice eso teniendo en cuenta los datos vectoriales, no los mosaicos, probablemente sería mejor usar PouchDB estrecho para almacenar tus mosaicos, ya que también puedes replicar desde CouchDB para el carga inicial rápida, la respuesta de @tmcw anterior también funcionaría si tiene más de una aplicación de teléfono en lugar de una página web móvil.

Calvin
fuente
0

use el formato estándar MBTILES del contenedor SQLite3 con la tabla de mosaicos con el campo de blobs tile_data con PNG o JPG o WebP o PBF GZipped integrado con MBTILES.JS https://github.com/tilemapjp/mbtiles.js/tree/master https: // www.npmjs.com/package/Leaflet.TileLayer.MBTiles

Puede convertir los mosaicos TMS o XYZ en mbtiles con MBUTIL de MapBox. si necesita generar una carpeta de mosaicos, primero use GDAL2TILES_Parallel.py o gdal2tilesp.py las implementaciones paralelas de multiprocesamiento de Python del original. Ambos requieren GDAL.

Información GeoespacialTecnología
fuente
He implementado la lectura directa de mbtiles (ráster, vector y terreno / elevación) en el folleto para una visualización completamente fuera de línea.
GeospatialInformationTech
Mi implementación agregó soporte OGC GeoPackage. Raster, Vector, Elevation y Vector Tiles. usando GeoPackage-JS
GeospatialInformationTech
0

MBTILES en Leafletjs ingrese la descripción de la imagen aquí

leerá mbtiles locales y remotos. Paquete como aplicación móvil con IONIC o React Native. o Escritorio con Electron Atom. MBTILES son el camino a seguir

Información GeoespacialTecnología
fuente