उदाहरण के लिए OL3 का उपयोग करके जावास्क्रिप्ट में जड़ता

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

हमने एक बार 2 जीआईएस मैप एपीआई के विकास के हिस्से के रूप में एक समान प्रश्न पूछा था, और आज हमने अपने मामूली अनुभव को साझा करने का फैसला किया।

जड़ता के कार्यान्वयन के विवरण पर विचार करने से पहले, आइए तैयार उदाहरण देखें:

• जड़त्वीय स्क्रॉल ;
• तस्वीरों के हिंडोला की जड़ता आंदोलन ;
• 2 जीआईएस कार्ड की जड़ता आंदोलन ।

ठीक है, अब बात है।

प्रयोग के लिए स्थान

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

आइए ऐसे "वंचित" एपीआई की तलाश करें। बिंग , Google ? नहीं, ड्रैग और ड्रॉप कार्ड वाले ये लोग ठीक हैं। आइए देखते हैं कि कैसे चीजें OpenLayers 3 के साथ हैं। हाँ, हमारे "रोगी", हम उसके साथ प्रयोग करेंगे।

"प्रायोगिक" के युवाओं के बावजूद, स्थापना में कठिनाइयों का कारण नहीं था, सब कुछ प्रलेखन में है :



सभी html, js और css उदाहरण फ़ाइलों का स्रोत कोड ol3 / उदाहरण फ़ोल्डर में पाया जा सकता है।

एल्गोरिदम की रूपरेखा

वास्तव में, सब कुछ काफी सरल है।

जड़त्वीय गति के लिए तैयारी:

• हम कार्ड को खींचने की शुरुआत के क्षण को पकड़ते हैं और वर्तमान समय को रिकॉर्ड करते हैं;
• हम ड्रैग एंड ड्रॉप के अंत के क्षण को पकड़ते हैं (उपयोगकर्ता ने माउस बटन जारी किया है) और इस समय:
  
  • खींचें की अवधि को मापें (एमएस में);
  • X- अक्ष के साथ और Y- अक्ष (पिक्सेल में) के साथ यात्रा की गई दूरी को मापें;
  • हम एक्स अक्ष पर और वाई अक्ष के साथ मानचित्र को खींचने की गति पर विचार करते हैं (पिक्सल प्रति एमएस में।)।
    
    • गति = दूरी / अवधि।
  • हम एक्स अक्ष के साथ और वाई अक्ष के साथ प्रारंभिक गति पर विचार करते हैं:
    
    • गति = द्रव्यमान * गति, जहाँ द्रव्यमान केवल एक स्थिरांक है।
• हम उस पद्धति को कॉल करते हैं जो ड्रैग के अंत में कार्ड की जड़ता आंदोलन के लिए जिम्मेदार है, चलो इसे जड़ता कहते हैं।

जड़ता विधि को एक निश्चित अवधि (उदाहरण के लिए प्रत्येक 16 एमएस) में एक बार कहा जाता है। इस विधि में, हम:

• हम एक्स अक्ष के साथ और वाई अक्ष के साथ गति के मान से मानचित्र के केंद्र को स्थानांतरित करते हैं;
• हम क्षीणन गुणांक (स्थिर) द्वारा विभाजित करके आवेग को कम करते हैं;
• हम जांचते हैं कि आवेग एक्स अक्ष के साथ "फिसल गया" है और वाई अक्ष के साथ एक निश्चित सीमा तक (भी स्थिर), यदि यह "लुढ़का" है, तो हम आंदोलन को रोकते हैं।

"आपातकालीन" ड्रैग स्टॉप। कार्ड को दो मामलों में जबरन बंद करना चाहिए:

• यदि उपयोगकर्ता मानचित्र पर क्लिक करता है;
• यदि उपयोगकर्ता मानचित्र पर ज़ूम इन करता है।

कोड

चूंकि OpenLayers 3 क्लोजर लाइब्रेरी पर आधारित है, इसलिए हम इसके नियमों के अनुसार कोड लिखेंगे।

फ़ाइल संरचना को देखते हुए, हम देखते हैं कि इंटरैक्शन डायरेक्टरी में वे सभी ऑब्जेक्ट हैं जो मैप के साथ इंटरैक्ट करने के लिए जिम्मेदार हैं। उनमें से एक ऑब्जेक्ट ol.interaction.DragPan है , जो हमारे ol.interaction.DragPanInertia को खींचने, बनाने और इनहेरिट करने के लिए ज़िम्मेदार है, और इसमें नक्शे की जड़ता आंदोलन को लागू करता है।

सुविधा के लिए , एरिक मोलर से अनुरोध एनिमीशनफ्रेम विधि के लिए एक पॉलीफ़िल कार्यान्वयन जोड़ा गया था ।

कार्ड की गति के जबरन रोक के कारण, यह प्रासंगिक घटनाओं के लिए एक बहुत ही सरल सदस्यता द्वारा किया जाता है:

var eventType = ol.BrowserFeature.HAS_TOUCH ? goog.events.EventType.TOUCHEND : goog.events.EventType.MOUSEDOWN; // mouse down goog.events.listen(this._map.getViewport(), eventType, this.stopInertiaMove, false, this); // zoom changed goog.events.listen(this._map, ol.Object.getChangedEventType(ol.MapProperty.RESOLUTION), this.stopInertiaMove, false, this); 

हमारे द्वारा लागू की गई वस्तुओं का उपयोग शुरू करने के लिए नक्शे के लिए, उन्हें ol.Map ऑब्जेक्ट के createInteractions विधि में पंजीकृत होना चाहिए।

सबसे पहले, हम अपने कार्यान्वयन को प्रतिस्थापित करते हैं

 goog.require('ol.interaction.DragPan'); 

पर

 goog.require('ol.interaction.DragPanInertia'); 

और फिर लाइन

 interactions.push(new ol.interaction.DragPan(ol.interaction.condition.noModifierKeys)); 

के साथ बदलें

 interactions.push(new ol.interaction.DragPanInertia(ol.interaction.condition.noModifierKeys)); 

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