📸 🕴🏽 🚭 गूगल मैप्स क्लस्टरिंग 🍨 😒 👩🏼‍🔬

यदि आप Google मानचित्र का उपयोग करके एप्लिकेशन विकसित कर रहे हैं, तो आप बाईं ओर चित्र में दिखाए गए स्थिति का अच्छी तरह से सामना कर सकते हैं। और, अगर आपको लगता है कि दाईं ओर की तस्वीर बेहतर दिखती है, तो यहां आप हैं।

इसलिए, बड़ी संख्या में मार्करों के साथ काम करते समय क्या समस्याएं आती हैं:

मार्करों की संख्या> 5000-10000 के साथ, कार्ड गंभीर रूप से टूटना शुरू कर देता है।
कार्ड की उपस्थिति, मार्करों से भरा, आंख को बिल्कुल भी खुश नहीं करता है।

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

मानचित्रों के साथ काम करने के लिए मानक पुस्तकालय के अलावा, Google Google मैप्स एंड्रॉइड मार्कर क्लस्टरिंग उपयोगिता की एक अद्भुत लाइब्रेरी प्रदान करता है। यह लाइब्रेरी अलग से उपलब्ध है और आपको मार्करों की रचना करने की अनुमति देती है।

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

दस्तावेज़ीकरण पढ़ने की किसे परवाह है

developers.google.com/maps/articles/toomanymarkers?hl=ru

developers.google.com/maps/documentation/android/utility/marker-clustering

github.com/googlemaps/android-maps-utils

कार्य

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

चरण 1. तैयारी

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

public abstract class AbstractMarker implements ClusterItem { protected double latitude; protected double longitude; protected MarkerOptions marker; @Override public LatLng getPosition() { return new LatLng(latitude, longitude); } protected AbstractMarker(double latitude, double longitude) { setLatitude(latitude); setLongitude(longitude); } @Override public abstract String toString(); public abstract MarkerOptions getMarker() { return marker; } public void setMarker(MarkerOptions marker) { this.marker = marker; } //others getters & setters }

अगला पॉइंट-ऑफ-सेल और ट्रक मार्करों के लिए इतना महत्वपूर्ण वर्ग कोड नहीं है, लेकिन अचानक किसी को दिलचस्पी है।

TradeMarker, TruckMarker

 public class TradeMarker extends AbstractMarker { private static BitmapDescriptor shopIcon = null; private String description; public TradeMarker(String description, double latitude, double longitude) { super(latitude, longitude); setDescription(description); setBitmapDescriptor(); setMarker(new MarkerOptions() .position(new LatLng(getLatitude(), getLongitude())) .title("") .icon(shopIcon)); } public static void setBitmapDescriptor() { if (shopIcon == null) shopIcon = BitmapDescriptorFactory. fromResource(R.drawable.trademarker); } public String toString() { return "Trade place: " + getDescription(); } public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } }

 public class TruckMarker extends AbstractMarker { private String name; private String aim; public TruckMarker(String name, String aim, double latitude, double longitude, BitmapDescriptor photo) { super(latitude, longitude); setName(name); setAim(aim); setMarker(new MarkerOptions() .position(new LatLng(getLatitude(), getLongitude())) .title("") .icon(photo)); } public String toString() { return "Name: " + getName() + "\n" + "Aim: " + getAim(); } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getAim() { return aim; } public void setAim(String aim) { this.aim = aim; } }

चरण 2. सबसे सरल क्लस्टरिंग

खैर, तैयारी पूरी हो गई है, अब क्लस्टरिंग को कॉन्फ़िगर करने का समय है। यहां सबसे महत्वपूर्ण है ClusterManager वर्ग, जो आपको लचीले ढंग से क्लस्टरिंग को कॉन्फ़िगर करने की अनुमति देता है। ClusterManager वर्ग को सामान्यीकृत किया जाता है, एक पैरामीटर के रूप में इसे एक वर्ग पास किया जाता है जो ClusterItem इंटरफ़ेस को लागू करता है। प्रारंभ के दौरान मापदंडों के रूप में, यह एप्लिकेशन संदर्भ और GoogleMap ऑब्जेक्ट प्राप्त करता है।

तो हमारे कोड के लिए, यह कुछ इस तरह दिखाई देगा:

 private ClusterManager<AbstractMarker> clusterManager; //... clusterManager = new ClusterManager<AbstractMarker>(this.getApplicationContext(), getMap());

और अब यह केवल क्लस्टर ऑब्जेक्ट Manager.addItem (AbstractMarker मार्कर) विधि का उपयोग करके मार्कर को जोड़ने के लिए बनी हुई है ; ।

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

 map.setOnCameraChangeListener(clusterManager);

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

चरण 3. एल्गोरिदम

क्लस्टरिंग एल्गोरिदम पर विचार करें। विभिन्न एल्गोरिदम हैं, 2 मुख्य को प्रतिष्ठित किया जा सकता है:

ग्रिड-आधारित क्लस्टरिंग - नक्शे के दृश्य क्षेत्र को वर्गों में विभाजित किया गया है, एक क्लस्टर को वर्ग के केंद्र में रखा गया है।

आइटम हटाने का समर्थन करता है।
यह काफी तेजी से काम करता है।
यह बहुत अच्छा नहीं लगता है, लेकिन यदि मार्कर समान रूप से वितरित किए जाते हैं, तो इस एल्गोरिथ्म में कुछ भी गलत नहीं है।

दूरी-आधारित क्लस्टरिंग डिफ़ॉल्ट एल्गोरिथ्म है। मार्करों के उच्चतम एकाग्रता के केंद्रों की गणना के आधार पर; समूहों में निश्चित सीमाएँ नहीं होती हैं।

आइटम हटाने का समर्थन नहीं करता है।
यह धीमी गति से काम करता है (अधिक जटिल गणना)।
खूबसूरती से मानचित्र पर स्थिति के अनुसार मार्करों को रखता है।

मुझे उम्मीद है कि प्रलेखन से ली गई तस्वीरों के लिए Google मुझ पर अपराध नहीं करेगा।

यह संभावना नहीं है कि अपने स्वयं के एल्गोरिदम को लिखने के लिए एक महत्वपूर्ण आवश्यकता होगी, लेकिन अगर आप वास्तव में चाहते हैं, तो आपको एल्गोरिथ्म इंटरफ़ेस को लागू करना होगा।

चरण 4. क्लस्टर मैनजर ऑब्जेक्ट के गुणों को बदलना

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

 public class OwnIconRendered extends DefaultClusterRenderer<AbstractMarker> { public OwnIconRendered(Context context, GoogleMap map, ClusterManager<AbstractMarker> clusterManager) { super(context, map, clusterManager); } @Override protected void onBeforeClusterItemRendered(AbstractMarker item, MarkerOptions markerOptions) { markerOptions.icon(item.getMarker().getIcon()); } }

और इस वर्ग को हमारे क्लस्टर मैनेजर को असाइन करें:

 clusterManager.setRenderer(new OwnIconRendered( getApplicationContext(), getMap(), clusterManager));

मुझे केवल मार्करों के आइकन को बदलने की आवश्यकता है, इसलिए मैंने केवल onBeforeClusterItemRendered विधि को फिर से परिभाषित किया है, जो आपको मानचित्र पर प्रदर्शित करने से पहले क्लस्टर तत्वों को कॉन्फ़िगर करने की अनुमति देता है। लेकिन ओवरराइड करने के तरीकों की पसंद काफी बड़ी है:

एक अलग तथ्य के रूप में, क्लस्टरिंग प्रक्रिया में, मार्करमैन क्लास एक महत्वपूर्ण भूमिका निभाता है, जो अनिवार्य रूप से मार्करों और क्लस्टर के संग्रह के साथ काम करने के लिए एक इंटरफ़ेस प्रदान करता है।

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

सबसे पहले, हमें चयनित मार्कर और क्लस्टर की वस्तुओं की आवश्यकता है:

 private AbstractMarker chosenMarker; private Cluster<AbstractMarker> chosenCluster;

आपको श्रोताओं को क्लस्टरमैन से जोड़ना होगा:

 clusterManager.setOnClusterItemClickListener(new ClusterManager.OnClusterItemClickListener<AbstractMarker>() { @Override public boolean onClusterItemClick(AbstractMarker item) { chosenMarker = item; return false; } }); clusterManager.setOnClusterClickListener(new ClusterManager.OnClusterClickListener<AbstractMarker>() { @Override public boolean onClusterClick(Cluster<AbstractMarker> cluster) { chosenCluster = cluster; return false; } });

आपको OnMarkerClickListener ईवेंट के लिए क्लस्टरमैन को भी श्रोता बनाना होगा:

 map.setOnMarkerClickListener(clusterManager);

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

 clusterManager.getMarkerCollection().setOnInfoWindowAdapter(new MarkerInfoWindowAdapter()); clusterManager.getClusterMarkerCollection().setOnInfoWindowAdapter(new ClusterInfoWindow()); map.setInfoWindowAdapter(clusterManager.getMarkerManager());

उदाहरण के लिए, ClusterInfoWindow वर्ग कैसा दिख सकता है:

 private class ClusterInfoWindow implements InfoWindowAdapter { @Override public View getInfoContents(Marker arg0) { return null; } @Override public View getInfoWindow(Marker marker) { if (chosenCluster != null) { View v = getLayoutInflater().inflate(R.layout.cluster_window, null); TextView info = (TextView) v.findViewById(R.id.clusterTitle); int[] markerTypesCount = new int[2]; Arrays.fill(markerTypesCount, 0); for (AbstractMarker abstractMarker : chosenCluster.getItems()) { if (abstractMarker instanceof TradeMarker) markerTypesCount[0] += 1; else if (abstractMarker instanceof TruckMarker) markerTypesCount[1] += 1; } info.setText("Trade places: " + markerTypesCount[0] + "\n" + "Truck: " + markerTypesCount[1] + "\n"); return v; } return null; } }

इस प्रकार, हमने एक सुंदर और काफी कार्यात्मक नक्शा बनाया।

मुझे उम्मीद है कि यह लेख आपके लिए उपयोगी रहा होगा। यह केवल पुस्तकालय और व्यक्तिगत अनुसंधान का अध्ययन करने का परिणाम है, इसलिए मैं संसाधनों के लिंक नहीं छोड़ूंगा। अंत तक पढ़ने के लिए धन्यवाद!

PS स्लैक में Android डेवलपर्स के दुनिया के सबसे बड़े समुदाय में शामिल हों।

गूगल मैप्स क्लस्टरिंग

कार्य

चरण 1. तैयारी

चरण 2. सबसे सरल क्लस्टरिंग

चरण 3. एल्गोरिदम

चरण 4. क्लस्टर मैनजर ऑब्जेक्ट के गुणों को बदलना

More articles: