🚦 💜 ▪️ गूगल मैप्स पर फास्ट ट्रैक 👐 💃🏾 🍼

मैं पैराग्लाइडिंग प्रतियोगिताओं के दृश्य पर काम कर रहा हूं - मैं Airtribune.com के लिए एक दौड़ देखने वाला खिलाड़ी लिख रहा हूं । इस प्रक्रिया में, मैं दिलचस्प और गैर-मानक कार्यों में आता हूं। उनमें से एक गूगल मैप्स पर मार्करों और पटरियों को जल्दी से खींचने का काम है।

तराजू निम्नानुसार हैं: एक सीमित क्षेत्र (50x50 किमी) में ~ 200 ट्रैकर हैं, प्रत्येक 10 सेकंड में एक बार अपनी स्थिति के बारे में डेटा प्रसारित करता है। जब आप निर्देशांक बदलते हैं तो आपको उन सभी को मानचित्र पर खींचना होगा और उन्हें आसानी से स्थानांतरित करना होगा। प्रत्येक मार्कर के लिए एक ट्रैक तैयार किया जाना चाहिए। चित्र लगभग निम्नलिखित है:

यह जल्द ही स्पष्ट हो गया कि बिल्ट-इन ऑब्जेक्ट्स - google.maps.Marker और google.maps.Polyline - इस कार्य के लिए बहुत धीमे थे। अनुकूलन के लिए विचारों का एक समूह था, और परिणाम कैनवास पर एक समाधान था जो 40fps पर एक हजार मार्करों पर भी काम करता है। हालांकि, आप खुद एफपीएस को माप सकते हैं - मैंने 4 इंजनों की तुलना करने के लिए एक परीक्षण एप्लिकेशन को एक साथ रखा, जिसमें मक्खी पर आप विभिन्न चिप्स कनेक्ट कर सकते हैं और काम की गति को देख सकते हैं।

परीक्षण आवेदन

kasheftin.imtqy.com/gmaps यहां डेमो है, github.com/Kasheftin/gmaps स्रोत कोड है। फ़ायरफ़ॉक्स और क्रोम, html + js में काम करता है। प्रयुक्त गूगल मैप्स एपीआई वी 3, नॉकआउट, आवश्यकता, अंडरस्कोर और बूटस्ट्रैप।

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

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

देशी इंजन

यह मानक Google मानचित्र का उपयोग करके प्रदान कर रहा है। पहली बात जो दिमाग में आती है, वह है ट्रैकर्स की वर्तमान स्थिति और google.maps.Marker का उपयोग करना। एनीमेशन के दौरान ब्रेक का कारण ऑब्जेक्ट लॉजिक है। मार्कर और लाइनें कैनवास पर चित्र हैं, लेकिन हम वस्तुओं के रूप में उनके साथ संवाद करते हैं। और यह महंगा है। मार्कर आंदोलनों को चिकना होना चाहिए। यदि मार्कर में एक निश्चित समय पर निर्देशांक नहीं है, तो इसके तात्कालिक निर्देशांक की गणना पहले और बाद में उपलब्ध निर्देशांक के बीच एक रैखिक अनुपात के रूप में की जाती है। इसका मतलब है कि हर फ्रेम में सभी मार्कर शिफ्ट किए गए हैं।

मान लीजिए कि यादृच्छिक निर्देशांक वाले 100 मार्करों को मार्कर सरणी में बनाया गया था। कोड पर विचार करें:

var run = function() { for (var i = 0; i < markers.length; i++) markers[i].setPosition(getRandomCoords()); requestAnimFrame(run); } run();

रन फ़ंक्शन मोटे तौर पर एनीमेशन का एक फ्रेम है। प्रत्येक फ्रेम में, प्रत्येक मार्कर बहुत सुविधाजनक सेटपोसिशन विधि का उपयोग करके एक नई स्थिति में जाता है। यह निम्नलिखित की तरह कुछ होता है:

भौगोलिक निर्देशांक आयताकार में बदल जाते हैं, और फिर WGS84 पर आधारित पिक्सेल के लिए।
यह निर्धारित किया जाता है कि किस कैनवास-टाइल पर मार्कर मौजूद था, और जिस पर अब इसे कूदना चाहिए।
कैनवास एक बिटमैप है, इसकी कोई वेक्टर संरचना नहीं है। एक पूर्ण Redraw होता है।

पाचन: मजाक पहेली

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

 var run = function() { //    var startDt = (new Date).getTime(); //  -  ,    callback requestAnimFrame(function() { // ,    var currentDt = (new Date).getTime(); // ,     requestAnimFrame var diffDt = currentDt-startDt; //       ourTimer += diffDt; }); //   run(); }

क्या सब कुछ सही प्रतीत होता है? मैं एक अतिरंजित उदाहरण चलाने का सुझाव देता हूं और त्रुटि ढूंढता हूं - jsfiddle.net/kasheftin/a5sen/1 ।

अद्भुत इंजन

हम बाद में पटरियों का ध्यान रखेंगे, लेकिन अब हम मार्करों के ड्राइंग को अनुकूलित करेंगे। गूगल मैप्स v2 और लीफलेट में मार्करों को divas द्वारा तैयार किया गया है। यह मान लेना तर्कसंगत है कि 100 डीवाओं को स्थानांतरित करना 100 बार ऑब्जेक्ट्स के साथ कैनवास को लाल करने से तेज है। खासकर यदि आप समन्वय गणना का अनुकूलन करते हैं।

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

टिप्पणियों के साथ कोड

 var Overlay = function(map) { this._map = map; this.setMap(map); } //     google.maps.OverlayView Overlay.prototype = new google.maps.OverlayView(); //          Overlay.prototype.onAdd = function() { //    - this._container = document.createElement("div"); this._container.style.position = "absolute"; //   ,     ,   z-index- // floatPane -   ,      this.getPanes().floatPane.appendChild(this._container); this.relayout(); } //          -          //       ,   -    -    Overlay.prototype.relayout = function() { var bounds = this._map.getBounds(); // - -   var corner = new google.maps.LatLng(bounds.getNorthEast().lat(),bounds.getSouthWest().lng()); //    this.sqCorner = this._map.getProjection().fromLatLngToPoint(corner); //      this.pxCorner = this.getProjection().fromLatLngToDivPixel(corner); //      this._container.style.top = Math.floor(this.pxCorner.l)+"px"; this._container.style.left= Math.floor(this.pxCorner.t)+"px"; } //       Overlay.prototype.appendChild = function(child) { this._container.appendChild(child); } var map = new google.maps.map(...); var overlay = new Overlay(map);

असफल अनुकूलन

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

एक विचार उठता है - चूंकि प्रत्येक ड्रेजर के साथ ओवरले कार्ड को ऊपरी बाएं हाथ के कोने में वापस करने की आवश्यकता होती है, इसे नियंत्रण की एक निश्चित परत में क्यों नहीं रखा जाता है? यह काम करता है (स्टैकओवरफ्लो पर चर्चा और jsfiddle पर काम करने का उदाहरण)। यह विचार सफल भी हो सकता है - जब तक कि यह एप्लिकेशन Android जैसे धीमे सिस्टम पर नहीं चल रहा हो। यह पता चला है कि कार्ड चल रहा है, और मार्करों के पास समय नहीं है और जगह में सुस्त हैं। सभी को इस तथ्य के लिए उपयोग किया जाता है कि अनलोड किए गए ग्रे क्षेत्र ड्रैग के दौरान बाहर आ सकते हैं, जो तब डेटा से भरे होते हैं (उदाहरण के लिए, उन्होंने मैप को स्थानांतरित किया - और नए क्षेत्र पर ट्रैक केवल एक सेकंड के बाद खींचा गया था)। लेकिन परतों के आंदोलन में desync अस्वीकार्य है।

कैनवस इंजन

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

टिप्पणियों के साथ कोड

 var Overlay = function(map) { this._map = map; this._mapDiv = this._map.getDiv(); this.setMap(map); } //     google.maps.OverlayView Overlay.prototype = new google.maps.OverlayView(); //          Overlay.prototype.onAdd = function() { //  canvas-   this._container = document.createElement("canvas"); this._canvas.style.position = "absolute"; this._container.style.pointerEvents = "none"; this._container.style.webkitTransform = "translate3d(0,0,0)"; this._container.style.imageRendering = "optimizeSpeed"; //   ,     ,   z-index- // floatPane -   ,      this.getPanes().floatPane.appendChild(this._canvas); this.relayout(); } //          -          //       ,   -    -    Overlay.prototype.relayout = function() { var bounds = this._map.getBounds(); // - -   var corner = new google.maps.LatLng(bounds.getNorthEast().lat(),bounds.getSouthWest().lng()); //    this.sqCorner = this._map.getProjection().fromLatLngToPoint(corner); //      this.pxCorner = this.getProjection().fromLatLngToDivPixel(corner); //      this._container.style.top = Math.floor(this.pxCorner.l)+"px"; this._container.style.left= Math.floor(this.pxCorner.t)+"px"; //      ,     ,   if (this._width != this._mapDiv.offsetWidth || this._height != this._mapDiv.offsetHeight) { this._width = this._mapDiv.offsetWidth; this._height = this._mapDiv.offsetHeight; this._container.width = w; this._container.height = h; } }

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

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

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

आइकन कैशिंग

यह केवल स्प्राइट्स, आइकॉन, टेक्स्ट और अन्य छोटे ग्राफिक्स को कैश करने की आवश्यकता का एक उदाहरण है। कैनवास इंजन में, मार्करों को कैप्शन के साथ तैयार किया गया है। कैनवास पर ड्राइंग पाठ, विशेष रूप से स्ट्रोक (स्ट्रोकटैक्) के साथ, एक बहुत महंगा ऑपरेशन है। एक सेटिंग है जिसमें एक अलग छोटे कैनवास पर पाठ के साथ कैशिंग आइकन शामिल हैं (तैयार छवि को फिर ड्राइमेज कमांड के साथ ओवरले में डाला जाता है)। 100 टोकन पर, कैश्ड और नॉन-कैश्ड संस्करणों का प्रदर्शन सभी चीजों के बराबर है, 15 गुना अलग है।

पटरियों

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

देशी और अद्भुत इंजनों में, google.maps.Polyline ऑब्जेक्ट का उपयोग करके ट्रैक तैयार किए जाते हैं। एक सेटिंग है - पूरे ट्रैक के लिए एक पॉलीलाइन का उपयोग करें या दो (गतिशील भाग के लिए एक, स्थैतिक के लिए दूसरा)। ट्रैक जितना लंबा होगा, एक सिंगल पॉलीलाइन दो में विभाजित हो जाएगी। यह इस तथ्य के कारण है कि पहले मामले में, प्रत्येक फ्रेम में, आपको ट्रैक से अंतिम बिंदु को हटाने की जरूरत है (वह जो मार्कर की वर्तमान स्थिति को इंगित करता है) और इसे फिर से जोड़ें।

मुख्य विशेषता

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

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

Simplify.js

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

टाइल्स ट्रैक

सभी वर्णित अनुकूलन अब Aitribune पर काम करते हैं। दौड़ के उदाहरण - 1 , 2 । प्रदर्शन के दृष्टिकोण से, मुख्य कार्य जो अभी काम नहीं करता है, मानचित्र शिफ्टिंग के दौरान रेंडर करने में ब्रेक है, जब प्रत्येक, यहां तक कि एक छोटी सी शिफ्ट, सभी ट्रैक्स के पूर्ण पुनर्विकास का कारण बनता है। इस समस्या को हल करने के लिए, एक ओवरले के बजाय, हम टाइल्स के साथ अपने कस्टम मानचित्र प्रकार का उपयोग करेंगे। एक टाइल एक वर्ग है जिसमें 256 पिक्सेल होते हैं। जब मैप शिफ्ट होता है, तो गूगल मैप्स इंजन खुद नए स्क्वेयर को पूरा करता है और पुराने को हटा देता है। हम सभी के लिए आवश्यक है कि एक ऐसी विधि लिखी जाए जिसे नया वर्ग बनाते समय बुलाया जाए:

टिप्पणियों के साथ कोड

 var CanvasTileMapType = function() { } //    CanvasTileMapType.prototype.tileSize = new google.maps.Size(256,256); // ,       //  coord = {x:..,y:..} -     x  y       //  ,          {x: coord.x*256, y: coord.y*256} // ,      {x: coord.x*256/(1<<zoom), y: coord.y*256/(1<<zoom)}. CanvasTileMapType.prototype.getTile = function(coord,zoom,ownerDocument) { var tile = { coord: coord, zoom: zoom, size: this.tileSize.width, }; tile.canvas = ownerDocument.createElement("canvas"); tile.canvas.width = tile.size; tile.canvas.height = tile.size; tile.canvas.tile = tile; return tile.canvas; } var map = new google.maps.Map(...); //   --     google maps var canvasTileMapType = new CanvasTileMapType; map.overlayMapTypes.push(canvasTileMapType);

हम इस परत पर पटरियों के स्थिर टुकड़े खींचेंगे, और साथ ही हम ट्रैक को सेगमेंट के सेट के रूप में मानते हैं। दो विकल्प संभव हैं:

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

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

निष्कर्ष

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

गूगल मैप्स पर फास्ट ट्रैक

परीक्षण आवेदन

देशी इंजन

पाचन: मजाक पहेली

अद्भुत इंजन

असफल अनुकूलन

कैनवस इंजन

आइकन कैशिंग

पटरियों

मुख्य विशेषता

Simplify.js

टाइल्स ट्रैक

निष्कर्ष

More articles: