OpenLayers / पत्रक में एनिमेटेड क्लस्टर मार्कर कैसे बनाएँ?


19

मैं उन चिकनी बदलावों के कारण USC का उपयोग करना चाहता हूं जो कि Openlayers को लगता है कि वे मेल नहीं खा सकते हैं। मुझे विशेष रूप से कस्टम स्टाइल मार्कर समूहों के साथ क्लस्टर मार्कर की क्षमता की आवश्यकता है।

सबसे अच्छा उदाहरण जो दर्शाता है कि मैं जो हासिल करने की कोशिश कर रहा हूं वह रेडफिन में पाया जा सकता है ।

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

मैं वास्तव में इन समान प्रभावों को एकीकृत करना पसंद करूंगा और सबसे अच्छे दृष्टिकोण या अन्य उदाहरणों पर कुछ मार्गदर्शन की सराहना करूंगा जिनके बारे में आप जानते होंगे।

नोट: Redfin फ़्लैश का उपयोग करता हुआ प्रतीत होता है जिसे मैं दूर रहना चाहता हूँ। एक आदर्श स्थिति में मैं इसे यदि संभव हो तो जावास्क्रिप्ट के माध्यम से प्राप्त करना चाहता हूं, लेकिन लगता है कि इसे शायद एचटीएमएल 5 / कैनवास के माध्यम से किया जाना चाहिए।

शायद पी का उपयोग। - राफेल। Js या d3.js

कोई विचार?

BTW - यह उदाहरण मिला लेकिन यह विशेष रूप से Google मानचित्र पर लागू होता है।


मुझे नहीं लगता कि Redfin फ़्लैश का उपयोग कर रहा है। ऐसा लगता है कि यह dojo टूलकिट ( dojotoolkit.org ) का उपयोग करके सभी जावास्क्रिप्ट है । मैं किसी भी अन्य मानचित्रण पुस्तकालयों को हाजिर नहीं करता था - वे उनका उपयोग भी कर सकते थे।
djq

मैं वर्तमान में एक पत्रक क्लस्टरिंग परत विकसित कर रहा हूं - github.com/cavis/leafpile यह अभी तक वास्तव में फैंसी कुछ भी नहीं करता है, लेकिन मैं अनुकूलन मार्कर छवियों और ज़ूम-संक्रमण रणनीतियों जैसी चीजों को जोड़ने की योजना बना रहा हूं। समस्या ट्रैकर में एन्हांसमेंट अनुरोध जोड़ने के लिए स्वतंत्र महसूस करें।
कैविस

जवाबों:


22

यदि आप रेडफिन जैसा क्लस्टर चाहते हैं, तो मेरी USC.markercluster देखें: https://github.com/Leaflet/Leaflet.markercluster/blob/master/example/marker-clustering-realworld.388.html

https://github.com/danzel/Leaflet.markercluster

यह पूरी तरह से एनिमेटेड आदि है :)


3
युप - सबसे अच्छा और मुझे डेव का स्वागत करने वाला पहला व्यक्ति होने दें और मुझे आपकी मदद के लिए अपनी बातों को बढ़ाने दें।
NetConstructor.com 13:27 पर 13:27

1
बड़िया! +1
unicoletti

6

OpenLayers की एक क्लस्टर रणनीति भी है। आपको केवल वेक्टर लेयर में रणनीति के रूप में निर्दिष्ट करना है।

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

रेडफिन वास्तव में फैशन का नमूना है। आशा है कि मेरे पास OL के साथ कुछ परीक्षण करने का समय है :)


मैं OpenLayers का उपयोग करना चाहूंगा, लेकिन मुझे पत्रक में पाए जाने वाले चिकनी संक्रमण की आवश्यकता है। क्या आप ऐसे किसी भी ओपनर हैक के बारे में जानते हैं जो इन स्लिक ज़ूम एनिमेशन की नकल करता है?
NetConstructor.com

माफ़ी पर नहीं। अभी मैं थोड़ा सा "डॉट्स" स्टाइल में कुछ टेस्टिंग कर रहा हूं और सर्कल में कुछ रंग और गिनती संख्या जोड़ रहा हूं। लेकिन एनीमेशन जोड़ना फिलहाल दूर है।
18

क्या आपने कभी नई ol3 क्षमताओं के साथ इसका समाधान खोजा?
NetConstructor.com

3

मेरे पास इसे देखने के लिए अधिक समय नहीं है, लेकिन CloudMade (USC के निर्माताओं) के पास कुछ मार्कर क्लस्टरिंग क्षमताएं हैं। उन्हें कैसे एनिमेटेड और चिकना बनाया जाए, इस बारे में निश्चित नहीं है, लेकिन यह एक शुरुआत है।

http://developers.cloudmade.com/projects/web-maps-api/examples/marker-clustering


3

CAT उपयोगकर्ताओं के लिए।

यहाँ पत्रक के लिए Google मानचित्र MarkerClusterer का एक बंदरगाह है

https://github.com/ideak/leafclusterer


हाँ, मेरे पास यह बुकमार्क है लेकिन मुझे अभी भी एनीमेशन भाग की आवश्यकता है
NetConstructor.com

3

मैंने अभी-अभी OpenLayers के लिए एक AnimatedCluster रणनीति लागू की है। आप इसके बारे में थोड़ा और देख सकते हैं: http://www.acuriousanimal.com/2012/08/19/animated-marker-cluster-strategy-for-openlayers.html

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


इस के साथ बहुत अच्छा काम!
NetConstructor.com

1

क्या आपने पॉलिमैप उदाहरण पर ध्यान दिया है जो क्लस्टर अंक देता है?

यहाँ वृत्त वैक्टर हैं जिन्हें सीएसएस का उपयोग करके संशोधित किया जा सकता है।


धन्यवाद, लेकिन मैं विशेष रूप से किसी भी प्रकार के समाधान (अधिमानतः क्रॉस-ब्राउज़र समर्थित) की तलाश कर रहा हूं जो मार्करों के एनीमेशन के लिए अनुमति देगा। मुझे यकीन नहीं है कि यदि आपके पास Redfin से लिंक उदाहरण ( redfin.com/… ) की जांच करने का अवसर था । यह लिंक वह है जो मैं प्राप्त करना चाहता हूं - स्लिक मार्कर एनीमेशन का प्रतिनिधित्व करता है जो आपके द्वारा क्लर्क किए गए मार्कर / क्षेत्रों में / पर / ज़ूम इन करने के लिए गहरा है।
NetConstructor.com
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.