2013-04-16 13 views
19

ブラウザでキャッシュ(IndexedDB)を使用してオフラインマップを作成しようとしています。コンセプトは、インターネットに接続したときに最初にマップのタイルをダウンロードして保存するということです。オフラインマップ(リーフレットOSMを使用)をキャッシュする方法はありますか?

次に、論理的にオフラインでタイルをロードする必要があります。

しかし、私はそれを理解することができません。

どのように保管し、論理的に再度ロードするのですか?私はここで立ち往生している。マップにはleaflet APIを使用しています。これはどのように実装できますか?

+0

@レオニードこれらの提案された編集を中止してください。 1)複数の改行を追加することは役に立ちません.2) '
'タグを使用することは、スタックオーバーフローで改行を挿入するための推奨方法ではありません - マークアップルールが優先されます(1行ではなく2つのスペースで終了) – MikeTheLiar

答えて

5

私はキャッシュの実装例http://tbicr.github.com/OfflineMap/leaflet/index.htmlとコードhttps://github.com/tbicr/OfflineMap/tree/master/leaflet_idb_sql_siteを持っています。

ストレージ用には、IndexedDBとWebSQLを使用しました。ストレージのパフォーマンスは低く、テストされていません。

+0

あなたはちょうどキャッシュに保存されていると思います。右?ローカルストレージにタイルを格納してから、オフラインにロードできますか? –

+1

アプリケーションキャッシュに格納されたソースファイル、IndexedDBまたはWebSQLのキャッシュされたタイルはありません。 localstorageを使用することができます(これは非常に簡単です)。サイズにはいくつかの制限があります(仕様は5MB、実際はhttp://dev-test.nemikor.com/web-storage/support-test/を参照)。しかし、このようなハッキングを使用することができます:http://www.filldisk.com/しかし、これはすべてのブラウザで動作するわけではなく、修正することができます。 – tbicr

+0

ああ、k。だから、あなたはタイルをキャッシュしています。私は今理解した。私は何か言えますか?appcache.manifestファイルにファイルをキャッシュすると述べたので、自動的にタイルを保存します。私はあなたがIndexedDBまたはWebSQLにタイルを明示的に格納する必要はないと思います。一度試してみると、IndexedDBにタイルを保存することなく。 appcache.manifestをインクルードしているので、自動的に保存されます。どうもありがとうございます。 –

9

で、この上で私の広範な研究を参照してください:

Storing Image Data for offline web application (client-side storage database)

との:あなたが何をしたいかについて

https://gis.stackexchange.com/questions/44813/database-for-offline-slippy-map-tiles

キーからのものを取得するための機能性タイル層であり、 DB:

https://github.com/ismyrnow/Leaflet.functionaltilelayer

ところで、私はこれでPouchDBをテストしています。これは、未処理のIndexeDBよりはるかにクリーンです。私は同じ問題に対する解決策に取り組んでい

https://groups.google.com/forum/?fromgroups#!topic/pouchdb/RG6wUsAi2R0

+0

ねえ、これを終えたことはありますか? –

+0

リンクをクリックしてください。彼は基本的に2014年8月現在pouchDBを使用してしまいました –

1

はで私の結果に従ってください。 tileserverからタイルを格納し、leafletjsのdbからロードします。

私が利用可能な場合、DB(のIndexedDB/webdatabase)からタイルをロードするカスタム層を実装しており、tileserverにフォールバック(アクセス制御、許可由来のヘッダを有し、https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Credentials参照)

Iが実装indexeddbまたはwebdatabaseに現在表示されているタイルを保存するコントロール。

コードはhttps://github.com/allartk/leaflet.offlineです。これは現時点ではまだ進行中です!