एक नेटवर्क के बिना एक ब्राउज़र में मैप्स

प्रविष्टि

अपने खाली समय में, मैं मिन्स्क में एटीएम खोजने के लिए एक आवेदन लिखता हूं। और किसी तरह, छुट्टी पर जा रहा हूं, मुझे फोन पर इंटरनेट के बिना छोड़ दिया गया था। सबकुछ ठीक हो जाएगा, लेकिन मुझे एटीएम खोजने, पैसे निकालने और ट्रेन के लिए देर न करने की जरूरत थी। मैंने अपना एप्लिकेशन खोला और मुझे बहुत निराशा हुई कि मैं कार्ड का ऑफ़लाइन उपयोग नहीं कर सकता। बेशक, हमारे समय में नेटवर्क से जुड़े बिना घर से बाहर नहीं निकलना बेहतर है, लेकिन फिर भी आपके पसंदीदा मोबाइल डिवाइस पर इंटरनेट सबसे अधिक समय पर अनुपस्थित हो सकता है।

अपने फोन पर अन्य अनुप्रयोगों को देखते हुए, मैंने देखा कि सबसे पहले वे मानचित्र के कुछ हिस्सों को कैश करते हैं जो पहले डाउनलोड किए गए थे। यह आंशिक रूप से मेरी मदद कर सकता है, लेकिन समस्या को पूरी तरह से हल नहीं किया है। उसके बाद, मुझे आश्चर्य हुआ कि क्या मुझे मैप को ऑफ़लाइन देखने में सक्षम होना चाहिए। चूंकि मेरा एप्लिकेशन देशी नहीं है, लेकिन फोनगैप के आधार पर, वे ब्राउज़र आधारित हैं, तो कहानी इस बारे में होगी कि आप विशेष रूप से Google मानचित्र एपीआई वी 3 का उपयोग करके ब्राउज़र अनुप्रयोगों के लिए मानचित्र को कैसे कैश कर सकते हैं।

विचार

एक बार, इस सब के बाद, मुझे याद आया कि गूगल मैप एप आपको अपना खुद का मैप कार्यान्वयन करने की अनुमति देता है (उदाहरण के लिए, जैसा कि मैं ओएसएम के लिए सलाह देता हूं)। तुरंत एक कार्यान्वयन को खिसकाने का विचार आया जो हमेशा उपलब्ध रहेगा, और यह कनेक्शन होने पर या तो कैश को मैप डाउनलोड करके या एप्लिकेशन के साथ मैप कैश की आपूर्ति करके किया जा सकता है।

सबसे पहले मैंने एप्लिकेशन कैश का उपयोग करने के बारे में सोचा, लेकिन मैंने इस उद्यम को छोड़ दिया, क्योंकि इसकी एपीआई कैश लोडिंग के प्रबंधन के लिए व्यापक विकल्प प्रदान नहीं करती है।

अंत में, मैंने आवेदन के साथ सिर्फ कैश की आपूर्ति करने का फैसला किया।

मैं भी स्थानीय भंडारण में स्प्राइट के भंडारण के विचार के साथ आया था, लेकिन इस कार्यान्वयन के बड़े नुकसान हैं:

1. लोकलस्टोरेज आकार सीमा;
2. डेटा को बेस 64 में संग्रहीत किया जाना चाहिए, जो वास्तविक आकार से लगभग 30% बड़ा है।

मुझे अनुक्रमित एपीआई कार्यान्वयन की कमी के कारण इंडेक्सडीडीबी या वेबएसक्यू में स्प्राइट्स के भंडारण के विचार को छोड़ना पड़ा।

होना या न होना

पहला सवाल जो मैंने खुद से पूछा था: क्या यह एक कार्ड को कैच करने के लायक है? यही है, क्या एक निश्चित शहर के नक्शे का उपयोग किया जाएगा और क्या विस्तृत विवरण की आवश्यकता है। मेरे मामले में, छोटे ज़ूम (10-15) के लिए मिन्स्क कैश होना पर्याप्त था।

दूसरा सवाल: कैश कितनी जगह घेरेगा? यदि औसत स्प्राइट का आकार 20 केबी है, तो सैद्धांतिक रूप से ज़ूम 10 के लिए (मिन्स्क पूरी तरह से फिट बैठता है), 1 स्प्राइट (20 केबी) की आवश्यकता है, 11 के लिए - 4 (100 केबी), 12 के लिए - 16 (420 केबी), 13 के लिए - 64 (1.7) mb), 14 के लिए - 256 (6.8 mb), 15 - 1024 (27 mb)। 14 का ज़ूम कैश पर्याप्त लग रहा था।

डाउनलोड

मैंने वास्तविक मानचित्र और वास्तविक स्प्राइट लेने का फैसला किया ताकि यह पता लगाया जा सके कि वास्तव में कैश कितना स्थान लेता है। ऐसा करने के लिए, कई स्कूल की समस्याओं को हल करना आवश्यक था: कई बिंदुओं से न्यूनतम परिधि के साथ एक बहुभुज बनाएं , मानचित्र के निर्देशांक में ध्रुवीय निर्देशांक का अनुवाद करें और बहुभुज में स्प्राइट का पता लगाएं । स्क्रिप्ट तैयार होने के बाद, मैंने स्प्राइट्स को डाउनलोड किया और निम्नलिखित परिणाम प्राप्त किए (ब्रैकेट में इस ज़ूम के लिए कुल स्थान है):

ज़ूम	स्प्राइट की सैद्धांतिक संख्या	सैद्धांतिक प्रेत आकार	स्प्राइट की वास्तविक संख्या	स्प्राइट्स का वास्तविक आकार
9	1	20 केबी (20 केबी)	2	52 kb (52 kb)
10	1	20 केबी (40 केबी)	3	72 kb (124 kb)
11	4	80 केबी (100 केबी)	7	204 केबी (328 केबी)
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 एमबी (6.8 एमबी)	158	2.2 mb (3.7 mb)
15	1024	20.5 एमबी (27 एमबी)	586	5.5 mb (9.3 mb)
16	4096	82 एमबी (109 एमबी)	2264	15 एमबी (24.3 एमबी)

स्प्राइट्स डाउनलोड किए गए थे यदि वे मिन्स्क रिंग रोड के अंदर थे या अगर मुझे जिन वस्तुओं की ज़रूरत थी, वे इन स्प्राइट्स पर थे। इस प्रकार, यह स्प्राइट्स के कब्जे वाले स्थान को काफी कम करने के लिए निकला।

चूंकि मैंने स्प्राइट किया था, इसलिए यह मैप को ऑफ़लाइन बनाने का काम करता रहा।

बिना नेटवर्क के

कार्ड के लिए कैश्ड स्प्राइट के साथ काम करने के लिए, आपको यह बताना होगा कि डेटा कहाँ से प्राप्त करना है, यह बस किया जा सकता है:

1. मैप करें। mapTypes । सेट ( "लोकलमैप" , नया Google। मैप्स । ImageMapType ( {
2. getTileUrl : फ़ंक्शन ( समन्वय , ज़ूम ) {
3. वापसी "कैश /" + ज़ूम + "/" + समन्वय। x + "_" + समन्वय। y + ".png"
4. } ,
5. टाइल आकार : नया गूगल। नक्शे । आकार ( 256 , 256 ) ,
6. नाम : "लोकलगैम" ,
7. अधिकतम : 15
8. } ) ) ;

GetTileUrl फ़ंक्शन एक मान लौटाता है जिसे छवि के src विशेषता में प्रतिस्थापित किया जाता है, इसलिए, यदि छवियों के बेस 64 प्रतिनिधित्व स्थानीयस्टोर में संग्रहीत किए जाते हैं, तो हम इस तरह से मानचित्र कैश को लागू कर सकते हैं:

1. मैप करें। mapTypes । सेट ( "वेबस्टोरेजमैप" , नया गूगल। मैप्स । ImageMapType ( {
2. getTileUrl : फ़ंक्शन ( समन्वय , ज़ूम ) {
3. स्थानीय स्तर पर लौटें । getItem ( [ ज़ूम , कॉर्ड । x , कॉर्ड। y ] । जॉइन ( '_' ) ) ;
4. } ,
5. टाइल आकार : नया गूगल। नक्शे । आकार ( 256 , 256 ) ,
6. नाम : "वेबस्टोरेजमैप" ,
7. अधिकतम : 15
8. } ) ) ;

लेकिन अभी के लिए, हम अभी भी गूगल मैप्स एपि स्क्रिप्ट्स, पिक्चर्स और कर्सर्स से जुड़े हुए हैं।

आइए सबसे महत्वपूर्ण स्क्रिप्ट से शुरू करें: 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, मार्कर} .js ।

पहली स्क्रिप्ट में कर्नेल होता है, बाकी - अतिरिक्त घटक। Main.js डाउनलोड करें और चूँकि gmapapi.js में अतिरिक्त घटकों का कोई उल्लेख नहीं है, इसलिए जल्दी से main.js को देखते हुए हम उन सभी घटकों को प्राप्त कर लेते हैं जिनकी हम रुचि रखते हैं, जिन्हें हम Components.js में डाउनलोड करते हैं:

गूगल। नक्शे .__ gjsload__ ( 'सामान्य' , ...
गूगल। नक्शे .__ gjsload__ ( 'नियंत्रण' , ...
गूगल। नक्शे .__ gjsload__ ( 'निर्देश' , ...
गूगल। नक्शे .__ gjsload__ ( ' दूरी_मैट्रिक्स ' , ...
गूगल। नक्शे .__ gjsload__ ( ' Drawing_impl ' , ...
गूगल। नक्शे .__ gjsload__ ( 'उन्नयन' , ...
गूगल। नक्शे .__ gjsload__ ( 'जियोकोडर' , ...
गूगल। नक्शे .__ gjsload__ ( 'ज्यामिति' , ...
गूगल। नक्शे .__ gjsload__ ( 'infowindow' , ...
गूगल। नक्शे .__ gjsload__ ( 'kml' , ...
गूगल। नक्शे .__ gjsload__ ( 'लेयर्स' , ...
गूगल। नक्शे .__ gjsload__ ( 'नक्शा' , ...
गूगल। नक्शे .__ gjsload__ ( 'मार्कर' , ...
गूगल। नक्शे .__ gjsload__ ( 'मैक्सज़ूम' , ...
गूगल। नक्शे .__ gjsload__ ( 'प्याज' , ...
गूगल। नक्शे .__ gjsload__ ( 'ओवरले' , ...
गूगल। नक्शे .__ gjsload__ ( 'Places_impl' , ...
गूगल। नक्शे .__ gjsload__ ( 'पाली' , ...
गूगल। नक्शे .__ gjsload__ ( 'search_impl' , ...
गूगल। नक्शे .__ gjsload__ ( 'आँकड़े' , ...
गूगल। नक्शे .__ gjsload__ ( ' सड़क दृश्य ' , ...
गूगल। नक्शे .__ gjsload__ ( 'उपयोग' , ...
गूगल। नक्शे .__ gjsload__ ( 'उपयोग' , ...

अब gmapapi.js में हम स्थानीय के साथ बाहरी फ़ाइल के main.js को लोड करने की जगह लेंगे, और हम घटकों को लोड भी करेंगे। js ताकि नक्शा शुरू होने के बाद आवश्यक घटकों को लोड करना आवश्यक न हो।

हम आगे देखते हैं: http://maps.googleapis.com से कुछ लिपियों को लोड किया जाता है जो समझ से बाहर का जादू बनाते हैं:

• AuthenticationService.Authenticate
• QuotaService.RecordEvent
• StaticMapService.GetMapImage
• ViewportInfoService.GetViewportInfo
• gen_204
• फुट

हम उनका उल्लेख कर रहे हैं कि वे कहाँ हैं, और यह, जैसा कि यह निकला, gmapapi.js। हम इन लिपियों के लिंक को स्थानीय लोगों के साथ बदल देते हैं (एप्लिकेशन कैश में फ़ॉलबैक कार्य करने के लिए)। खाली .js स्क्रिप्ट जोड़ें जो कुछ भी नहीं करेगी और हमारी मैनिफ़ेस्ट फ़ाइल के फ़ॉलबैक सेक्शन में "मैजिक_ स्क्रिप्ट को खाली। Js" लिंक जोड़ेगी।

fallback:
gmapcache / googleapis / map / api / js / AuthenticationService.Authenticate gmapcache / blank.js
gmapcache / googleapis / map / api / js / QuotaService.RecordEvent gmapcache / blank.js
gmapcache / googleapis / map / api / js / StaticMapService.GetMapImage gmapcache / blank.js
gmapcache / googleapis / map / api / js / ViewportInfoService.GetViewportInfo gmapcache / blank.js
gmapcache / googleapis / मैप्स / gen_204 gmapcache / blank.js
gmapcache / googleapis / Mapslt / ft gmapcache / blank.js

लिपियों के साथ सब कुछ, अब चित्र।

स्प्राइट नहीं करने वाली सभी छवियां http://maps.gstatic.com/mapfiles/ से भरी हुई हैं। सभी फ़ाइलों की एक त्वरित खोज कहती है कि इस लाइन का उल्लेख एक जगह gmapapi.js में किया गया है। हम सभी चित्रों को स्थानीय रूप से डाउनलोड करते हैं, पाया गया लिंक को स्थानीय के साथ बदलते हैं।

अब पूर्ण काम ऑफ़लाइन के लिए हम सब कुछ प्रकट फ़ाइल में धक्का देते हैं।

CACHE MANIFEST

नेटवर्क:
*

कैश:
index.html
style.css

script.js
gmapapi.js
gmapcache / main.js
gmapcache / Components.js
gmapcache / खाली। 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 / markers2 / मार्कर_sprite.png
gmapcache / gstatic / mv / imgs8.png
gmapcache / gstatic / रोट2.png
gmapcache / gstatic / szc4.png
gmapcache / gstatic / पारदर्शी। png

gmapcache / gstatic / openhand_8_8.cur
gmapcache / gstatic / shuthand_8_8.cur

सब कुछ, एक पूरी तरह से काम कर रहे ऑफ़लाइन मानचित्र तैयार है!

मैं gmapapi.js में सभी परिवर्तन दूंगा:

यह था	बन गया है
[ " http://mt0.googleapis.com/mapslt/ft?hl=en-USu0026 " , " http://mt1.googleapis.com/mapslt/ft?hl=en-USu0026 " ]	[ "गमपचे / गोग्लेपिस / मैप्स्ल / फीट? एचएल = एन-यूयू ००२६" ]
[ "एन-यूएस" , "यूएस" , अशक्त , 0 , अशक्त , अशक्त , " http://maps.gstatic.com/mapfiles/ " , " http://csi.gstatic.com " , " https://maps.googleapis.com " , " http://maps.googleapis.com " ]	[ "एन-यूएस" , "यूएस" , अशक्त , 0 , अशक्त , अशक्त , "gmapcache / gstatic /" , " http://csi.gstatic.com " , " https://maps.googleapis.com " , "गमपचे / गोग्लेपिस" ]
getScript ( " http://maps.gstatic.com/intl/en_us/mapfiles/api-3/8/5/main.js " ) ;	गेटस्क्रिप्ट ( "gmapcache / main.js" ) ; गेटस्क्रिप्ट ( "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 पर जाएं , "वेब स्टोरेज तैयार करें" पर क्लिक करें, स्प्राइट को लोड करने के लिए कुछ सेकंड प्रतीक्षा करें, फिर इंटरनेट बंद करें, वेबस्टोरेजमैप पर क्लिक करें और आनंद लें।

"वेब स्टोरेज तैयार करें" बटन अपलोड लोकलस्टोरेज को भेजता है, और "वेब स्टोरेज को क्लियर" करता है।

कार्ड के प्रकार:

• मानचित्र - मानक Google मानचित्र मानचित्र।
• उपग्रह - एक उपग्रह से एक मानक गूगल मानचित्र मानचित्र।
• OSM - google api के साथ OSM कार्ड का कार्यान्वयन।
• MyGmap - मानक Google मानचित्र मानचित्र का कार्यान्वयन।
• LocalGmap - स्थानीय रूप से संग्रहीत एक मानचित्र का कार्यान्वयन (साइट के समान होस्ट पर)।
• WebStorageGmap - स्थानीयस्टोरेज में संग्रहीत मानचित्र का कार्यान्वयन (पहले आपको "वेब संग्रहण तैयार करें" चलाने की आवश्यकता है)।
• LocalMyGmap, LocalGmap और MyGmap का एक हाइब्रिड कार्यान्वयन है, यदि डेटा मानचित्र पर एक निश्चित क्षेत्र में है, तो यह LocalGmap की तरह काम करता है, अन्यथा MyGmap की तरह।
• WebStorageMyGmap, WebStorageGmap और MyGmap का एक हाइब्रिड कार्यान्वयन है, यदि डेटा लोकलस्टोरेज में है, तो यह WebStorageGmap, अन्यथा MyGmap की तरह काम करता है।