CAT 0.4 - इंटरैक्टिव मैप्स के लिए खुले JS लाइब्रेरी का एक नया संस्करण

पिछले संस्करण की रिलीज के बाद से साढ़े पांच महीने के विकास के बाद, मैं अंत में आपके लिए बहुत खुश हूं। आपके लिए 0.4 0.4 - इंटरेक्टिव मानचित्रों के लिए हल्के जावास्क्रिप्ट पुस्तकालय का एक नया संस्करण है जो डेस्कटॉप ब्राउज़रों और मोबाइल उपकरणों पर समान रूप से अच्छी तरह से काम करता है।

यह रिलीज़, जिसमें 33 डेवलपर्स का हाथ था, एक सरल, अधिक सुविधाजनक एपीआई और प्रलेखन की एक बड़े पैमाने पर अपडेट के साथ सुधार और सुधार की एक बड़ी संख्या, आधिकारिक ब्लॉग और प्लगइन्स पृष्ठ का शुभारंभ करता है। आइए क्रम में सुधारों को देखें।

सरलीकृत एपीआई

निम्नलिखित परिवर्तनों (और कई अन्य) को Habré की समीक्षा से भूल से प्रेरित किया गया था । उसके लिए बहुत बहुत धन्यवाद!

CAT 0.4 में कई एपीआई संवर्द्धन शामिल हैं जो आपको सरल और अधिक संक्षिप्त कोड (jQuery शैली में) लिखने की अनुमति देते हैं, जबकि पिछले दृष्टिकोण के साथ शेष पिछड़े संगत (इसलिए आप दोनों शैलियों को मिला सकते हैं):

L.marker([51.5, -0.09]) .addTo(map) .bindPopup('Hello world!') .openPopup(); 

सबसे पहले, विधियाँ अब LatLngBounds , LatLngBounds , Point और Bounds ऑब्जेक्ट्स को सरल सरणियों के रूप में स्वीकार करती हैं - अब उन्हें स्पष्ट रूप से बनाने की कोई आवश्यकता नहीं है:

 map.panTo([50, 30]); //   , : map.panTo(new L.LatLng(50, 30)); 

दूसरे रूप में, Map क्लास की विधियाँ, जैसे कि addLayer , addControl और openPopup , को दूसरी ओर उनके समकक्षों को मिला:

 marker.addTo(map); //  map.addLayer(marker) control.addTo(map); // map.addControl(control) popup.openOn(map); // map.openPopup(popup) 

यह ध्यान में रखते हुए कि कैटलॉग में, सभी विधियाँ जो किसी भी स्पष्ट मान को वापस नहीं लाती हैं, वह वस्तु को खुद को वापस लौटा देती है ( this ), यह "श्रृंखला में" विधियों को कॉल करने के लिए अधिक सुविधाजनक बनाता है।

तीसरा, कैटलॉग में अब प्रत्येक वर्ग का अपना स्वयं का वर्ग कारखाना है (उसी नाम से, लेकिन एक छोटे अक्षर से शुरू होता है), जो आपको new ऑपरेटर के बिना ऑब्जेक्ट बनाने की अनुमति देता है (जो कई चेन कॉल को और अधिक सुंदर बनाता है)।

 L.map('map').fitWorld(); //   , : (new L.Map('map')).fitWorld(); 

नई सुविधाएँ

एन्हांस्ड ज़ूम एनीमेशन

पिछले संस्करण में छवियों से मार्कर, पॉपअप, वेक्टर वस्तुएं और परतें ज़ूम के दौरान छिपाई गई थीं, लेकिन अब वे टाइलों के साथ खूबसूरती से और आसानी से एनिमेटेड हैं। यदि आपके पास मानचित्र पर कई सैकड़ों मार्कर हैं और एनीमेशन बहुत आसानी से नहीं जाता है (जैसे, क्रोम के मामले में 1000 से अधिक), तो आप इसे markerZoomAnimation मैप markerZoomAnimation साथ अक्षम कर सकते हैं, हालांकि इस मामले में मार्कर क्लस्टरिंग प्लग-इन का उपयोग करना अधिक markerZoomAnimation होगा।

कीबोर्ड नियंत्रण

कैटलॉग कार्ड उपलब्धता में डिफ़ॉल्ट रूप से सक्षम नए कीबोर्ड-सक्षम सुविधा के साथ स्पष्ट रूप से सुधार हुआ है। यह आपको तीर कुंजी और +/- दबाकर नक्शे को नियंत्रित करने की अनुमति देता है। बहुत सुविधाजनक है, वैसे - यह कोशिश करो!

जड़ता प्रभाव

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

Android 4 पर फिंगर स्केलिंग

