Qt中的离线交互OpenStreetMap

Question

如何在Qt中的ui窗体上显示OpenStreetMap？在mainwindow.ui的主窗口中。我需要一张互动地图。该点的传输纬度、经度和添加有关该点的信息。

如何使此示例具有交互性并在mainwindow.ui窗体上显示？

main.cpp：

#include <QGuiApplication>
#include <QQuickView>

int main(int argc, char **argv)
{
    QGuiApplication app(argc,argv);
    QQuickView view;
    view.setSource(QUrl(QStringLiteral("qrc:///places_map.qml")));
    view.setWidth(360);
    view.setHeight(640);
    view.show();
    return app.exec();
}

places_map.qml：

import QtQuick 2.0
import QtPositioning 5.5
import QtLocation 5.6
//! [Imports]

Rectangle {
    anchors.fill: parent

    //! [Initialize Plugin]
    Plugin {
        id: myPlugin
        name: "osm" // "mapboxgl", "esri", ...
        //specify plugin parameters if necessary
        //PluginParameter {...}
        //PluginParameter {...}
        //...
    }
    //! [Initialize Plugin]

    //! [Current Location]
    PositionSource {
        id: positionSource
        property variant lastSearchPosition: locationOslo
        active: true
        updateInterval: 120000 // 2 mins
        onPositionChanged:  {
            var currentPosition = positionSource.position.coordinate
            map.center = currentPosition
            var distance = currentPosition.distanceTo(lastSearchPosition)
            if (distance > 500) {
                // 500m from last performed pizza search
                lastSearchPosition = currentPosition
                searchModel.searchArea = QtPositioning.circle(currentPosition)
                searchModel.update()
            }
        }
    }
    //! [Current Location]

    //! [PlaceSearchModel]
    property variant locationOslo: QtPositioning.coordinate( 59.93, 10.76)

    PlaceSearchModel {
        id: searchModel

        plugin: myPlugin

        searchTerm: "Pizza"
        searchArea: QtPositioning.circle(locationOslo)

        Component.onCompleted: update()
    }
    //! [PlaceSearchModel]

    //! [Places MapItemView]
    Map {
        id: map
        anchors.fill: parent
        plugin: myPlugin;
        center: locationOslo
        zoomLevel: 13

        MapItemView {
            model: searchModel
            delegate: MapQuickItem {
                coordinate: place.location.coordinate

                anchorPoint.x: image.width * 0.5
                anchorPoint.y: image.height

                sourceItem: Column {
                    Image { id: image; source: "marker.png" }
                    Text { text: title; font.bold: true }
                }
            }
        }
    }
    //! [Places MapItemView]

    Connections {
        target: searchModel
        onStatusChanged: {
            if (searchModel.status == PlaceSearchModel.Error)
                console.log(searchModel.errorString());
        }
    }
}

Answer 1

至少有两种使用QtDesigner的方法

1.使用来自Qt设计器的QQuickWidget插件

QtCreator是QtCreator用来修改.ui的工具，所以它有更多使用过的小部件插件，在我的例子中，我有它，如下所示

​

​

然后转到属性视图，在源代码中放置.qml的url，因为它显示了以下图像：

​

​

然后我们添加到.pro中：

QT += quickwidgets

如果您没有小部件，我们可以使用小部件并将其提升为从QQuickWidget继承的类。

为此，我们创建了一个从QQuickWidget继承的类：

#ifndef QUICKWIDGET_H
#define QUICKWIDGET_H

#include <QQuickWidget>

class QuickWidget: public QQuickWidget
{
public:
    QuickWidget(QWidget *parent = Q_NULLPTR):QQuickWidget(parent){
        setSource(QUrl("qrc:/places_map.qml"));
        setResizeMode(QQuickWidget::SizeRootObjectToView);
    }
};

#endif // QUICKWIDGET_H

然后我们拖动QtDesigner Widget

​

​

然后右键单击选择Promote to...，然后获得一个菜单，在该菜单中放置图像中显示的值，然后按add按钮，然后单击promote按钮：

​

​

然后我们添加到.pro中：

QT += quickwidgets

这两个示例都在下面的链接中