c++ - QML/OSM。如何显示圆圈？

Question

我有一张 map ，需要显示在她的圈子上。在从 C++/Qt 代码执行程序期间，该圆圈的位置也会发生变化。我怎样才能做到这一点？

ma​​p.qml

import QtQuick 2.9

import QtLocation 5.6
import QtPositioning 5.6

Rectangle {
    Plugin {
        id: osmMapPlugin
        name: "osm"
    }

    Map {
        anchors.fill: parent
        plugin: osmMapPlugin
        center: QtPositioning.coordinate(56.006355, 92.860984)
        zoomLevel: 10

        MapPolyline {
            id: pl
            line.width: 2
            line.color: 'red'
        }
    }

    function loadPath() {
        var lines = [];
        if (pl.pathLength() < pathController.geopath.size()) {
            lines = pl.path;
            for(var i = pl.pathLength(); i < pathController.geopath.size(); i++) {
                lines[i] = pathController.geopath.coordinateAt(i)
            }
        } else {
            for(var i = 0; i < pathController.geopath.size(); i++) {
                lines[i] = pathController.geopath.coordinateAt(i)
            }
        }

        return lines;
    }

    Connections {
        target: pathController
        onGeopathChanged: pl.path = loadPath()
    }

    Component.onCompleted: pl.path = loadPath()
}

我尝试为 map 添加字段 circle，但没有成功。请帮忙。

Answer 1

要在 map 上画一个圆，你需要使用 MapCircle ，如果你想从 C++ 操纵你的位置，创建一个控制你的位置和半径的类是合适的，我接下来将向你展示一个例子:

class CircleController: public QObject{
    Q_OBJECT
    Q_PROPERTY(QGeoCoordinate center READ center NOTIFY centerChanged)
    Q_PROPERTY(qreal radius READ radius WRITE setRadius NOTIFY radiusChanged)
public:
    CircleController(QObject *parent=0):QObject(parent){
        mCircle.setRadius(1000);
    }
    void setCenter(const QGeoCoordinate &center){
        if(mCircle.center() == center)
            return;
        mCircle.setCenter(center);
        emit centerChanged();
    }
    QGeoCoordinate center() const{ return mCircle.center();}

    void translate(double degreesLatitude, double degreesLongitude){
        mCircle.translate(degreesLatitude, degreesLongitude);
        emit centerChanged();
    }

    qreal radius() const{ return mCircle.radius();}
    void setRadius(const qreal &radius){
        if(mCircle.radius() == radius)
            return;
        mCircle.setRadius(radius);
        emit radiusChanged();
    }
signals:
    void centerChanged();
    void radiusChanged();
private:
    QGeoCircle mCircle;
};

然后通过setContextProperty()传递给QML:

CircleController circleController;
circleController.setCenter(QGeoCoordinate(56.006355, 92.860984)); // new position

QQmlApplicationEngine engine;
engine.rootContext()->setContextProperty("circleController", &circleController);

然后连接 radio 和 Controller 的中心以及QML中的MapCircle:

Window {
    visible: true
    width: 640
    height: 480

    Plugin {
        id: osmMapPlugin
        name: "osm"
    }
    Map {
        anchors.fill: parent
        plugin: osmMapPlugin
        center: QtPositioning.coordinate(56.006355, 92.860984)
        zoomLevel: 10

        MapCircle {
            center: circleController.center
            radius: circleController.radius
            color: 'green'
            border.width: 3
        }
    }
}

在下面link你会找到一个例子