USC के पिछले संस्करण में, नक्शे पर / बाहर ज़ूम करने का इशारा केवल iOS पर काम करता था, Android उपयोगकर्ताओं को बटन के साथ संतोष करना पड़ता था। अब आप एंड्रॉइड 4+ पर मैप स्केल बदलने के लिए जेस्चर का उपयोग कर सकते हैं, और न केवल अंतर्निहित ब्राउज़र में, बल्कि एंड्रॉइड के लिए क्रोम और फ़ायरफ़ॉक्स पर भी उपयोग कर सकते हैं।

स्केल संकेतक

मीट्रिक और / या शाही माप प्रणालियों में वर्तमान पैमाने का एक सरल संकेतक। हमेशा की तरह, CSS का उपयोग करके लुक को पूरी तरह से बदला जा सकता है।

पॉलीलाइन और बहुभुज संपादन

आप एक सरल, सहज ज्ञान युक्त अंतरफलक का उपयोग कर पॉलीइन्स और बहुभुज को संपादित करने की अनुमति देता है। सच है, भविष्य के संस्करणों में यह सुविधा सबसे अधिक संभव है।

मार्करों के लिए हल्के div आइकन

छवियों से मार्करों के लिए पारंपरिक आइकनों के अलावा, अब आप हल्के आइकनों का उपयोग कर सकते हैं, जो बाहरी सीएसएस के साथ स्टाइल किए गए कुछ HTML के साथ एक नियमित div । उदाहरण के लिए, अब वे संपादन के लिए उपयोग किए जाते हैं (कोने पर वर्ग) और प्लगइन में क्लस्टरिंग (रंग क्लस्टर) के लिए।

 L.marker([50.505, 30.57], { icon: L.divIcon({className: 'my-div-icon'}) }).addTo(map); 

आयत

एक नक्शे पर आयताकार क्षेत्रों को बनाने का एक आसान तरीका। बहुभुज का उपयोग करते हुए पहले भी ऐसा किया जा सकता था, लेकिन यह अधिक सुविधाजनक है:

 L.rectangle([[51.505, -0.03], [51.5, -0.045]]).addTo(map); 

एपीआई संवर्द्धन

GeoJSON API

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

आइकन एपीआई

आइकन एपीआई में सुधार और सरलीकरण किया गया है, हालांकि परिवर्तन भी पिछड़े संगत नहीं हैं। यह अब कैसा दिखता है, आप इसी प्रशिक्षण लेख में देख सकते हैं, या तुरंत प्रलेखन में ।

नियंत्रण एपीआई

खुद के नियंत्रण अब बनाने में बहुत आसान हैं - प्रलेखन में एक उदाहरण देखा जा सकता है।

घटना से निपटने में सुधार

on और off ईवेंट के साथ काम करने के तरीके अब एक ही लाइन पर कई प्रकार के ईवेंट स्वीकार कर सकते हैं (प्रकार के बीच रिक्त स्थान के साथ):

 map.on('click dblclick moveend', doStuff); 

आप उन घटनाओं / श्रोताओं की जोड़ी के साथ वस्तुओं को भी स्थानांतरित कर सकते हैं:

 marker.on({ click: onMarkerClick, dragend: onMarkerDragEnd }); 

इसके अलावा, अब, यदि ईवेंट के नाम के अलावा off पद्धति से कुछ भी पारित नहीं किया जाता है, तो ऑब्जेक्ट उन सभी श्रोताओं को अनसब्सक्राइब कर देगा, जिन्हें इस ईवेंट के लिए सदस्यता दी गई थी:

 map.off('click'); 

अन्य सुधार

CAT 0.4 में विभिन्न वर्गों में 30 से अधिक नए तरीके, विकल्प और घटनाएं शामिल हैं, जिससे पुस्तकालय अधिक संपूर्ण और शक्तिशाली हो जाता है। आप पूरी सूची देख सकते हैं।

प्रदर्शन और प्रयोज्य संवर्द्धन

नए संस्करण में कई सुधार शामिल हैं जो पत्रक को और भी तेज बनाते हैं:

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

इसके अलावा, कई प्रयोज्य सुधार थे:

• मानचित्र खींचना तब भी काम करता है जब कर्सर एक मार्कर के ऊपर होता है (बहुत सारे मार्कर के साथ नक्शे पर मदद करता है)
• बेहतर पॉपअप दृश्य
• टाइल की परतों में अब detectRetina विकल्प होता है, जो रेटिना पर टाइलों के रिज़ॉल्यूशन को दोगुना कर देता है ( हबर पर कुख्यात मिथगोल द्वारा कार्यान्वित)

परिहार

CAT 0.4 में लगभग 45 फ़िक्स हैं जो लाइब्रेरी को सभी समर्थित ब्राउज़रों और प्लेटफार्मों के बीच अधिक स्थिर और विश्वसनीय बनाते हैं। सुधार जो मैं विशेष रूप से नोट करना चाहूंगा: आईओएस पर एक गूंगा गड़बड़, जो कुछ दुर्लभ मामलों में ज़ूम के बाद कार्ड के गायब होने का कारण बना; IE10 पर निष्क्रिय ज़ूम; पृष्ठ में हेडर में सख्त XHTML सामग्री-प्रकार के साथ दिए जाने पर कार्ड को तोड़ना; position: fixed साथ एक तत्व के अंदर नक्शे पर गलत तरीके से काम करने वाला ज़ूम position: fixed । यहां फिक्स की पूरी सूची दी गई है।

पिछले संस्करण से अद्यतन करें

GeoJSON और Icon में उपर्युक्त परिवर्तनों के अलावा, पिछले संस्करण से 0.4 में अपग्रेड करते समय, संभावित असंगत परिवर्तनों की एक छोटी सूची के साथ खुद को परिचित करना सार्थक है (हालांकि पुराने कोड को ठीक करने में कुछ मिनट से अधिक समय लगेगा)।

आप नए संस्करण को डाउनलोड कर सकते हैं, सीडीएन में लाइब्रेरी के लिंक प्राप्त कर सकते हैं या डाउनलोड पृष्ठ पर स्रोत कोड से अपनी खुद की विधानसभा के लिए निर्देश पढ़ सकते हैं।

कोड आँकड़े

मैं पुस्तकालय को यथासंभव प्रकाश में रखने के लिए प्रतिबद्ध हूं। यहाँ नए संस्करण पर कुछ आँकड़े दिए गए हैं:

• जावास्क्रिप्ट: संपीड़ित रूप में 26.7 KB (लघु रूप में 102 KB और स्रोत में 176 KB, कोड की 7578 लाइनें)
• CSS: संपीड़ित रूप में 1.8 KB (स्रोत में 8 KB, कोड की 377 लाइनें)
• चित्र: 10 KB (5 png छवियाँ)

प्रलेखन अद्यतन

उस समय तक, USC का दस्तावेज अधूरा था और उसे हमेशा अद्यतित नहीं रखा गया था। इस रिलीज के लिए, प्रलेखन को पूर्ण और प्रासंगिक 100% की स्थिति में लाने के लिए बहुत प्रयास किया गया था। सभी शेष वर्गों, विधियों, गुणों, विकल्पों और घटनाओं को सावधानीपूर्वक प्रलेखित किया गया और बड़ी संख्या में कोड नमूने के साथ। अब से, प्रलेखन को सही स्थिति में रखा जाएगा।

इसके अलावा, प्रलेखन पृष्ठ के डिजाइन में सुधार किया गया था - रंग, फ़ॉन्ट, इंडेंटेशन, हाइफ़नेशन, यहां तक ​​कि कॉलम की चौड़ाई - पृष्ठ को पढ़ने में आसान और सुखद बनाने के लिए कई विवरणों पर काम किया गया था।

प्लगइन्स पृष्ठ

USC की वेबसाइट में अंततः तृतीय-पक्ष प्लगइन्स की सूची वाला एक पृष्ठ है जो कई दिलचस्प विशेषताओं के साथ पुस्तकालय का विस्तार कर सकता है और तृतीय-पक्ष सेवाओं के साथ एकीकृत करने में मदद कर सकता है।

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

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

Proj4Leaflet प्लगइन के लिए धन्यवाद, जो कि Proj4js भौगोलिक प्रक्षेपण पुस्तकालय के साथ पत्रक को एकीकृत करता है, अब कई गैर-मानक अनुमानों के साथ पत्रक का उपयोग किया जा सकता है।

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

USC का उपयोग करने वाली बड़ी कंपनियां

आगामी रिलीज के बाद से, कई महान कंपनियों ने कैट का उपयोग करना शुरू कर दिया है, लेकिन मैं गर्व से तीन - फ्लिकर , फोरस्क्वेयर और विकिमीडिया फाउंडेशन का उल्लेख करना चाहूंगा। कई अन्य प्रसिद्ध उपयोगकर्ता अब साइट के मुख्य पृष्ठ पर आते हैं ।

आपका धन्यवाद

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

आपका ध्यान के लिए धन्यवाद! मुझे किसी भी प्रतिक्रिया की खुशी होगी।

पुनश्च: यह लेख , कैटलॉग वेबसाइट पर मेरी आधिकारिक घोषणा का थोड़ा संशोधित रूसी संस्करण है, लेकिन जब से मैं खुद एक लेखक हूं, मैंने फैसला किया कि यह अभी भी अनुवादों पर लागू नहीं होता है। अगर सही है तो मुझे।