Saat ini saya memiliki aplikasi peta HTML5 offline (dibangun di atas Leaflet & KendoUI dengan tambahan khusus) yang memiliki manifes aplikasi dan berfungsi dengan baik di berbagai platform. Namun, saya ragu untuk menggunakan manifes untuk menyimpan petak peta yang sebenarnya dengan cara ini (file PNG disimpan sebagai Tile Cache gaya TMS).

Masalah:

• Mungkin ada banyak ubin (10MB - 50MB) di sekitar 1.000 file PNG
• Pengunduhan awal bisa sangat lambat (dan sulit untuk menunjukkan kemajuan kepada pengguna)
• Manifes Aplikasi berfungsi atau tidak jika tidak seluruh cache offline akan gagal (sesuai dengan [whatwg.org] [1])
• Pengguna offline kadang-kadang akan menyambung kembali dan perlu mendapatkan refresh dari Ubin, Ini adalah delta kecil tetapi mekanisme manifes aplikasi akan memuat ulang semua file js, css, dan PNG segera setelah pembaruan manifes

Gagasan alternatif: pisahkan aplikasi web dari penyimpanan ubin peta yang licin. Menyimpan ubin dalam basis data aplikasi ramah web

Memperbarui:

[PouchDB baru-baru ini menambahkan dukungan untuk gumpalan biner. Saya mendapatkan hasil awal yang baik. Lihat: /programming/16721312/using-pouchdb-as-an-offline-raster-map-cache ]

• Ini disarankan oleh Ben Nolan http://bennolan.com/2011/06/03/offline-mapping.html
  • Pekerjaan serupa di Maps on a Stick: http://developmentseed.org/blog/2010/oct/02/maps-stick-version-2-released/ ([usang] [2])
  • MBtiles http://mapbox.com/developers/mbtiles/
  • TileStream https://github.com/mapbox/tilestream
  • Lous Remi: http://louisremi.com/2011/10/10/offline-web-aplikasi-adalah-tidak-di-tetapi/

Pertanyaan: Apa kata kebijaksanaan kolektif (dan pengalaman) tentang pilihan berikut untuk DB ramah JavaScript:

1. SqlLite
   • Sepertinya Anda perlu membuat pembungkus aplikasi asli untuk ini agar dapat berbicara dengan JavaScript
   • Misalnya, menambahkan Anda DLL ke program asli untuk windows, dan PhoneGap untuk android / iOS
2. WebSQL
   • diasingkan
   • tapi itu adalah SQL Lite yang saya dapat dengan mudah menghasilkan dan mendistribusikan dari server web host

3. IndexDB

   • Menyimpan gumpalan tampaknya berfungsi lihat: https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
   • Saya khawatir jika ini adalah satu-satunya cara untuk awalnya mengisi DB
   • Apakah ini pada dasarnya file SQLLite? Dapatkah saya mengirimkannya untuk unggah DB massal?
   • Saya condong ke arah ini sebagai solusi. Apakah Gotcha mereka tidak saya ketahui?

   Persyaratan:

   • Populasi awal yang cepat (melalui unduhan) ke klien DB Web
   • Kompatibel dengan Leaflet TileLayer API saat ini (yaitu saya lebih suka tidak menulis lapisan khusus, tetapi jika diperlukan ...) (mis. MbTiles)
   • Platform: Laptop Windows, tetapi tablet Android dan iOS diinginkan (Saya bisa menunggu sampai IndexDB dirilis, tidak perlu dukungan segera)
   • Saya lebih suka tidak menulis aplikasi asli (EXE, IOS, Android) tetapi jika itu adalah cara terbaik ...
   • Pembuatan sisi server peta web (ini akan menjadi proses otomatis). Pengguna memilih lokasi, memilih peta, dan mereka berubah secara dinamis dan berubah menjadi cache ubin licin (pekerjaan ini sudah banyak dilakukan).
   • Unduhan awal massal cepat
   • Perubahan delta perubahan peta (saya akan menulis logika ini, berdasarkan nomor stok konstan, dan memperbarui tanggal logika)
   • Dampak minimal pada aplikasi web Leaflet & KendoUI saat ini

Memperbarui:

Gagasan latar belakang utama: sementara aplikasi web cukup stabil, ubin peta yang licin dihasilkan dengan cepat untuk lokasi Anda dan jenis masalah apa yang Anda lakukan (di back-end). Jadi saya memikirkan dua cara lain untuk mentransfer 'big bang' awal dan kemudian memperbarui:

File Zip (mungkin bukan ide yang baik - karena menambah beban server) juga ekspansi pada mesin klien akan memerlukan interaksi pengguna, tetapi itu memungkinkan ubin licin untuk menggunakan url lokal

API File HTML5: Saya belum melihat ini dengan sangat rinci. Tetapi tampaknya memiliki sebagian besar operasi untuk membuat pohon file lokal dalam format TMS: http://www.html5rocks.com/en/tutorials/file/filesystem/ apa yang menarik untuk diuji adalah kinerjanya (misalnya saya dapat menggunakan karya web untuk memaksimalkan bandwidth ke disk dan melintasi net). IndexDB tidak diimplementasikan secara luas untuk menjadi ramah pekerja web (antarmuka sinkronisasi: /programming/10698728/indexeddb-in-web-worker-on-firefox

Saya telah menemukan beberapa info tambahan tentang penggunaan IndexDB dengan Leaflet:

https://github.com/calvinmetcalf/leaflet.pouch (menyinkronkan couchdb dengan indexdb untuk offline) Juga di sini adalah beberapa tes untuk kecepatan baca / tulis untuk indexdb, websql, & toko lokal: http://jsperf.com/indexeddb -vs-localstorage / 15

Dan di sini adalah cara menggunakan API file baca / tulis dari javascript: (dan juga meminta untuk menambah batas penyimpanan) http://www.html5rocks.com/en/tutorials/file/filesystem/

Terima kasih, Tom MacWright (alias tmcw), atas umpan balik yang bagus. Contoh Anda benar-benar akan membantu ketika saya bisa membuat lapisan kustom untuk menelan gumpalan biner.

Saya melakukan beberapa pengujian kemarin dengan IndexedDB dan dengan menggunakan beberapa polyfill dan perpustakaan saya pikir itu akan menyelesaikan masalah saya. Sekarang saatnya untuk memasukkan ekuitas keringat ke dalam ini, dan saya akan melaporkan kembali.

BTW: jika Anda ingin melihat hasil studi saya di database sisi klien, lihat:

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

PhoneGap dan MBTiles .

WebSQL & IndexDB tidak akan cukup. 'Laptop Windows' tidak akan sama dengan kode perangkat seluler.

Hasil cache gumpalan Offline untuk peta slippy PNG

Pengujian

• 171 file PNG (total 3,2MB)
• Platform diuji: Chrome v24, FireFox 18, IE 10
• Seharusnya juga berfungsi dengan Chrome & FF untuk Android

Ambil dari server web

• menggunakan XHR2 (didukung di hampir semua browser) untuk unduhan gumpalan dari server web
• Saya menggunakan XHR2-Lib oleh Phil Parsons, yang sangat mirip dengan JQUERY .ajax ()
  • https://github.com/pmp/xhr2-lib

Penyimpanan

• DiindeksDB untuk IE dan FireFox
• Chrome: Polyfill (gumpalan disimpan menggunakan FileSystem API, referensi disimpan di IndexedDB) polyfill
• A Harus membaca artikel tentang "Bagaimana browser menyimpan data IndexedDB"
  • http://www.aaron-powell.com/web/indexeddb-storage
• Catatan: FireFox menggunakan SQLlite untuk NOSQL IndexedDB. Itu mungkin menjadi alasan untuk kinerja yang lambat. (gumpalan disimpan secara terpisah)
• Catatan: Microsoft IE menggunakan mesin penyimpanan yang dapat diperpanjang:
  • http://en.wikipedia.org/wiki/Extensible_Storage_Engine
• Catatan: Chrome menggunakan LevelDB http://code.google.com/p/leveldb/

Tampilan

• Saya menggunakan Leaflet http://leafletjs.com/ untuk menampilkan petak peta
• Saya menggunakan plugin layer tile fungsional oleh Ishmael Smyrnow untuk mengambil layer tile dari DB
  • https://github.com/ismyrnow/Leaflet.functionaltilelayer
• Saya membandingkan lapisan ubin berbasis DB dengan penyimpanan (localhost: //) yang murni lokal
• Tidak ada perbedaan mencolok dalam kinerja! antara menggunakan IndexedDB dan file lokal!

Hasil

• Chrome: Fetch (6.551s), Store (8.247s)
• FireFox: Ambil (0,422s), Toko (34,519s)
• IE 10: Ambil (0,668), Simpan: (0,896)

jadi Anda hampir pasti tidak ingin menggunakan leaf.pouch, saya membuatnya dengan data vektor dalam pikiran bukan ubin, Anda mungkin akan lebih baik menggunakan selat PouchDB untuk menyimpan ubin Anda, karena Anda juga dapat mereplikasi dari CouchDB untuk pemuatan awal yang cepat, Jawaban oleh @tmcw di atas juga akan berfungsi jika Anda memiliki lebih banyak aplikasi telepon dibandingkan dengan halaman web seluler.

menggunakan format standar SQLite3 wadah MBTILES dengan tabel ubin dengan bidang tile_data gumpalan dengan PNG atau JPG atau WebP atau GZipped PBF terintegrasi dengan MBTILES.JS https://github.com/tilemapjp/mbtiles.js/tree/master https: // www.npmjs.com/package/Leaflet.TileLayer.MBTiles

Anda dapat mengubah TMS atau XYZ Tiles menjadi mbtiles dengan MBUTIL oleh MapBox. jika Anda perlu membuat folder petak pertama-tama gunakan GDAL2TILES_Parallel.py atau gdal2tilesp.py implementasi python multiprosesing paralel dari aslinya. Keduanya membutuhkan GDAL.

itu akan membaca mbtiles lokal dan jarak jauh. Paket sebagai aplikasi seluler dengan IONIC atau React Native. atau Desktop dengan Elektron Atom. MBTILES adalah caranya