👤 👲 ⏭️ कार्टोग्राफिक और जियोलोकेशन मोबाइल एप्लिकेशन का विकास 🚑 🖤 💭

यह पोस्ट " स्मार्ट फ़ोन फॉर स्मार्ट पोस्ट " प्रतियोगिता में भाग लेती है

आर्टिकल QtQuick / QML का उपयोग करके कार्टोग्राफिक और जियोलोकेशन मोबाइल एप्लिकेशन के विकास में मुख्य बिंदुओं पर प्रकाश डालता है । इस लेख में चर्चित उदाहरण आपको QtMobility से लोकेशन मॉड्यूल API का उपयोग करने के सार और मूल बातों को समझने में मदद करेगा।

लेख के अंत में, पाठक यह समझेगा कि कार्टोग्राफिक एप्लिकेशन की बुनियादी कार्यक्षमता को लागू करने के लिए कितने छोटे कोड की आवश्यकता होती है, जैसे कि एक नक्शा प्रदर्शित करना, मानचित्र को हिलाना और ज़ूम करना, तथाकथित "चुटकी" के साथ। इस इशारे के लिए, हम PinchArea तत्व का उपयोग करेंगे, जिसे Qt Quick 1.1 में पेश किया गया था। ज़ूम करने के लिए आप वॉल्यूम अप / डाउन कीज़ का भी उपयोग कर सकते हैं।

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

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

अतिरिक्त प्लगइन्स

Google और OpenStreetMap से नक्शे का उपयोग करने के लिए, आपको प्लगइन्स के साथ प्रोजेक्ट को डाउनलोड करने की आवश्यकता है, या तो एक संग्रह के रूप में , या gitorius से रिपॉजिटरी को क्लोन करें।
मैंने असेंबली के लिए QtCreator का उपयोग किया है, इसलिए मैं अनुभव के आधार पर विधानसभा का वर्णन करूंगा।
जब आप QtCreator में एक परियोजना खोलते हैं, तो वह असेंबली कॉन्फ़िगरेशन को कॉन्फ़िगर करने की पेशकश करेगा, "क्यूटी एमुलेटर" चुनें और Ctrl + B दबाएं।
जब असेंबली पूरी हो जाती है, तो एक अलग फ़ोल्डर बनाएं और इसे / जियोसर्विस नाम दें , और इसके परिणामस्वरूप लाइब्रेरीज़ डालें। इस फ़ोल्डर में हमारे प्लग इन को देखने के लिए Qt के लिए, आपको या तो इस फ़ोल्डर को एप्लिकेशन के निष्पादन योग्य के बगल में रखना चाहिए, या मुख्य फ़ंक्शन में QApplication :: addLibraryPath () कॉल करके एक खोज पथ जोड़ना होगा। सब कुछ, एक्सटेंशन उपयोग के लिए तैयार हैं, आप हमारे आवेदन के लिए आगे बढ़ सकते हैं।

कार्टोग्राफिक एप्लिकेशन

इसलिए, हम आखिरकार बनाना शुरू करेंगे। एप्लिकेशन बनाने के लिए, आप QtCreator में दिए गए मानक Qt क्विक टेम्प्लेट का उपयोग कर सकते हैं। सभी परिवर्तन main.qml में होंगे, इस फ़ाइल को खोलें, जो कुछ जोड़ा गया है उसे हटा दें और कार्टोग्राफिक एप्लिकेशन लिखना शुरू करें।
सबसे पहले, निश्चित रूप से, आपको आवश्यक मॉड्यूल कनेक्ट करने की आवश्यकता है:

import QtQuick 1.1 //      import QtMobility.location 1.2

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

 Map { id: map z : 1 //       focus : true //      "nokia", //     (   ;-) ) //      : "nokia" "google" "openstreetmap" //-    "nokia",        plugin : Plugin { name : "nokia" } //... }

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

  //... zoomLevel: 7 center: Coordinate { latitude: 55.7545 longitude: 37.6268 } //...

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

  //... PinchArea { id: pincharea property double oldZoom anchors.fill: parent function calcZoomDelta(zoom, percent) { return zoom + Math.log(percent)/Math.log(2) } onPinchStarted: { oldZoom = map.zoomLevel } onPinchUpdated: { map.zoomLevel = calcZoomDelta(oldZoom, pinch.scale) } onPinchFinished: { map.zoomLevel = calcZoomDelta(oldZoom, pinch.scale) } } //...

इस तरह की कार्यक्षमता के पूरे कार्यान्वयन में कोड की 22 लाइनें लगीं, बुरा नहीं है, क्या यह है?
तो, यह नक्शे की गति का एहसास करने और कुंजियों के साथ ज़ूम जोड़ने के लिए रहता है।

  //... Keys.onPressed: { switch (event.key) { case Qt.Key_VolumeUp: case Qt.Key_Plus: map.zoomLevel += 1; break; case Qt.Key_VolumeDown: case Qt.Key_Minus: map.zoomLevel -= 1; break; } } MapMouseArea { property int lastX : -1 property int lastY : -1 onPressed : { lastX = mouse.x lastY = mouse.y } onReleased : { lastX = -1 lastY = -1 } onPositionChanged: { if (mouse.button == Qt.LeftButton) { if ((lastX != -1) && (lastY != -1)) { var dx = mouse.x - lastX var dy = mouse.y - lastY map.pan(-dx, -dy) } lastX = mouse.x lastY = mouse.y } } onDoubleClicked: { map.center = mouse.coordinate map.zoomLevel += 1 lastX = -1 lastY = -1 } } //...

और ताकि कार्ड पूरी तरह से उबाऊ न हो, Google की शैली में एक पिन जोड़ें।

  //... MapImage { id: baloon // MapImage    source: "http://habrastorage.org/storage1/b80bea34/0e0bc0f1/2cc13b01/8b462d5a.png" offset.x: -12 offset.y: -24 //     Nokia coordinate : Coordinate { latitude: 55.752949 longitude: 37.606292 } //  //       //      MapMouseArea { anchors.fill: parent //        //      onClicked: { map.center = baloon.coordinate map.zoomLevel = map.maximumZoomLevel } } } }

परिणामी एप्लिकेशन का परिणाम स्क्रीनशॉट में देखा जा सकता है:

स्क्रीन शुरू करें

निष्कर्ष

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

सभी माउस तत्व और ईवेंट मानचित्र निर्देशांक में काम करते हैं, जो प्रोग्रामर को रूपांतरण से बचाता है और तत्वों के साथ काम करना आसान बनाता है। उदाहरण के लिए, MapCircle के पास त्रिज्या जैसी संपत्ति है, यह मीटर में मूल्य को संग्रहीत करता है, और जब नक्शा पैमाने बदलता है, तो सर्कल बढ़ जाता है या घट जाता है।

संदर्भ

निःशुल्क ऐप ही गटोरियस पर
ऐड के साथ रिपोजिटरी । प्लग-इन
प्लगइन प्रलेखन

कार्टोग्राफिक और जियोलोकेशन मोबाइल एप्लिकेशन का विकास

यह पोस्ट " स्मार्ट फ़ोन फॉर स्मार्ट पोस्ट " प्रतियोगिता में भाग लेती है

अतिरिक्त प्लगइन्स

कार्टोग्राफिक एप्लिकेशन

निष्कर्ष

संदर्भ

More articles: