QML/OSM。如何显示圆圈？答案

【问题标题】：QML/OSM. How to display circle?QML/OSM。如何显示圆圈？
【发布时间】：2018-06-17 12:35:04
【问题描述】：

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

map.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，但没有成功。请帮忙。

【问题讨论】：

标签： c++ qt qml openstreetmap

【解决方案1】：

要在地图上画一个圆，你需要使用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);

然后连接无线电和控制器的中心以及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你会找到一个例子

【讨论】：