🚲 💲 🎉 एक उदाहरण मानचित्र का उपयोग करते हुए QML में एक प्रतिनिधित्व के साथ एक डेटा मॉडल को C ++ में जोड़ना 👩🏻‍🤝‍👨🏾 👨🏼‍🎨 🌍

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

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

काम करने के लिए, आपको स्थापित Qt SDK 1.1.4 की आवश्यकता है। हम एक नई परियोजना बनाते हैं: क्यूटी क्विक एप्लीकेशन -> क्यूई क्विक कम्पोनेंट्स फॉर मीगो / हरमाटन, फिर डिफ़ॉल्ट रूप से सब कुछ। चूँकि हम Qt मोबिलिटी का उपयोग कर रहे हैं, हमें प्रो फाइल में जोड़ना होगा:

CONFIG += mobility

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

 import QtMobility.location 1.2

और पृष्ठ तत्व के अंदर सब कुछ हटा दें, इसे मानचित्र के साथ प्रतिस्थापित करें:

 Map { id: map anchors.fill:parent plugin: Plugin {name:"nokia"} zoomLevel: 13 center: Coordinate { latitude: 55.755786; longitude: 37.617633 } }

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

सब ठीक है, लेकिन हमें कम से कम एक उंगली स्क्रॉल की आवश्यकता है। मूल नियंत्रण यह करना नहीं जानता है, इसलिए हम इसे स्वयं करते हैं। मानचित्र के शीर्ष पर MouseArea जोड़ें जो एकल ताची को पकड़ेगा और मानचित्र को स्थानांतरित करेगा:

  MouseArea { anchors.fill:parent property int lastX : -1 property int lastY : -1 onPressed : { lastX = mouse.x; lastY = mouse.y; } onReleased : { lastX = -1; lastY = -1; } onPositionChanged: { if (lastX>=0) { map.pan(lastX- mouse.x, lastY - mouse.y) lastX = mouse.x lastY = mouse.y } } }

PinchArea एलिमेंट का उपयोग करके टू-फिंगर जूम को एक समान तरीके से निपटाया जा सकता है।

अब आपको पिन खींचने की आवश्यकता है। मानचित्र नियंत्रण अपने आप में विभिन्न तत्वों का प्रतिपादन करता है, जो ग्राफिक रूप से आदिम और बिटमैप दोनों हैं, लेकिन गतिशील रूप से यह addMapObject और removeMapObject विधियों के माध्यम से किया जा सकता है, जो MVC करने की हमारी इच्छा के अनुरूप नहीं है। एक अन्य विकल्प MapObjectView का उपयोग करना है, लेकिन जैसा कि दस्तावेज़ कहता है "मॉडल डेटा के लिए, वर्तमान में केवल LandmarkModel समर्थित है। अन्य प्रकार के मॉडल का उपयोग करने से अपरिभाषित व्यवहार होता है। ”और लैंडमार्कमॉडल हमारे लिए बहुत सारे प्रतिबंधों और अनावश्यक कार्यों के साथ एक अंधेरा जंगल है। हमें कुछ सरल चाहिए। तो हम अपने तरीके से जाएंगे, लेकिन पहले हम C ++ में मॉडल से निपटेंगे।

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

 class PinList : public QAbstractListModel //… void PinList::addPin(QString imageSource, double lat, double lng) { //      Pin *pin = new Pin(this); pin->imageSource = imageSource; pin->Lat = lat; pin->Lng = lng; beginInsertRows(QModelIndex(), this->Pins->length(), this->Pins->length()); this->Pins->append(pin); endInsertRows(); // view,    emit dataChanged(createIndex(0,0),createIndex(this->Pins->size(),0)); } //view       lat, lng   x,y (        0,0) void PinList::DrawPins(QString x,QString y,QString x_end,QString y_end, QString map_x, QString map_y) { //   map_first_lat = x.toDouble(); map_first_lng = y.toDouble(); map_second_lat = x_end.toDouble(); map_second_lng = y_end.toDouble(); map_x_end = map_x.toDouble(); map_y_end = map_y.toDouble(); // view,    emit dataChanged(createIndex(0,0),createIndex(this->Pins->size(),0)); } //  view     //     lat,lng  x,y QVariant PinList::data(const QModelIndex & index, int role) const { if (index.row() < 0 || index.row() > this->Pins->count()) return QVariant(); const Pin* pin = this->Pins->at(index.row()); QVariant result; switch (role) { case ImageSource: result = QVariant(pin->imageSource); break; case X: if ( pin->Lng > map_first_lng && pin->Lng < map_second_lng) { result =QVariant((map_x_end)*(pin->Lng - map_first_lng)/(map_second_lng - map_first_lng)); } break; case Y: if ( pin->Lat > map_second_lat && pin->Lat < map_first_lat) { result = QVariant(map_y_end*(pin->Lat - map_first_lat)/(map_second_lat - map_first_lat)); } break; } return result; }

अब हमें यह सब देखने की जरूरत है। ऐसा करने के लिए, परिभाषित करें कि पिन कैसा दिखता है:

  // Component { id: landmarkMapDelegate Item { id:land width: 20; height: 20 ; x: X y: Y Image { source:ImageSource } } }

और नक्शे के शीर्ष पर एक पुनरावर्तक आकर्षित करें

  Item { anchors.fill:parent Repeater { model: pinlist delegate: landmarkMapDelegate } }

यह महत्वपूर्ण है: मॉडल पिनलिस्ट पहचानकर्ता से बंधा हुआ है। इस पहचानकर्ता को फिर C ++ में मॉडल को बांधने के लिए निर्दिष्ट करने की आवश्यकता होगी।

ड्रॉपिन्स फ़ंक्शन को घोषित करें, जो मैप के लेट और लैंग कॉर्नर को पढ़ेगा, और इसे मॉडल में पास करेगा

  function drawPins() { var topLeft = map.toCoordinate(Qt.point(0,0)) var bottomRight = map.toCoordinate(Qt.point(map.width, map.height)) pinlist.DrawPins(topLeft.latitude,topLeft.longitude,bottomRight.latitude,bottomRight.longitude, map.width,map.height); }

और इसे OnPositionChanges मैप में कॉल करें।

अब यह वास्तव में, हमारे मॉडल और दृश्य को जोड़ने के लिए बना हुआ है:

  //  PinList* pinList = new PinList(0); //   pinList->addPin("qrc:/icons/pin.png", 55.745, 37.6175); pinList->addPin("qrc:/icons/pin.png", 55.7575, 37.619697); pinList->addPin("qrc:/icons/pin.png", 55.751667, 37.617778); //    viewer->rootContext()->setContextProperty("pinlist", pinList); // qml viewer->setMainQmlFile(QLatin1String("qml/untitled/main.qml"));

वह सब है।

स्रोत कोड

एक उदाहरण मानचित्र का उपयोग करते हुए QML में एक प्रतिनिधित्व के साथ एक डेटा मॉडल को C ++ में जोड़ना

More articles: