QML/OSM。如何显示圆圈？

Posted 2023-03-22

【中文标题】QML/OSM。如何显示圆圈？

【英文标题】：QML/OSM. How to display circle?

【发布时间】：2018-06-17 12:35:04

【问题描述】：

我有一张地图，我需要显示在她的圈子上。在从 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，但没有成功。请帮忙。

【参考方案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你会找到一个例子