🌙 💃 😁 ネットワークのないブラウザでマップ 👩🏽‍🌾 🐶 🚢

エントリー

空き時間には、ミンスクでATMを見つけるためのアプリケーションを作成します。そして、どういうわけか、休暇に行くと、私は電話でインターネットなしで放置されました。すべてはうまくいきますが、ATMを見つけてお金を引き出し、電車に遅れないようにする必要がありました。アプリケーションを開き、オフラインでカードを使用できなかったことに非常に失望しました。もちろん、私たちの時代には、ネットワークに接続せずに家を出ない方が良いですが、それでもなお、都合の悪い時間にお気に入りのモバイルデバイスのインターネットがなくなる可能性があります。

携帯電話で他のアプリケーションを見ると、以前にダウンロードしたマップの一部をキャッシュしているだけです。これは部分的には役立つかもしれませんが、問題を完全に解決しませんでした。その後、オフラインで地図を表示できるかどうか疑問に思いました。私のアプリケーションはネイティブではなく、PhoneGapに基づいているため、ブラウザーベースであるため、特にgoogle map api v3を使用してブラウザーアプリケーションのマップをキャッシュする方法について説明します。

アイデア

一度、すべての後に、GoogleマップAPIを使用すると、独自のマップ実装を作成できることを思い出しました（たとえば、 OSMにアドバイスします）。すぐに利用可能な実装をスリップするというアイデアがすぐに出てきました。これは、接続がある場合はマップをキャッシュにダウンロードするか、アプリケーションにマップキャッシュを提供することで実行できます。

最初はアプリケーションキャッシュを使用することを考えていましたが、このAPIはキャッシュの読み込みを管理するための広範なオプションを提供しないため、このベンチャーを放棄しました。

最終的に、アプリケーションにキャッシュを提供することにしました。

localStorageにスプライトを保存するというアイデアも思いつきましたが、この実装には大きな欠点があります。

localStorageのサイズ制限。
データは、実際のサイズより約30％大きいbase64に保存する必要があります。

同期APIの実装が不足しているため、indexedDBまたはwebSQLにスプライトを保存するという考えを捨てなければなりませんでした。

あるかどうか

私が自問した最初の質問は、カードをキャッシュする価値があるのかということでした。つまり、特定の都市の地図が使用され、詳細な詳細が必要かどうかが決まります。私の場合、小さなズーム（10〜15）のためにMinskキャッシュがあれば十分でした。

2番目の質問：キャッシュはどのくらいのスペースを占有しますか？平均スプライトサイズが20 kbの場合、理論的にはズーム10（ミンスクが完全にフィット）の場合、11-4（100 kb）、12-16（420 kb）、13-64（1.7 mb）、14-256（6.8 mb）、15-1024（27 mb）。 14のズームキャッシュで十分なようです。

ダウンロードする

キャッシュが実際にどれだけのスペースを使用しているかを調べるために、実際のマップと実際のスプライトを取得することにしました。これを行うには、いくつかの学校の問題を解決する必要がありました：多くのポイントから最小周囲を持つポリゴンを作成し、極座標をマップスプライトの座標に変換し、ポリゴン内のスプライトを見つけます。スクリプトの準備が整った後、スプライトをダウンロードし、次の結果を得ました（括弧内はこのズームの合計スペースです）。

ズーム	スプライトの理論的な数	理論上のスプライトサイズ	スプライトの実際の数	スプライトの実際のサイズ
9	1	20 kb（20 kb）	2	52 kb（52 kb）
10	1	20 kb（40 kb）	3	72 kb（124 kb）
11	4	80 kb（100 kb）	7	204 kb（328 kb）
12	16	320 kb（420 kb）	17	348 kb（676 kb）
13	64	1.3 mb（1.7 mb）	48	820 kb（1.5 mb）
14	256	5.1 mb（6.8 mb）	158	2.2 mb（3.7 mb）
15	1024	20.5 mb（27 mb）	586	5.5 mb（9.3 mb）
16	4096	82 mb（109 mb）	2264	15 mb（24.3 mb）

スプライトは、ミンスクの環状道路内にある場合、または必要なオブジェクトがこれらのスプライト上にある場合にダウンロードされました。したがって、スプライトが占めるスペースを大幅に削減することがわかりました。

私はスプライトを持っていたので、マップをオフラインで動作させるために残っていました。

ネットワークなし

キャッシュされたスプライトでカードが機能するためには、どこからデータを取得するかを指定する必要があります。簡単に行うことができます。

地図。 mapTypes 。 set （ "LocalGmap" 、新しい google。maps。ImageMapType （ {
getTileUrl ： function （ coord 、 zoom ） {
「キャッシュ/」 +ズーム+ 「/」 +座標を返します。 x + "_" + coord。 y + ".png"
} 、
tileSize ：新しい Google。マップ。サイズ（ 256、256 ）、
名前：「LocalGmap」、
maxZoom ： 15
} ）） ;

getTileUrl関数は、画像のsrc属性に代入される値を返すため、画像のbase64表現がlocalStorageに保存されている場合、次のようにマップキャッシュを実装できます。

地図。 mapTypes 。 set （ "WebStorageGmap" 、新しい google。maps。ImageMapType （ {
getTileUrl ： function （ coord 、 zoom ） {
localStorageを返します。 getItem （ [ zoom 、 coord。x、coord。y] .join （ '_' ）） ;
} 、
tileSize ：新しい Google。マップ。サイズ（ 256、256 ）、
名前：「WebStorageGmap」、
maxZoom ： 15
} ）） ;

ただし、現時点では、GoogleマップのAPIスクリプト、画像、カーソルに引き続き関連付けられています。

最も重要なスクリプトhttp://maps.googleapis.com/maps/api/js?sensor=falseから始めましょう。スクリプトをダウンロードしてローカルバージョンに置き換えます。これをgmapapi.jsと呼びます。このスクリプトは、いくつかのデータへの多くの参照に言及しています。

もう一度起動して、どのスクリプトが読み込まれているかを確認します。これはhttp://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/8/5/main.jsおよびhttp://maps.gstatic.com/cat_js/intl/に類似したその他のスクリプトです。 en_us / mapfiles / api-3 / 8/5 / {map、marker} .js

最初のスクリプトにはカーネルが含まれ、残りは追加コンポーネントです。 main.jsをダウンロードします。gmapapi.jsには追加のコンポーネントが記載されていないため、main.jsをすぐに確認して、関心のあるすべてのコンポーネントを取得し、components.jsでダウンロードします。

google。マップ .__ gjsload__ （ 'common' 、 ...

google。マップ .__ gjsload__ （ 'controls' 、 ...

google。マップ .__ gjsload__ （ 'directions' 、 ...

google。マップ .__ gjsload__ （ 'distance_matrix' 、 ...

google。マップ .__ gjsload__ （ 'drawing_impl' 、 ...

google。マップ .__ gjsload__ （ 'elevation' 、 ...

google。マップ .__ gjsload__ （ ' geocoder ' 、 ...

google。マップ .__ gjsload__ （ 'geometry' 、 ...

google。マップ .__ gjsload__ （ ' infowindow ' 、 ...

google。マップ .__ gjsload__ （ 'kml' 、 ...

google。マップ .__ gjsload__ （ 'layers' 、 ...

google。マップ .__ gjsload__ （ 'map' 、 ...

google。マップ .__ gjsload__ （ 'marker' 、 ...

google。マップ .__ gjsload__ （ 'maxzoom' 、 ...

google。マップ .__ gjsload__ （ 'onion' 、 ...

google。マップ .__ gjsload__ （ 'overlay' 、 ...

google。マップ .__ gjsload__ （ 'places_impl' 、 ...

google。マップ .__ gjsload__ （ 'poly' 、 ...

google。マップ .__ gjsload__ （ 'search_impl' 、 ...

google。マップ .__ gjsload__ （ 'stats' 、 ...

google。マップ .__ gjsload__ （ 'streetview' 、 ...

google。マップ .__ gjsload__ （ 'usage' 、 ...

google。マップ .__ gjsload__ （ 'util' 、 ...

次に、gmapapi.jsで外部ファイルのmain.jsのロードをローカルのファイルに置き換えます。また、コンポーネントの初期化後に必要なコンポーネントをロードする必要がないようにcomponents.jsもロードします。

さらに調べます。http： //maps.googleapis.comから、理解できない魔法を作るいくつかのスクリプトがロードされます。

AuthenticationService.Authenticate
QuotaService.RecordEvent
StaticMapService.GetMapImage
ViewportInfoService.GetViewportInfo
gen_204
フィート

それらが言及されている場所、そしてこれが判明したように、gmapapi.jsを探しています。これらのスクリプトへのリンクをローカルのスクリプトに置き換えます（アプリケーションキャッシュでフォールバックを機能させるため）。何も実行しないempty.jsスクリプトを追加し、マニフェストファイルのフォールバックセクションに「magic_ script empty.js」リンクを追加します。

フォールバック：

gmapcache / googleapis / maps / api / js / AuthenticationService.Authenticate gmapcache / empty.js

gmapcache / googleapis / maps / api / js / QuotaService.RecordEvent gmapcache / empty.js

gmapcache / googleapis / maps / api / js / StaticMapService.GetMapImage gmapcache / empty.js

gmapcache / googleapis / maps / api / js / ViewportInfoService.GetViewportInfo gmapcache / empty.js

gmapcache / googleapis / maps / gen_204 gmapcache / empty.js

gmapcache / googleapis / mapslt / ft gmapcache / empty.js

スクリプトを使用して、今すぐ写真。

スプライトではないすべての画像は、 http://maps.gstatic.com/mapfiles/からロードされます。すべてのファイルをすばやく検索すると、この行はgmapapi.jsの1つの場所で言及されていることがわかります。すべての写真をローカルにダウンロードし、見つかったリンクをローカルのリンクに置き換えます。

オフラインで作業を完了するために、すべてをマニフェストファイルにプッシュします。

キャッシュマニフェスト

ネットワーク：

*

キャッシュ：

index.html

style.css

script.js

gmapapi.js

gmapcache / main.js

gmapcache / components.js

gmapcache / empty.js

gmapcache / gstatic / arrow-down.png

gmapcache / gstatic / cb / mod_cb_scout / cb_scout_sprite_api_003.png

gmapcache / gstatic / cb / target_locking.gif

gmapcache / gstatic / google_white.png

gmapcache / gstatic / iw3.png

gmapcache / gstatic / iws3.png

gmapcache / gstatic / mapcontrols3d7.png

gmapcache / gstatic / marker2 / marker_sprite.png

gmapcache / gstatic / mv / imgs8.png

gmapcache / gstatic / rotate2.png

gmapcache / gstatic / szc4.png

gmapcache / gstatic / transparent.png

gmapcache / gstatic / openhand_8_8.cur

gmapcache / gstatic / closedhand_8_8.cur

すべて、完全に機能するオフラインマップの準備ができました！

gmapapi.jsにすべての変更を加えます。

だった	になっています
[ " http://mt0.googleapis.com/mapslt/ft?hl=en-USu0026 " 、 " http://mt1.googleapis.com/mapslt/ft?hl=en-USu0026 " ]	[ 「gmapcache / googleapis / mapslt / ft？hl = en-USu0026」 ]
[ "en-US" 、 "US" 、 null 、 0 、 null 、 null 、「 http://maps.gstatic.com/mapfiles/ 」、「 http://csi.gstatic.com 」、「 https://maps.googleapis.com 」、「 http://maps.googleapis.com 」 ]	[ "en-US" 、 "US" 、 null 、 0 、 null 、 null 、「gmapcache / gstatic /」、「 http://csi.gstatic.com 」、「 https://maps.googleapis.com 」、「gmapcache / googleapis」 ]
getScript （ " http://maps.gstatic.com/intl/en_us/mapfiles/api-3/8/5/main.js " ） ;	getScript （ "gmapcache / main.js" ） ; getScript （ "gmapcache / components.js" ） ;

実際、gmapapi.jsにはマップのすべての設定が保存されており、スプライトへのリンクをそこに指定することもできます。

次は？

実際にはそれだけです。

だから私がやったこと：

ローカルにダウンロードされたスプライト。
使用されているすべてのリソース（スクリプト、画像、カーソル）をローカルにダウンロードしました。
外部リソースの言及をローカルのものに置き換え、マニフェストファイルのキャッシュセクションにファイルを追加しました。
初期化後に必要なスクリプトがロードされないようにしました。
不要なファイルをダミーに置き換え、フォールバックにファイルマニフェストセクションを追加しました。

このプロジェクトはgithub https://github.com/tbicr/OfflineMapにあり、パーサーとサイトで構成されています。怠け者はここhttp://offline-map.appspot.comで地図を見ることができます。

ブラウザーですぐにオフラインで作業を確認するには、 http：//offline-map.appspot.comにアクセスし、[Webストレージの準備]をクリックし、スプライトが読み込まれるまで数秒待ってから、インターネットをオフにし、WebStorageGmapをクリックしてお楽しみください。

「Webストレージの準備」ボタンはスプライトをlocalStorageにアップロードし、「Webストレージのクリア」はそれに応じてクリアします。

カードの種類：

マップ-標準のGoogleマップマップ。
衛星-衛星からの標準のGoogleマップマップ。
OSM-Google APIを使用したOSMカードの実装。
MyGmap-標準のGoogleマップマップの実装。
LocalGmap-ローカルに（サイトと同じホストに）保存されたマップの実装。
WebStorageGmap-localStorageに保存されたマップの実装（最初に「Webストレージの準備」を実行する必要があります）。
LocalMyGmapは、LocalGmapとMyGmapのハイブリッド実装であり、データがマップ上の特定の領域にある場合、LocalGmapのように機能し、それ以外の場合はMyGmapのように機能します。
WebStorageMyGmapは、WebStorageGmapとMyGmapのハイブリッド実装であり、データがlocalStorageにある場合、WebStorageGmapのように機能し、そうでない場合はMyGmapのように機能します。

ネットワークのないブラウザでマップ

エントリー

アイデア

あるかどうか

ダウンロードする

ネットワークなし

次は？

More articles: