🍕 👨🏽‍🚒 📎 Yandex.Maps API को बदलते हैं। हमें क्‍लाइज़र में पिछड़ी अनुकूलता को तोड़ने की आवश्‍यकता क्‍यों थी ✍🏼 👣 ⚗️

मैं यैंडेक्स में काम करता हूं, यैंडेक्स के पास नक्शे हैं, और नक्शे में एक एपीआई है। एपीआई एक ऐसी चीज है जो आपको अपनी वेबसाइट पर यांडेक्स के नक्शे को एम्बेड करने की अनुमति देती है। संस्करण 2.0 के बाद से, हमारा एपीआई क्लाइंट पर लेबल को क्लस्टर कर सकता है। यहां क्लस्टरिंग से पहले और बाद के लेबल दिए गए हैं:

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

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

लेख की सामग्री:

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

एसिंक्रोनस टैगिंग रद्द करें।

संस्करण 2.0 में, भू वस्तुओं का निर्माण किया गया था, नक्शे में जोड़ा गया, और तुरंत एक धारा में प्रदान किया गया। ब्राउज़र जितना कमजोर होता है, उतनी अधिक ऑब्जेक्ट्स को मैप में जोड़ा जाता है, उतना ही संदेश को देखने की संभावना अधिक होती है।

हमारे डेवलपर एंटोन इस स्थिति को वैज्ञानिक शब्द "ज़ालिपोन" कहते हैं।

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

//      . //      , //       ,   //     . cluster.events.add('objectsaddtomap', function () { //       . var geoObjectState = cluster.getObjectState(myGeoObjects[1]); // ,        . if (geoObjectState.isShown) { //     ,      . if (geoObjectState.isClustered) { geoObjectState.cluster.state.set('activeObject', myGeoObjects[1]); geoObjectState.cluster.balloon.open(); } else { //      ,    . myGeoObjects[1].balloon.open(); } } });

मैं यह नहीं कह सकता कि इसके साथ काम करना बहुत सुविधाजनक था। लेकिन यह कुछ भी नहीं से बेहतर असुविधाजनक है - एक लटका हुआ ब्राउज़र कोड की सुंदरता से बेहतर तर्क है।

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

चीजों के सार को बेहतर ढंग से समझने के लिए, आइए इसके निर्माण के लेबल को मानचित्र पर प्रदर्शित होने के तरीके पर देखें। प्रक्रिया को तीन चरणों में विभाजित किया जा सकता है:

एक वर्ग का एक उदाहरण बनाना
किसी आइटम को मैप में जोड़ना
HTML में लेबल लेआउट का प्रतिपादन

पहले बिंदु पर, मुझे लगता है कि किसी स्पष्टीकरण की आवश्यकता नहीं है। यह बहुत स्पष्ट नहीं है कि दो और तीन चरण कैसे भिन्न होते हैं। किसी ऑब्जेक्ट को मैप में जोड़ना वह प्रक्रिया है जिसके द्वारा एक लेबल पैरेंट कलेक्शन से जुड़ा होता है (सबसे अधिक बार map.geoObjects पर)। इस संग्रह से टैग को कुछ विकल्प मिलते हैं, जिसमें मानचित्र प्रक्षेपण भी शामिल है। लेबल ऑब्जेक्ट के बाद पता चलता है कि मानचित्र किस प्रक्षेपण में खींचा गया है, यह विमान पर अपनी ज्यामिति को प्रोजेक्ट कर सकता है (जो यह करता है)। विमान पर निशान के निर्देशांक को प्रोजेक्ट करने के बाद, यह स्पष्ट हो जाता है कि स्क्रीन पर किस पिक्सेल बिंदु पर आपको चिह्न आइकन खींचने की आवश्यकता है। इस बिंदु पर, चरण दो छोर।

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

इसलिए, चूंकि लेबल को अतुल्यकालिक रूप से वैसे भी खींचा जाता है, इसलिए यह संभव हो गया है कि क्लस्टर के तर्क को सरल बनाया जाए और लेबल के विलंबित जोड़ को मानचित्र पर हटाया जाए। क्लस्टर के पास अब synchAdd विकल्प नहीं है और संबंधित ऑब्जेक्ट्सडॉटकॉम इवेंट गायब हो गया है।

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

सार्वजनिक क्लस्टरिंग विधियों को बदलें

संस्करण 2.0 में, क्लस्टर ymaps.Collection ऑब्जेक्ट का वंशज था। उन्होंने कहा कि संग्रह, निकालें, setParent और अन्य आवश्यक तरीकों, साथ ही प्रत्येक, getIterator और अन्य अनावश्यक से विरासत में मिला (मैं समझाता हूं कि ये तरीके अनावश्यक क्यों थे)। ऐसा लगता था कि क्लस्टरलाइज़र अपने लिए एक संग्रह था - आप इसमें ऑब्जेक्ट्स जोड़ सकते हैं और ऑब्जेक्ट्स को वापस हटा सकते हैं। लेकिन क्लीज़र में न केवल कुछ तत्व होते हैं, यह इन तत्वों को मानचित्र पर दिखा भी सकता है और नहीं भी कर सकता है, और यह अतिरिक्त क्लस्टर ऑब्जेक्ट भी बनाता है।

इसलिए, आप प्रत्येक विधि का जो भी कार्यान्वयन करते हैं, वह अभी भी बहुत तार्किक नहीं होगा। या तो आप सभी जोड़ा वस्तुओं पर पुनरावृति करने की जरूरत है। चाहे वस्तुओं और समूहों के माध्यम से चलना आवश्यक हो। लेकिन हर समय क्लस्टर बनाए जा रहे हैं। बोध यह आया है कि क्लस्टरिंग एक संग्रह नहीं है। यह एक संग्रह नहीं है।

अब ऑब्जेक्ट को एक्सेस करने के लिए क्लस्टर के पास सरल और स्पष्ट सार्वजनिक तरीके हैं।

Clusterer.getGeoObjects - क्लस्टर में जोड़े गए तत्वों की एक सरणी देता है
Clusterer.getClusters - वर्तमान में नक्शे में जोड़े गए समूहों की एक सरणी देता है। कृपया ध्यान दें कि ये सभी क्लस्टर नहीं हैं, लेकिन केवल एक निश्चित समय पर दिखाई देते हैं।

हमारे प्रलेखन में इन विधियों के साथ काम करने के उदाहरण देखें।

मानचित्र को टाइलों में विभाजित करने के तरीके को बदलें

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

मानचित्र को वर्ग कोशिकाओं में विभाजित किया गया था। एक सेल में गिरने वाले लेबल ने एक क्लस्टर बनाया। प्रत्येक छोटे नक्शे को खींचने के साथ गणना न करने के लिए, कोशिकाओं को बड़े वर्गों में संयोजित किया गया था, जिसे हमने "क्लस्टर टाइल्स" कहा था। सभी क्लस्टर टाइलों को संसाधित किया गया था, जिसमें मानचित्र का दृश्य क्षेत्र पूरी तरह या आंशिक रूप से गिर गया था।

इस संस्करण में, हमने शब्द "टाइल" की अवधारणा को भ्रमित नहीं करने का फैसला किया। अब क्लस्टर टाइलें नियमित कार्ड टाइलों की तरह ही स्थित होती हैं और इनमें हमेशा 256x256 पिक्सेल का आकार होता है। इसका मतलब है कि एक सीमा है - क्लस्टरिंग सेल का आकार क) 256 से अधिक नहीं होना चाहिए और ख) सेल में क्लस्टरिंग कोशिकाओं की एक पूर्णांक संख्या फिट होनी चाहिए। यही है, क्लस्टरिंग सेल आकार के लिए मान्य मान 2, 4, 8, 16, 32, 64, 128 और 256 हैं।

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

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

क्लस्टरिंग का नाम क्लस्टर क्लस्टर के लिए

मुझे हमेशा यह संदेह था कि कोई भी व्यक्ति (मैं और हमारे दस्तावेज ओलेसा) कोई भी इस रैली को नहीं बता सकता है कि क्लस्टर क्लस्टर से अलग है (यदि आप अंतर को समझते हैं, तो आप एक महान साथी हैं)।

क्लस्टर, ऑब्जेक्ट्स का एक क्लस्टर है, एक संग्रह की तरह कुछ।
क्लस्टर एक क्लस्टर द्वारा उत्पन्न वस्तुओं का एक समूह है। नक्शे पर यह एक लेबल की तरह दिखता है।

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

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

क्लस्टरर.ब्लून और क्लस्टरर.हिंट में परिवर्तन

मैं सुखद भाग के साथ शुरू करूँगा - हमने आखिरकार क्लस्टर लेबल में टूलटिप दिखाने की क्षमता जोड़ी। आप इस कोड के साथ ऐसा कर सकते हैं:

 var clusterer = new ymaps.Clusterer(); clusterer.createCluster = function (center, geoObjects) { //  -     . var clusterPlacemark = ymaps.Clusterer.prototype.createCluster.call(this, center, geoObjects), geoObjectsLength = clusterPlacemark.getGeoObjects().length, hintContent; if (geoObjectsLength < 10) { hintContent = ' '; } else if (geoObjectsLength < 100) { hintContent = '  '; } else { hintContent = ' '; } clusterPlacemark.properties.set('hintContent', hintContent); return clusterPlacemark; };

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

अब सामान्य रूप से संकेत और बालन बदलने के बारे में। संस्करण 2.0 में .balloon साथ काम करने के लिए, प्रत्येक क्लस्टर ने .balloon फ़ील्ड बनाया। एक गुब्बारा खोलना cluster.balloon.open(); तरह दिख रहा था। गुब्बारा cluster.balloon.open(); ।

इस समाधान का नुकसान कोड निष्पादन की कम गति थी। दरअसल, यदि आपके पास 100 क्लस्टर हैं, तो उनमें से प्रत्येक में एक गुब्बारा हो सकता है, जिसका अर्थ है कि प्रत्येक क्लस्टर को क्लस्टर cluster.balloon क्षेत्र में एक cluster.balloon प्रबंधक बनाने और असाइन करने की आवश्यकता है। इसलिए, गति पर काम के हिस्से के रूप में, क्लस्टरिंग के लिए बलून और संकेत के एक प्रबंधक बनाने का निर्णय लिया गया था। अब क्लस्टर पर गुब्बारा इस तरह खोला जा सकता है:

 //     -. clusterer.balloon.open(clusterPlacemark);

बालन खोलने के लिए कोड बदलने के बारे में अधिक जानकारी के लिए, नीचे दी गई सारिणी देखें।

कस्टम क्लस्टर आइकनों को परिभाषित करना - नया क्या है

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

मानक क्लस्टर टैग में 3 प्रकार के चित्र होते हैं - बड़े, मध्यम और छोटे। ये चित्र गोल हैं। यदि आप क्लस्टर लेबल पर माउस को स्थानांतरित करने का प्रयास करते हैं, तो आप देखेंगे कि लेबल का सक्रिय क्षेत्र चित्र के साथ मेल खाता है और एक सर्कल भी है।

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

- एक कस्टम लेबल, लेकिन सर्कल वैसे भी क्लिक करने योग्य था।

हमने इसे ठीक किया और अब आप स्वतंत्र रूप से लेबल के लिए सक्रिय क्षेत्र का आकार निर्धारित कर सकते हैं। आप इसे इस तरह कर सकते हैं (उदाहरण के लिए गोल निशान)।

 clusterer.options.set({ clusterIcons: [ { href: 'images/small.png', size: [20, 20], offset: [-10, -10], shape: new ymaps.shape.Circle(new ymaps.geometry.pixel.Circle([0, 0], 10)) }, { href: 'images/medium.png', size: [30, 30], offset: [-15, -15], shape: new ymaps.shape.Circle(new ymaps.geometry.pixel.Circle([0, 0], 15)) }, { href: 'images/big.png', size: [40, 40], offset: [-20, -20], shape: new ymaps.shape.Circle(new ymaps.geometry.pixel.Circle([0, 0], 20)) } ] });

कोड बहुत सरल नहीं निकला, इसलिए एक वैकल्पिक दृष्टिकोण है - सरल, लेकिन मोटा। यदि आप आइकन का वर्णन करते समय आकार पैरामीटर निर्दिष्ट नहीं करते हैं, तो आइकन के ऊपर आयताकार क्षेत्र सक्रिय हो जाएगा, जो आकार और ऑफसेट मापदंडों के आधार पर बनेगा। यही है, ऐसा कोड भी ठीक काम करेगा, बस आइकन के चारों ओर आयताकार क्षेत्र क्लिक करने योग्य होगा।

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

 clusterer.options.set({ clusterIcons: [ { href: 'images/small.png', size: [20, 20], offset: [-10, -10] }, { href: 'images/medium.png', size: [30, 30], offset: [-15, -15] }, { href: 'images/big.png', size: [40, 40], offset: [-20, -20] } ] });

एक और छोटा सा जोड़। यदि आप क्लस्टर लेबल के अंदर की सामग्रियों को प्रदर्शित नहीं करना चाहते हैं, तो आप क्लस्टरIconContentLayout विकल्प को अशक्त करने के लिए सेट कर सकते हैं और लेबल को बिना clusterer.options.set('clusterIconContentLayout', null); अंदर प्रदर्शित किया जाएगा clusterer.options.set('clusterIconContentLayout', null);

क्लस्टर के लिए पूर्व निर्धारित का मामूली संशोधन

क्लब एपीआई मैप्स "किसी विशेष क्लस्टर के लिए एक शैली कैसे सेट करें" विषय पर सवालों के घेरे में आए। इस सवाल का कोई अच्छा जवाब नहीं था, क्योंकि विकल्प के विवरण में संकेतित कुंजियाँ ।presetStorage ने तभी काम किया जब वे पूरे क्लीज़र में सेट हो गए। लेकिन एकल टैग के लिए, ये चाबियाँ फिट नहीं थीं। इस संस्करण में, चाबियाँ सार्वभौमिक बन गई हैं - वे संपूर्ण क्लस्टरवाइज़र और विशेष रूप से क्लस्टर लेबल के लिए दोनों उपयुक्त हैं।

आप इस तरह होवर पर क्लस्टर का रंग बदल सकते हैं।

 clusterer.events.add('mouseenter', function (e) { var target = e.get('target'); if (typeof target.getGeoObjects == 'function') { target.options.set('preset', 'islands#redClusterIcons'); } }); clusterer.events.add('mouseleave', function (e) { var target = e.get('target'); if (typeof target.getGeoObjects == 'function') { target.options.set('preset', 'islands#blueClusterIcons'); } });

एक क्लस्टर के भीतर क्लस्टर और लेबल के लिए प्रीफ़िक्सिंग विकल्प

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

विशेष रूप से, संस्करण 2.0 में ऐसा करने के लिए संभव था: clusterer.options.set('cursor', 'help'); और कर्सर एकल ऑब्जेक्ट और क्लस्टर लेबल दोनों के लिए बदल गया है।

एक जिज्ञासु पाठक एक स्क्विंट से पूछेगा: "क्या होगा यदि मैं क्लस्टर लेबल और सिंगल लेबल के लिए विभिन्न प्रकार के कर्सर सेट करना चाहता हूं?" हमने इस मामले की कल्पना की और निर्णय लिया कि क्लस्टर लेबल "क्लस्टर" उपसर्ग वाले विकल्पों को भी समझेंगे।

 clusterer.options.set({ //   . ursor: 'pointer', //   -. clusterCursor: 'help' });

इस प्रणाली में सब कुछ ठीक था, जब आप क्लस्टर लेबल को प्रभावित किए बिना केवल एक लेबल को अनुकूलित करना चाहते थे। यदि आप केवल एकल लेबल के विकल्पों को बदलना चाहते थे, तो आपने clusterer.options.set('cursor', 'help'); लिखा clusterer.options.set('cursor', 'help'); और उन्हें बहुत अधिक प्रभाव मिला - एकल ऑब्जेक्ट्स और लेबल क्लस्टर के लिए विकल्प विस्तारित। यही है, यदि आप केवल एकल लेबल को प्रभावित करना चाहते थे, तो आपको वैसे भी एकल ऑब्जेक्ट और क्लस्टर के लिए विकल्प सेट करना था।

संस्करण 2.1 में यह थोड़ा और सुविधाजनक हो गया। अब बाल वस्तुओं के लिए सभी विकल्प उपसर्गों के साथ सेट किए गए हैं। उपसर्ग 'क्लस्टर' के साथ क्लस्टर लेबल के लिए, उपसर्ग 'जियोऑब्जेक्ट' के साथ एकल लेबल के लिए। अब बाल वस्तुओं के विकल्प एक दूसरे से स्वतंत्र हैं। यह पूछें कि आपको कौन सी पसंद है।

 //         . lusterer.options.set('geoObjectCursor', 'help');

परिवर्तनों की सारांश तालिका

यह था	बन गया है
`// 1. c . // , // , // . clusterer.events.add('objectsaddtomap', function () { // . var geoObjectState = clusterer.getObjectState(myGeoObjects[1]); // , . if (geoObjectState.isShown) { // , . if (geoObjectState.isClustered) { geoObjectState.cluster.state.set('activeObject', myGeoObjects[1]); geoObjectState.cluster.balloon.open(); } else { // , . myGeoObjects[1].balloon.open(); } } });`	`// 1. c . // . var geoObjectState = clusterer.getObjectState(myGeoObjects[1]); // , . if (geoObjectState.isShown) { // , . if (geoObjectState.isClustered) { geoObjectState.cluster.state.set('activeObject', myGeoObjects[1]); clusterer.balloon.open(geoObjectState.cluster); } else { // , . myGeoObjects[1].balloon.open(); } }`
`// 2. -. var options = ymaps.option.presetStorage.get('islands#redClusterIcons'); cluster.options.set({ icons: options.clusterIcons, iconContentLayout: options.clusterContentLayout });`	`// 2. -. cluster.options.set('preset', 'islands#redClusterIcons');`
`// 3. - . clusterer.options.set('clusterIconContentLayout', ymaps.templateLayoutFactory.createClass(''));`	`// 3. - . clusterer.options.set('clusterIconContentLayout', null);`
`// 4. . lusterer.options.set({ clusterBalloonLayout: myClusterBalloonLayout, balloonLayout: myPlacemarkBalloonLayout });`	`lusterer.options.set({ clusterBalloonLayout: myClusterBalloonLayout, geoObjectBalloonLayout: myPlacemarkBalloonLayout });`

अन्यथा, सब कुछ अपरिवर्तित रहा। सभी नवाचार प्रलेखन में वर्णित हैं।

संस्करण 2.0.36 और 2.1.4 में क्लस्टर गति की तुलना

एक बार पढ़ने से बेहतर है एक बार पढ़ना और विश्वास न करना। माप कैसे लिया गया? इस तरह के एक मामले को नमूने के रूप में लिया गया था:

 <!doctype html> <html> <head> <title>   </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://api-maps.yandex.ru/2.0.36/?load=package.full &lang=ru-RU&ns=ym" type="text/javascript"></script> <script type="text/javascript"> ym.ready(function() { var map = new ym.Map('map', { center: [55.755381, 37.619044], zoom: 13 }), coords = [], center = [55.755381, 37.619044], placemarks = [], i; for (i = 0; i < 10000; i++) { coords[i] = [ center[0] + 0.5 * Math.random() * Math.random() * Math.random() * (Math.random() < 0.5 ? -1 : 1), center[1] + 0.7 * Math.random() * Math.random() * Math.random() * (Math.random() < 0.5 ? -1 : 1) ]; } var startTime = +new Date(); for (i = 0, l = coords.length; i < l; i++) { placemarks[i] = new ym.GeoObject({ geometry: { type: "Point", coordinates: coords[i] } }); } var clusterer = new ym.Clusterer(); clusterer.add(placemarks); map.geoObjects.add(clusterer); var stopTime = +new Date(); alert(stopTime - startTime); }); </script> </head> <body> <div id="map" style="height: 400px; width: 800px;"></div> </body> </html>

कोड का यह टुकड़ा उन बिंदुओं को प्रभावित नहीं करता है जिनमें पिछड़ी संगतता टूटी हुई है, इसलिए इसे संस्करण 2.0.36 और संस्करण 2.1.4 में बिना किसी बदलाव के चलाया जा सकता है, बस लिंक को एपीआई संस्करण पर स्विच करके। समय को मिलीसेकेंड में मापा गया था।

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

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

निष्कर्ष

हम समझते हैं कि किसी भी डेवलपर के जीवन में संगतता का कोई भी टूटना एक छोटी सी त्रासदी है। लेकिन समय बीत जाता है, चीजें बदल जाती हैं, हम अनुभव प्राप्त करते हैं और उपयोगकर्ताओं से प्रतिक्रिया प्राप्त करते हैं। हम संस्करण 2.0 में कई चीजों को वापस बदलना चाहते थे, लेकिन हम ऐसा नहीं कर सकते थे, क्योंकि हमने कुछ भी नहीं बदलने का वादा किया था।

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

मुझे बताया गया कि लेख का सकारात्मक अंत होना चाहिए, इसलिए मैं आगामी सभी को बधाई देता हूं!

Yandex.Maps API को बदलते हैं। हमें क्‍लाइज़र में पिछड़ी अनुकूलता को तोड़ने की आवश्‍यकता क्‍यों थी