क्लाइंट पर क्लस्टरिंग या मानचित्र पर 10,000 अंक कैसे दिखाएं

कई तरह के प्रोजेक्ट हैं
जिसके लिए जियोइंफॉर्मेशन आउटपुट है
आवश्यक: अचल संपत्ति साइटों, कंपनी निर्देशिका,
आकर्षण, संदेश बोर्ड और अन्य की सूची।
इन साइटों के लिए, मैंने goolge API 3 और Yandex API 2 के लिए एक प्लगइन विकसित करने का निर्णय लिया।

बुनियादी आवश्यकताएं:

1. सर्वर पर गहरी डेटा तैयारी के बिना कनेक्ट करने की क्षमता, अर्थात्, केवल वस्तुओं के मौजूदा भौगोलिक निर्देशांक का उपयोग करके।
2. डेटा तैयार करने और प्रसारित करने के लिए एक सरल प्रोटोकॉल।
3. दो प्रकार के लेबल के साथ फास्ट क्लाइंट क्लस्टरिंग: क्लस्टर और समूह। क्लस्टर - पास में स्थित कई वस्तुएं। जब क्लिक किया जाता है, तो क्लस्टर "खुलता है", अर्थात यह ज़ूम बढ़ाता है जबकि ऑब्जेक्ट क्लस्टरिंग दूरी से अधिक दूरी पर होते हैं। समूह - एक बिंदु पर (न्यूनतम दूरी पर) कई वस्तुएं। जब आप किसी भी ज़ूम पर एक समूह पर क्लिक करते हैं, तो समूह में वस्तुओं की एक सूची प्रदर्शित होती है।
4. क्लस्टरिंग का उपयोग करके 10,000 अंक तक प्रदर्शित करें।
5. मोबाइल उपकरणों (पहली पीढ़ी के iPad) पर ie7 में प्रदर्शित करें।
6. एक समूह क्लस्टर और स्वयं ऑब्जेक्ट - दो जानकारी विंडो के क्लाइंट पर टेम्पलेट।
7. लेबल के लिए स्प्राइट का उपयोग करना।
8. विभिन्न प्रकार की वस्तुओं के लिए असीमित संख्या में लेबल (आइकन) का उपयोग करने की क्षमता।
9. विभिन्न ज़ूम रेंज के लिए कई आइकन आकारों का उपयोग करने की क्षमता।

लेख में मैं इस प्लगइन को लागू करने के लिए उपयोग किए जाने वाले कई तरीकों का वर्णन करूंगा।

कई उपकरणों पर कार्यों के संचालन समय का मापन किया गया। सुविधा के लिए, मैं उनमें से 2 अंशों में लिखूंगा - Google Chrome 19.0 @ AMD Athlon 64 X2 Dual Core 5600+ 2.8 GHz RAM 2Gb विंडोज -7 32bit औसत और सफारी के रूप में @ Apple iPad 16GB 1.0 GHz iOS 5.1.1 सबसे धीमा और मूडी है। ।

सर्वर साइड

सर्वर भाग में दो अनुरोध होते हैं:

1. कार्ड डेटा के लिए अनुरोध।

लेबल के चयन के लिए मापदंडों के साथ इस अनुरोध के लिए एक लिंक भेजा जाता है। उदाहरण के लिए, शहर = 1 और कमरे = 1,2। यही है, हम केवल 1 और 2-बेडरूम अपार्टमेंट (एक अचल संपत्ति साइट के लिए एक उदाहरण) के साथ शहर आईडी = 1 का चयन करते हैं।
जवाब में, मानचित्र के जोंस मापदंडों के साथ एक स्क्रिप्ट (जैसे कि नक्शा, नक्शा और नक्शा के ज़ूम, आइकन पैरामीटर, क्लस्टरिंग दूरी, स्प्राइट, आदि) और सभी बिंदुओं के बारे में डेटा के साथ जौन वापस आ जाता है। इन बिंदुओं में शामिल हैं: ऑब्जेक्ट आईडी, भू-निर्देशांक, आइकन प्रकार और टूलटिप लाइन। एक असम्पीडित स्थिति में 10,000 अंकों के लिए, प्रतिक्रिया आकार 1.2 एमबी है, लेकिन गज़िप संपीड़न के साथ यह केवल 350 KB है।
बार-बार अनुरोधों को अच्छी तरह से nginx द्वारा कैश किया जाता है।

2. किसी वस्तु के लिए अनुरोध।

जब आप एकल मार्कर पर क्लिक करते हैं, तो एक जानकारी विंडो ऑब्जेक्ट के बारे में डेटा के साथ पॉप अप होती है। अजाक्स अनुरोध में ऑब्जेक्ट की आईडी शामिल है। प्रतिक्रिया जोसन है। Json फ़ील्ड्स के नाम जानकारी विंडो टेम्पलेट में टैग से मेल खाना चाहिए, बाद वाले को प्राप्त सामग्री से बदल दिया जाता है।

ग्राहक भाग

पार्सिंग पॉइंट डेटा

प्राप्त डेटा को निम्नानुसार संसाधित किया जाता है:
1. शून्य ज़ूम पर वैश्विक पिक्सेल निर्देशांक की गणना प्रत्येक बिंदु के लिए की जाती है।
2. वैश्विक निर्देशांक के आधार पर, 14 वें ज़ूम पर टाइल आईडी की गणना की जाती है, और अंक को संबंधित टाइल आईडी के साथ एक सरणी में रखा जाता है। भविष्य में, किसी भी ज़ूम पर, आप आवश्यक टाइलों की आईडी की आसानी से गणना कर सकते हैं और उनके लिए सभी बिंदुओं का चयन कर सकते हैं। प्वाइंट सैंपलिंग की गति - 10,000 अंकों के लिए 100 / 350ms से अधिक नहीं।

पारसिंग टाइम 10000 अंक - 100/650 एमएस

clusterer

मैंने कई क्लस्टर का परीक्षण किया है, जिसमें यैंडेक्स एपीआई 2 के मूल क्लस्टर शामिल हैं। उनमें से कोई भी मुझे कई कारणों से अनुकूल नहीं बनाता है। सबसे पहले, सभी में केवल एक समूह है, कोई समूह नहीं है। क्लस्टर पर क्लिक करने के बाद, ज़ूम अधिकतम तक बढ़ जाएगा, लेकिन सूची दिखाई नहीं देगी। सूची प्राप्त करने के लिए आपको फिर से क्लिक करना होगा। इस तरह से यैंडेक्स से क्लस्टर को व्यवस्थित किया जाता है। MarkerClusterer forGoogle Maps v3 में भी इस प्रकार का मार्कर नहीं है।
दूसरे, क्लस्टर्स की गणना ग्रिड द्वारा की जाती है, जो कि तेज़, लेकिन बड़ी संख्या में लेबल वाले क्लस्टर "ग्रिड पर" स्थित हैं, और यह बदसूरत दिखता है।
नतीजतन, हमारी अपनी क्लस्टरिंग क्लस्टरिंग लिखी गई थी। इसमें, क्लस्टरिंग विधि अतुल्यकालिक-संकर है: जब एक टाइल के लिए डेटा का अनुरोध किया जाता है, तो निम्न होता है:
- टाइल को 4 उप-टाइलों (ग्रिड) में विभाजित किया गया है और प्रत्येक उप-टाइल को दूरी से क्लस्टर किया गया है, लेकिन क्लस्टर स्वयं सेल के बीच में स्थित नहीं है, लेकिन "ध्वस्त" बिंदुओं के क्षेत्र के केंद्र में है।
- प्राप्त अंक और क्लस्टर वापस टाइल में एकत्र किए जाते हैं, और फिर से क्लस्टर किए जाते हैं। इस बिंदु पर, पहले से ही कुछ बिंदु हैं।
- प्राप्त अंक पड़ोसी टाइलों को ध्यान में रखते हुए "थिन आउट" हो जाते हैं (यदि वे पहले से ही क्लस्टर हो चुके हैं)। यही है, अगर सीमा पर सीमा टाइल में एक क्लस्टर या मार्कर है जो हमारे शीर्षक पर मार्कर को ओवरलैप करता है, तो इन मार्करों को एक क्लस्टर में जोड़ा जाता है। इसके द्वारा हम टाइल्स की सीमाओं पर मार्करों के "चिपके" की अनुपस्थिति को प्राप्त करते हैं।
क्लस्टरिंग गति काफी अधिक हो गई: 10,000 में से हमें 60 / 500ms में 580 अंक मिलते हैं। यह काफी स्वीकार्य है।

मार्कर प्रतीक

मैं माउस को प्रदर्शित करने के लिए स्प्राइट का उपयोग करता हूं। आइकन के प्रकारों की संख्या सीमित नहीं है। उदाहरण एकल मार्कर + क्लस्टर और समूह आइकन के लिए 7 प्रकार के आइकन का उपयोग करते हैं। दो संस्करणों के उदाहरण 2 में प्रत्येक प्रकार का आइकन 14 से अधिक के ज़ूम के लिए बड़ा है और 14. से कम के लिए छोटा है। चूंकि क्लस्टरिंग दूरी 17 पिक्सेल है, इसलिए छोटे आइकन छोटे तराजू के लिए सुंदर लगते हैं।

जानकारी विंडो टेम्पलेट

मार्कर पर क्लिक करने से होता है:
1. यदि मार्कर एक क्लस्टर है - क्लस्टर "प्रकटीकरण" पर ज़ूम किया गया है।


2. यदि मार्कर एक समूह है, तो इस समूह की वस्तुओं की एक सूची प्रदर्शित की जाती है:

3. एक एकल मार्कर डेटा लोड करता है और एक सूचना विंडो प्रदर्शित करता है

मार्कर उत्पादन।

मार्करों को प्रदर्शित करने के लिए, मैंने Google API 3 और Yandex API 2 का उपयोग किया।
एक मॉडल लिखा गया था जिसमें मैं डेटा, क्लस्टर टाइल्स और ड्रॉ कैनवस को संग्रहीत करता हूं और संसाधित करता हूं, साथ ही कई नियंत्रक जो आवश्यक एपीआई और डिस्प्लेडर्स लोड करते हैं।

Google API 3 - देशी नियंत्रक

नियंत्रक मूल Google Api 3 सुविधाओं और क्लस्टरिंग क्लस्टरिंग का उपयोग करता है।
Google API 3 जल्दी से लोड होता है, यदि संभव हो तो कैनवास का उपयोग करता है, टैग के लिए स्प्राइट का समर्थन करता है।
उदाहरण
गौरव
कोड की छोटी राशि
ऑटो कैनवस पर स्विच करें
स्प्रिट का सहारा लें
कमियों
ज़ूम बदलने पर धीमी और अनाड़ी प्रतिपादन
यानी, प्रत्येक मार्कर के लिए 4 ऑब्जेक्ट बनाए जाते हैं, ज़ूम इन 10-12 यानी, यह DOM को क्रैश करता है

10,000 अंक और क्लस्टरिंग के साथ कार्ड आउटपुट स्पीड 10 ज़ूम

Google API 3 - कैनवास नियंत्रक

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

10,000 अंक और क्लस्टरिंग के साथ कार्ड आउटपुट स्पीड 10 ज़ूम

Google API 3 - फुलकेनवास कंट्रोलर

नियंत्रक मानचित्र के पूरे दृश्य भाग को प्रस्तुत करने के लिए कैनवास का उपयोग करता है।
क्लस्टर करना क्लस्टर।
एक कैनवास कैनवास का उपयोग मानचित्र के दृश्य भाग के आकार को फिट करने के लिए किया जाता है और प्रत्येक आंदोलन के साथ खींचा जाता है।
उदाहरण
गौरव
डोम वस्तुओं की सबसे छोटी संख्या
देशी नियंत्रक की तुलना में उच्चतम प्रतिपादन गति 100% तक होती है
स्प्रिट का सहारा लें
FlashCanvas यानी 6> के लिए समर्थन
ज़ूम बदलते समय सुंदर एनीमेशन
कमियों
यानी केवल 100% पेज स्केल (बग) पर काम करता है

10,000 अंक और क्लस्टरिंग के साथ कार्ड आउटपुट स्पीड 10 ज़ूम

यैंडेक्स एपीआई 2 - देशी नियंत्रक "बॉक्स से बाहर"

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

10,000 अंक और क्लस्टरिंग के साथ कार्ड आउटपुट स्पीड 10 ज़ूम

यैंडेक्स एपीआई 2 - देशी नियंत्रक

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

10,000 अंक और क्लस्टरिंग के साथ कार्ड आउटपुट स्पीड 10 ज़ूम

यैंडेक्स एपीआई 2 - कैनवास नियंत्रक

नियंत्रक प्रत्येक टाइल को रेंडर करने और क्लस्टरिंग क्लस्टर करने के लिए कैनवास का उपयोग करता है।
Google कैनवास के समान रेंडर का उपयोग करता है। Googe API के विपरीत, जहाँ ज़ूम बदलते समय आसानी से एनिमेटेड कैनवस हो जाता है, मैं इसे Yandex API 2 से प्राप्त नहीं कर सका, हालाँकि अब पहले से ही मुझे पता है कि इसे कैसे करना है (बैसाखी के साथ)।
उदाहरण
गौरव
डोम वस्तुओं की एक छोटी संख्या
उच्च गति प्रतिपादन
स्प्रिट का सहारा लें
चिकनी चलती प्रभाव
कमियों
ज़ूम बदलते समय "दलिया"
में समर्थित नहीं है

10,000 अंक और क्लस्टरिंग के साथ कार्ड आउटपुट स्पीड 10 ज़ूम

यांडेक्स एपीआई 2 - फुलकेनवास नियंत्रक

नियंत्रक मानचित्र के पूरे दृश्य भाग को प्रस्तुत करने के लिए कैनवास का उपयोग करता है।
हर बार मैप को स्थानांतरित करने के बाद रेंडरिंग किया जाता है और ज़ूम को बदल दिया जाता है।
क्लस्टर करना क्लस्टर।
Google फुलकानवास कंट्रोलर के विपरीत, कैनवास देखने के क्षेत्र की तुलना में व्यापक और ऊंचा है। इसलिए, नक्शे को हिलाने से चिकना हो जाता है। ज़ूम बदलने पर एनीमेशन को स्वतंत्र रूप से लिखा जाना था।
उदाहरण
गौरव

डोम वस्तुओं की सबसे छोटी संख्या
उच्चतम रेंडरिंग गति
स्प्रिट का सहारा लें
FlashCanvas यानी 6> के लिए समर्थन
ज़ूम बदलते समय सुंदर एनीमेशन
कमियों
यानी केवल 100% पेज स्केल (बग) पर काम करता है

10,000 अंक और क्लस्टरिंग के साथ कार्ड आउटपुट स्पीड 10 ज़ूम


आप यहां मौजूदा उदाहरण देख सकते हैं ।

निष्कर्ष।

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