使用qt,写一个widget,主函数里用qvariantlist生成一系列二维数组,采用quickwidget将这些数据传递至qml,在qml中location地图中用mapcircle画出这些数据点,并监听这些数据,当数据改变时,也能绘图,并给出实例
时间: 2023-12-18 12:02:24 浏览: 102
Qt qml的ListView等视图控件Models(QAbstractItemModel)的使用
4星 · 用户满意度95%
好的,下面是一个示例程序,主要实现了在 Qt 中生成二维数组,将数据传递给 QML,并在 QML 中绘制地图上的圆点,同时实现了数据的动态更新。
首先,我们需要在 Qt 中创建一个自定义的 Widget,用于承载 QML。在该 Widget 的构造函数中,我们使用 QVariantList 生成一系列二维数组,并将其传递给 QML。
```cpp
#include <QtQuickWidgets/QQuickWidget>
#include <QVariantList>
#include <QVariantMap>
class MapWidget : public QQuickWidget
{
Q_OBJECT
public:
MapWidget(QWidget *parent = nullptr) : QQuickWidget(parent)
{
// 生成一系列二维数组
QVariantList dataList;
for (int i = 0; i < 5; ++i) {
QVariantMap dataMap;
dataMap.insert("x", i * 50);
dataMap.insert("y", i * 50);
dataList.append(dataMap);
}
setResizeMode(QQuickWidget::SizeRootObjectToView);
setSource(QUrl("qrc:/Map.qml"));
rootObject()->setProperty("dataList", QVariant::fromValue(dataList));
}
};
```
接下来,在 QML 中使用 MapCircle 组件绘制圆点,并通过绑定 dataList 属性实现数据的传递和绘制。
```qml
// Map.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtLocation 5.12
Item {
width: 800
height: 600
Plugin {
id: mapPlugin
name: "osm"
}
Map {
id: map
anchors.fill: parent
plugin: mapPlugin
center: QtPositioning.coordinate(51.507222, -0.1275)
zoomLevel: 12
MapCircle {
id: circle
radius: 5
color: "red"
opacity: 0.8
border.width: 2
border.color: "white"
// 绑定 dataList 属性,当数据改变时重新绘制圆点
property variant dataList: []
onMapChanged: {
var mapItems = []
for (var i = 0; i < dataList.length; ++i) {
var item = Qt.createQmlObject('import QtLocation 5.12; MapCircle { center: QtPositioning.coordinate(dataList[i].x, dataList[i].y); }', circle)
mapItems.push(item)
}
circle.mapItems = mapItems
}
}
}
}
```
最后,我们可以在主函数中创建 MapWidget,并将其添加到窗口中。
```cpp
#include <QApplication>
#include "MapWidget.h"
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QWidget window;
window.resize(800, 600);
window.setWindowTitle("Map Widget");
MapWidget *mapWidget = new MapWidget(&window);
mapWidget->setGeometry(0, 0, 800, 600);
window.show();
return app.exec();
}
```
以上就是一个简单的实现,可以在 QML 中通过绑定属性实现数据的动态更新。
阅读全文