का उपयोग कर बड़े कस्टम मानचित्रों को ऑफ़लाइन प्रदर्शित और नेविगेट करना मेरा प्रश्न यह है कि पुराने मोबाइल उपकरणों का समर्थन करते समय उन्हें ऑफ़लाइन फोनगैप एप्लिकेशन में बड़े कस्टम मानचित्रों को कुशलता से प्रदर्शित करने और उन्हें आसानी से ज़ूम करने की इजाजत दी जाती है?फोनगैप
मैं एक मोबाइल एप्लिकेशन विकसित कर रहा हूं जिसमें दूरस्थ क्षेत्रों में पैदल मार्गों को नेविगेट करने के लिए भौगोलिक स्थान का उपयोग करना शामिल है, जहां संभवतः उपयोगकर्ता के पास सिग्नल नहीं होगा और इसलिए इंटरनेट कनेक्शन होगा। यह महत्वपूर्ण है कि ऐप एंड्रॉइड 2.2+ के साथ अच्छी तरह से काम करता है (इसलिए एसवीजी एक विकल्प नहीं है) साथ ही आईओएस 4 +।
मैंने एडोब इलस्ट्रेटर का उपयोग करके प्रत्येक मार्ग के लिए उचित प्रस्तावों पर कस्टम वेक्टर मानचित्र तैयार किए हैं, औसत 2000x2000 पिक्सेल के बारे में है और इनमें से सबसे बड़ा परिणाम 4000x2400 पिक्सेल में परिणाम देता है।
मैंने मूल रूप से फोनगैप/जेक्यूएम के साथ जाने के लिए चुना है क्योंकि मैं एक वेब प्रोग्रामिंग पृष्ठभूमि से आया हूं और यह उपयोगकर्ता इंटरफ़ेस को प्राप्त करने और बिना किसी देशी कोड में जाने की आवश्यकता के चलने का सबसे तेज़ तरीका प्रतीत होता है, हालांकि मैंने बिजली और स्क्रीन प्रबंधन के प्रयोजनों के लिए देशी कोड का उपयोग करके कुछ फोनगैप प्लगइन लिखे हैं।
एप्लिकेशन को उपयोगकर्ता को मानचित्र के आस-पास पैन करने (ड्रैग करके) और ज़ूम इन/आउट (पिनिंग करके) मूल छवि आकार के लगभग 25% से 200% के बीच पैन करने की अनुमति देने की आवश्यकता है।
मैंने जो परीक्षण किया है, वह एंड्रॉइड 2.3.3 और एक एचटीसी वाइल्डफायर एंड्रॉइड 2.2 चलाने वाला एचटीसी डिजायर पर रहा है, क्योंकि ये ऐप चलाने वाले सबसे कम स्पेक डिवाइसों में से कुछ होने की संभावना है पर।
मैंने मानचित्र को प्रदर्शित करने के लिए विभिन्न दृष्टिकोणों का प्रयास किया है (नीचे विस्तृत), लेकिन अब तक प्रत्येक उद्देश्य के लिए अनुपयुक्त साबित हुआ है क्योंकि ऐप का मेमोरी उपयोग बहुत बढ़िया है, स्टोरेज स्पेस की आवश्यकता ऐप को बहुत बड़ी बनाती है डाउनलोड करने के लिए या CPU उपयोग बहुत गहन है क्योंकि पैनिंग/ज़ूमिंग करते समय अंतराल होता है।
किसी भी सुझाव की बहुत सराहना की। अग्रिम में धन्यवाद।
दृष्टिकोण मैं कोशिश की है: टैग
इस का उपयोग करते हुए रेखापुंज PNG के रूप में
1. प्रदर्शन नक्शा पहले दृष्टिकोण मैंने कोशिश की थी। इलस्ट्रेटर से 4000x2400 पिक्सेल छवि को 128 रंग पीएनजी -8 के रूप में निर्यात करने के परिणामस्वरूप 746 केबी फ़ाइल हुई। मैंने व्यूपोर्ट के सापेक्ष इसे स्थिति में पूरी तरह से पोजीशन करके छवि को पॅन किया और टैग की चौड़ाई/ऊंचाई विशेषताओं को स्केल करके छवि को ज़ूम किया। इस दृष्टिकोण के साथ समस्या यह थी कि 1: 1 ज़ूम स्तर पर भी, एंड्रॉइड एप्लिकेशन ने छवि के लिए 60 एमबी रैम का इस्तेमाल किया और 200% तक ज़ूम करने से 120 एमबी बढ़ने का कारण बन गया, जिससे ऐप एचटीसी वाइल्डफायर पर दुर्घटनाग्रस्त हो गया।
2।एचटीएमएल 5 कैनवास
मेमोरी उपयोग में आनुपातिक वृद्धि के कारण ज़ूमिंग की समस्या से बचने के लिए, मैंने छवि को जेएस के माध्यम से लोड करने का प्रयास किया, फिर छवि के हिस्से को कैनवास में प्रदर्शित करने की प्रतिलिपि बनाने की कोशिश की व्यूपोर्ट के आकार, कुछ की तरह:
var canvas = $(‘canvas#mycanvas’);
canvas.width = $(window).width;
canvas.height = $(window).height;
...
var img = new Image();
img.src = “map.png”;
...
var context = canvas[0].getContext("2d");
context.drawImage(img, x, y, w, h, 0, 0, canvas.width, canvas.height);
एक्स, वाई स्रोत छवि पैन करके और w परिभाषित के भीतर ऊपरी-बाएं कोने वह जगह है जहाँ, ज ज़ूम स्तर
द्वारा निर्धारित स्रोत छवि के भीतर क्षेत्र आकार हैयहां समस्या यह थी कि बड़ी नक्शा छवियां इतनी थीं mehow गुणवत्ता खोने जबकि स्मृति में, (मैं केवल कुछ ऊपरी स्मृति सीमा जो हिचकिचाहट में जिसके परिणामस्वरूप है वहाँ यह मान सकते हैं) के कारण नक्शे एप्लिकेशन में विकृत देखने तक में: एचटीएमएल 5 कैनवास
का उपयोग कर वेक्टर के रूप में see here for an example screenshot
3. प्रदर्शन नक्शा
थोड़ा सा गूगलिंग ने मुझे एआई 2 कैनवास खोजने के लिए प्रेरित किया, एक इलस्ट्रेटर प्लगइन जो आपको एचटीएमएल 5 कैनवास में प्रदर्शित वैक्टर के रूप में कलाकृति निर्यात करने में सक्षम बनाता है। निर्यात का नतीजा एक एचटीएमएल फाइल है जिसमें जेएस का एक हिस्सा होता है जो इलस्ट्रेटर के सभी पथों को बेजियर वक्र के रूप में दर्शाता है। मेरे 4000x2400 मानचित्र का निर्यात करने के परिणामस्वरूप वेक्टर पथ युक्त 550 केबी एचटीएमएल फाइल में परिणाम हुआ। मेरे टेस्ट ऐप में, मैंने पूरे मानचित्र को 4000x2400 पिक्सेल के इन-मेमोरी कैनवास (डीओएम से जुड़ा नहीं) में प्रस्तुत किया, फिर इसके साथ संदर्भ.drawImage() का उपयोग करके व्यूपोर्ट-साइज्ड कैनवास में इसके प्रासंगिक हिस्सों की प्रतिलिपि बनाई स्रोत के रूप में स्मृति कैनवास। एचटीसी वाइल्डफायर पर, हालांकि इन-मेमोरी कैनवास के सभी बेजियर घटता के शुरुआती प्रस्तुत करने में लगभग 2000ms लगे, कैनवस के बीच प्रतिलिपि तेजी से पैनिंग और ज़ूमिंग की अनुमति देने के लिए पर्याप्त थी। समस्या यह थी कि जब मैंने ऐप के मेमोरी उपयोग को देखा, तो यह सभी वैक्टरों द्वारा प्रदान किए जाने के बाद इन-मेमोरी कैनवास के लिए 120 एमबी का उपयोग कर रहा था।
मैंने वेक्टर मानचित्र का उपयोग करके दूसरे दृष्टिकोण की कोशिश की; सभी वैक्टरों को एक बड़े इन-मेमोरी कैनवास में प्रस्तुत करने के बजाय, मैंने ऐप को गणना की कि प्रत्येक ड्रैग/चुटकी घटना के दौरान वर्तमान पैन स्थिति/ज़ूम स्तर पर व्यूपोर्ट के भीतर कौन से वेक्टर पथ दिखाई दे रहे थे और दृश्यमान वैक्टर को केवल व्यूपोर्ट में खींचें आकार के कैनवास। हालांकि इसने आवश्यक स्मृति उपयोग को 10 एमबी तक कम कर दिया, सीपीयू चक्रों को प्रत्येक ड्रैग/चुटकी चक्र पर इन गणनाओं को करने की आवश्यकता होती है, जिससे पुराने एंड्रॉइड फोन पर एप अंतराल इतना आसान हो जाता है।
4. ऑफ़लाइन टाइलिंग
map tiler का उपयोग का उपयोग करके प्रदर्शन नक्शा, मैं पीएनजी टाइल्स मेरे नक्शे के लिए ज़ूम स्तरों पर 25% से 100% करने के लिए बनाया। मेरे टेस्ट ऐप में, मैं फिर से स्मृति उपयोग को कम करने और एचटीसी वाइल्डफायर पर एक चिकनी पैन/ज़ूम अनुभव का उत्पादन करने की मांग पर टाइल लोड करने में सक्षम था। मैंने सोचा कि जब तक मैंने उत्पादित एपीके के आकार को नहीं देखा तब तक मुझे समाधान मिल गया: मेरे 4000x2400 मानचित्र के लिए, नक्शा टाइलर ने 4 एमबी टाइल छवियों का उत्पादन किया। मेरे अधिकांश मानचित्र लगभग 2000x2000 पिक्सेल हैं, जिसके परिणामस्वरूप लगभग 2 एमबी टाइल्स हैं। मेरे उचित आवेदन के कोड के साथ फोनगैप ओवरहेड एक और 2 एमबी है।
मेरा इरादा एंड्रॉइड/ऐप्पल बाजारों पर उपलब्ध ऐप्स की श्रृंखला को रिलीज़ करना है, प्रत्येक के पास लगभग 10 मानचित्रों के सेट हैं, लेकिन प्रत्येक मानचित्र को टाइलिंग के साथ 1-4 एमबी के बीच वजन होता है ताकि परिणामस्वरूप ऐप बहुत बड़ा हो जाए डाउनलोड।