दुबई मॉल एक स्मार्टफोन में, या अपने आवेदन में एक इमारत की एक मंजिल योजना कैसे जोड़ें

पिछले लेख में, मैंने एक नक्शा के साथ मोबाइल एप्लिकेशन बनाने के तरीके के बारे में बात की थी। श्रृंखला की निरंतरता में "घुटने पर" मैं आपके साथ फर्श योजनाओं को लागू करने के लिए उपकरण साझा करूंगा।

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

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

पहला विकल्प। डेटा के साथ तैयार एपीआई

पहला विकल्प जो हम विचार करेंगे, वह 2GIS से तैयार विजेट का उपयोग है। एपीआई विवरण api.2gis.ru पर देखा जा सकता है। यदि आप जिस भवन में रुचि रखते हैं, वह पहले से ही 2 जीआईएस में प्रस्तुत किया जा सकता है, तो यह आपके अनुरूप होगा और भवन में फर्श पहले ही तैयार हो चुके हैं। यही है, डेटा के संदर्भ में, सब कुछ पहले से ही किया गया है। और सबसे महत्वपूर्ण बात, आप ऑनलाइन के लिए तैयार हैं, क्योंकि यह विकल्प विशेष रूप से इंटरनेट के साथ काम करेगा।

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

<WebView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/am_webview" android:layout_marginTop="160dp" /> 

यह कंटेनर है जिसमें हम अपने विजेट को जगह देंगे। हम इसे इस प्रकार शुरू करते हैं:

 webView = findViewById(R.id.am_webview) webView.settings.javaScriptEnabled = true webView.settings.useWideViewPort = true webView.settings.loadWithOverviewMode = true //webView.settings.setSupportZoom(true) //webView.settings.displayZoomControls = true //webView.settings.builtInZoomControls = true webView.loadUrl("file:///android_asset/map_api.html") webView.webViewClient = object : WebViewClient() { override fun onPageFinished(view: WebView, url: String) { super.onPageFinished(view, url) val js = "initMap('13933647002593772');" // The Dubai Mall webView.evaluateJavascript(js, ValueCallback { }) } } 

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

सबसे महत्वपूर्ण बात हमारे विजेट webView.loadUrl ("फ़ाइल: ///android_asset/map_api.html") के साथ HTML लोड हो रहा है और यदि आवश्यक हो, तो घटनाओं की सदस्यता लें। ऊपर के उदाहरण में, मानचित्र लोड करने के बाद, हम map_api.html में परिभाषित initMap पद्धति को कहते हैं, उस इमारत के पहचानकर्ता में गुजरना जिसके लिए हम फर्श दिखाना चाहते हैं।

HTML बहुत सरल कोड है। DG.FloorsWidget.init मेथड को कहा जाता है , जिसमें डेटा को इनिशियलाइज़ करने के लिए json ऑब्जेक्ट पास किया जाता है। कंटेनर के रूप में, उस आईडी को निर्दिष्ट करें जिसके साथ हमने ऊपर HTML मार्कअप में एक div घोषित किया है। चौड़ाई, ऊंचाई समायोजित करें। और initData में हम बिल्डिंग को कॉम्प्लेक्सआईड टैग, और अतिरिक्त विजेट डिस्प्ले पैरामीटर में पास करते हैं, जो एपीआई प्रलेखन में पाया जा सकता है। वैसे, पहचानकर्ता को खोज क्वेरी के जवाब में देखा जा सकता है, जिसे 2 जीआईएस तब भेजता है जब आप उस भवन पर क्लिक करते हैं जिसमें आप 2 जीआईएसवी पर रुचि रखते हैं। मेरे उदाहरण में, मैंने दुबई मॉल का उपयोग किया। लेकिन फर्श के साथ किसी भी अन्य इमारत को इंगित करने के लिए कोई भी परेशान नहीं करता है।

अंतिम स्पर्श। किसी विशिष्ट कंपनी में जाने के लिए, कंपनी पहचानकर्ता को दिखाते हुए, शोफर्म विधि को कॉल करें

 webView.loadUrl("javascript:showFirm('$firmId')") 

यह बहुत आसान है। एक तैयार किए गए कार्यान्वयन का उदाहरण जीथब पर देखा जा सकता है।



इस विकल्प के पेशेवरों:

• फ्लोर प्लान और कंपनी डेटा के साथ तैयार डेटा;
• वेबव्यू पर तैयार हल्के कार्यान्वयन;
• 2GIS के अनुसार तैयार खोज।

विपक्ष:

• इंटरनेट की आवश्यकता;
• HTML और जावास्क्रिप्ट के बुनियादी ज्ञान की आवश्यकता है;
• केवल 2 जीआईएस डेटा और केवल उन्हीं इमारतों में जो पहले से ही फर्श हैं।

दूसरा विकल्प। चित्र के रूप में फ्लोर प्लान

यदि तैयार डेटा और एपीआई वाला विकल्प आपके लिए उपयुक्त नहीं है, तो आप निम्नलिखित का उपयोग कर सकते हैं।

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

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

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

 tileView.setSize(floorWidth, floorHeight) tileView.setShouldRenderWhilePanning(true) tileView.addDetailLevel(1f, "tiles/floors1/1000/%d_%d.jpg") tileView.addDetailLevel(0.500f, "tiles/floors1/500/%d_%d.jpg") tileView.addDetailLevel(0.250f, "tiles/floors1/250/%d_%d.jpg") tileView.addDetailLevel(0.125f, "tiles/floors1/125/%d_%d.jpg") tileView.defineBounds(0.0, 0.0, floorWidth.toDouble(), floorHeight.toDouble()) tileView.setScaleLimits(0f, 5f) tileView.setMinimumScaleMode(ZoomPanLayout.MinimumScaleMode.FIT) 

सब कुछ, प्रदर्शन तैयार है। आप घटनाओं की सदस्यता ले सकते हैं और आवश्यक तर्क जोड़ सकते हैं। उदाहरण के लिए, एक मार्कर इस तरह प्रदर्शित किया जा सकता है:

 tileView.setMarkerAnchorPoints(-0.5f, -0.5f) tileView.addMarker(imageView, x, floorHeight - y, null, null) 

जीथब में एक पूरा उदाहरण उपलब्ध है।



पेशेवरों:

• पूरी तरह से ऑफ़लाइन करने की क्षमता;
• अपेक्षाकृत सरल डेटा तैयारी, चित्र के रूप में फर्श की योजना।

विपक्ष:

• गतिशील स्टाइल की कमी।

तीसरा विकल्प। वेक्टर डेटा

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

यहाँ फ़िजी, 2GIS आंतरिक प्रणाली में एक मंजिल योजना क्या दिखती है:



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

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

यहां पूरा कोड देखें।

फ्लोरडाटा वर्ग में हमारी मंजिलों के लिए परीक्षण जियोडेटा कोड होता है, और फ्लोर्समैनेजर क्लास उन्हें प्रस्तुत करने के लिए डिज़ाइन किया गया है।

कंस्ट्रक्टर में, हम वर्गों और दीवारों के लिए शैलियों को परिभाषित करते हैं:

 styles.put(ObjectType.Floor, org.oscim.layers.vector.geometries.Style.builder() .fillColor(Color.GRAY) .build()); 

और ड्राफ़्लोर विधि में, हम वस्तुओं को मानचित्र पर परतों में जोड़ने का तर्क निर्धारित करते हैं:

 public void drawFloor(int floorId) { hideFloors(); indoorLayer = new CustomVectorLayer(this.map); List<GeoData> geoObjects = this.floorData.getFloorData(floorId); for (GeoData geo: geoObjects) { indoorLayer.add(geo.getGeometry(), styles.get(geo.getObjectType())); } this.map.layers().add(indoorLayer); indoorLayer.update(); } 

यहां सब कुछ प्राथमिक है। एक नई लेयर इनडोरलेयर बनाएं, इसमें आवश्यक शैलियों के साथ पूर्व-तैयार फ़्लोर डेटा जोड़ें और इस लेयर को मैप में जोड़ें ।map.layers () जोड़ें (इनडोरलेयर) ।

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

और यहाँ हमारे आवेदन में दुबई मॉल है। इसने भू वस्तुओं के संपादन को भी लागू किया।



पेशेवरों:

• फिर से, पूरी तरह से ऑफ़लाइन करने की क्षमता;
• उच्च गुणवत्ता वाली तस्वीर;
• विभिन्न प्रकार की गतिशील शैलीीकरण की संभावना;
• डेटा संपादक को लागू करने की क्षमता।

विपक्ष:

• जटिल डेटा तैयारी।

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

एक ही स्थान पर सभी संदर्भ:

मोबाइल में मैप के बारे में लेख
एपीआई 2 जीआईएस
2 जीआईएस एपीआई उदाहरण
टाइल व्यू लाइब्रेरी
टाइल व्यू उदाहरण
मैप्सफोर्गे-वीटीएम पर एक उदाहरण