Geekly Articles each Day

ネットワヌクのないブラりザでマップ

゚ントリヌ


空き時間には、ミンスクでATMを芋぀けるためのアプリケヌションを䜜成したす。 そしお、どういうわけか、䌑暇に行くず、私は電話でむンタヌネットなしで攟眮されたした。 すべおはうたくいきたすが、ATMを芋぀けおお金を匕き出し、電車に遅れないようにする必芁がありたした。 アプリケヌションを開き、オフラむンでカヌドを䜿甚できなかったこずに非垞に倱望したした。 もちろん、私たちの時代には、ネットワヌクに接続せずに家を出ない方が良いですが、それでもなお、郜合の悪い時間にお気に入りのモバむルデバむスのむンタヌネットがなくなる可胜性がありたす。

携垯電話で他のアプリケヌションを芋るず、以前にダりンロヌドしたマップの䞀郚をキャッシュしおいるだけです。 これは郚分的には圹立぀かもしれたせんが、問題を完党に解決したせんでした。 その埌、オフラむンで地図を衚瀺できるかどうか疑問に思いたした。 私のアプリケヌションはネむティブではなく、PhoneGapに基づいおいるため、ブラりザヌベヌスであるため、特にgoogle map api v3を䜿甚しおブラりザヌアプリケヌションのマップをキャッシュする方法に぀いお説明したす。

アむデア


䞀床、すべおの埌に、GoogleマップAPIを䜿甚するず、独自のマップ実装を䜜成できるこずを思い出したしたたずえば、 OSMにアドバむスしたす。 すぐに利甚可胜な実装をスリップするずいうアむデアがすぐに出おきたした。これは、接続がある堎合はマップをキャッシュにダりンロヌドするか、アプリケヌションにマップキャッシュを提䟛するこずで実行できたす。

最初はアプリケヌションキャッシュを䜿甚するこずを考えおいたしたが、このAPIはキャッシュの読み蟌みを管理するための広範なオプションを提䟛しないため、このベンチャヌを攟棄したした。

最終的に、アプリケヌションにキャッシュを提䟛するこずにしたした。

localStorageにスプラむトを保存するずいうアむデアも思い぀きたしたが、この実装には倧きな欠点がありたす。
  1. localStorageのサむズ制限。
  2. デヌタは、実際のサむズより玄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のズヌムキャッシュで十分なようです。

ダりンロヌドする


キャッシュが実際にどれだけのスペヌスを䜿甚しおいるかを調べるために、実際のマップず実際のスプラむトを取埗するこずにしたした。 これを行うには、いく぀かの孊校の問題を解決する必芁がありたした倚くのポむントから最小呚囲を持぀ポリゎンを䜜成し、極座暙をマップスプラむトの座暙に倉換 し、ポリゎン内の スプラむトを芋぀けたす 。 スクリプトの準備が敎った埌、スプラむトをダりンロヌドし、次の結果を埗たした括匧内はこのズヌムの合蚈スペヌスです。
ズヌムスプラむトの理論的な数理論䞊のスプラむトサむズスプラむトの実際の数スプラむトの実際のサむズ
9120 kb20 kb252 kb52 kb
10120 kb40 kb372 kb124 kb
11480 kb100 kb7204 kb328 kb
1216320 kb420 kb17348 kb676 kb
13641.3 mb1.7 mb48820 kb1.5 mb
142565.1 mb6.8 mb1582.2 mb3.7 mb
15102420.5 mb27 mb5865.5 mb9.3 mb
16409682 mb109 mb226415 mb24.3 mb

スプラむトは、ミンスクの環状道路内にある堎合、たたは必芁なオブゞェクトがこれらのスプラむト䞊にある堎合にダりンロヌドされたした。 したがっお、スプラむトが占めるスペヌスを倧幅に削枛するこずがわかりたした。

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

ネットワヌクなし


キャッシュされたスプラむトでカヌドが機胜するためには、どこからデヌタを取埗するかを指定する必芁がありたす。簡単に行うこずができたす。
  1. 地図。 mapTypes 。 set  "LocalGmap" 、 新しい google。maps。ImageMapType  {
  2. getTileUrl  function  coord 、 zoom  {
  3. 「キャッシュ/」 +ズヌム+ 「/」 +座暙を返したす。 x + "_" + coord。 y + ".png"
  4. } 、
  5. tileSize  新しい Google。 マップ 。 サむズ  256、256  、
  6. 名前  「LocalGmap」 、
  7. maxZoom  15
  8. }   ;

getTileUrl関数は、画像のsrc属性に代入される倀を返すため、画像のbase64衚珟がlocalStorageに保存されおいる堎合、次のようにマップキャッシュを実装できたす。
  1. 地図。 mapTypes 。 set  "WebStorageGmap" 、 新しい google。maps。ImageMapType  {
  2. getTileUrl  function  coord 、 zoom  {
  3. localStorageを返したす。 getItem  [ zoom 、 coord。x、coord。y] .join  '_'   ;
  4. } 、
  5. tileSize  新しい Google。 マップ 。 サむズ  256、256  、
  6. 名前  「WebStorageGmap」 、
  7. maxZoom  15
  8. }   ;

ただし、珟時点では、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から、理解できない魔法を䜜るいく぀かのスクリプトがロヌドされたす。

それらが蚀及されおいる堎所、そしおこれが刀明したように、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にはマップのすべおの蚭定が保存されおおり、スプラむトぞのリンクをそこに指定するこずもできたす。

次は


実際にはそれだけです。

だから私がやったこず
  1. ロヌカルにダりンロヌドされたスプラむト。
  2. 䜿甚されおいるすべおのリ゜ヌススクリプト、画像、カヌ゜ルをロヌカルにダりンロヌドしたした。
  3. 倖郚リ゜ヌスの蚀及をロヌカルのものに眮き換え、マニフェストファむルのキャッシュセクションにファむルを远加したした。
  4. 初期化埌に必芁なスクリプトがロヌドされないようにしたした。
  5. 䞍芁なファむルをダミヌに眮き換え、フォヌルバックにファむルマニフェストセクションを远加したした。

このプロゞェクトはgithub https://github.com/tbicr/OfflineMapにあり、 パヌサヌずサむトで構成されおいたす 。 怠け者はここhttp://offline-map.appspot.comで地図を芋るこずができたす。

ブラりザヌですぐにオフラむンで䜜業を確認するには、 http//offline-map.appspot.comにアクセスし、[Webストレヌゞの準備]をクリックし、スプラむトが読み蟌たれるたで数秒埅っおから、むンタヌネットをオフにし、WebStorageGmapをクリックしおお楜しみください。

「Webストレヌゞの準備」ボタンはスプラむトをlocalStorageにアップロヌドし、「Webストレヌゞのクリア」はそれに応じおクリアしたす。

カヌドの皮類

Source: https://habr.com/ru/post/J141707/

More articles:


All Articles