QGC(QGroundControl)地面站手把手教你改——盘旋半径在地图中的显示

盘旋半径在地图中的显示

  • 1. 演示效果
  • 2. 添加流程
    • 2.1 Qml 前台显示
    • 2.2 C++后台数据处理
    • 2.3 用户输入半径值的交互


所有的热爱都要不遗余力,真正喜欢它便给它更高的优先级,和更多的时间吧!

关于QGC地面站其它文章请点击这里:     QGC地面站


1. 演示效果

     上图:

导入.plan文件,地图上就有半径圈的显示;修改特定的盘旋半径,地图中也会实时更新

2. 添加流程

     点击这里下载源文件:盘旋半径在地图中的显示.rar;可在文件中搜索: “loiterRaduis” 更便捷,一共有14出修改。

2.1 Qml 前台显示

     首先打开简单航点的地图显示qml “SimpleItemMapVisual.qml” 。简单介绍,它是在 planview.qml 中 delegate: MissionItemMapVisual 被调用的,后续有时间再详细分析下。

     修改1~6:

    //start_cch_20210321 loiterRaduis-1
    //定义变量
    property var    _circle
    property var    _radiusLabel
    property bool   _circleShowing:   false

	//start_cch_20210321 loiterRaduis-2
    //隐藏半径圈和数字
    function hideCircle() {
     
        if (_circleShowing) {
     
            _circle.destroy()
            _radiusLabel.destroy()
            _circleShowing = false
        }
    }

    //start_cch_20210321 loiterRaduis-3
    //显示半径圈和数字
    function showCircle() {
     
        if (!_circleShowing) {
     
            _circle = circleComponent.createObject(map)
            _radiusLabel = radiusLabelComponent.createObject(map)
            map.addMapItem(_circle)
            map.addMapItem(_radiusLabel)
            _circleShowing = true
        }
    }

    //start_cch_20210321 loiterRaduis-4
    //显示半径圈的组件
    Component {
     
        id: circleComponent

        MapCircle {
     
            color:          Qt.rgba(0,0,0,0)
            border.color:   "red"
            border.width:   3
            center:         _missionItem.coordinate
            radius:         _missionItem.loiterRaduis ? _missionItem.loiterRaduis : 0
            visible:        _missionItem.category === "Loiter"
        }
    }

    //start_cch_20210321 loiterRaduis-4
    //显示半径数值的控件
    Component {
     
        id: radiusLabelComponent

        MapQuickItem{
     
            visible: _missionItem.category === "Loiter" && _missionItem.loiterRaduis !== 0
            sourceItem: Rectangle {
     
                width: 14
                height: 14
                radius: 7
                color: "white"
                border.width: 2
                border.color: "red"
                Rectangle{
     
                    anchors.left: parent.right
                    anchors.top: parent.bottom
                    width: item_text.width+5+5
                    height: item_text.height+10
                    border.color: "gray"
                    Text {
     
                        id: item_text
                        x: 5
                        anchors.verticalCenter: parent.verticalCenter
                        text: String(_missionItem.loiterRaduis ? _missionItem.loiterRaduis : 0)
                    }
                }
            }

            //定位方法一: 地球半径对比
//            coordinate{
     
//                latitude: _missionItem.coordinate.latitude + (360/40076000)*(_missionItem.loiterRaduis ? _missionItem.loiterRaduis : 0)
//                longitude: _missionItem.coordinate.longitude
//            }
            //定位方法二:利用现有的函数
            coordinate : _missionItem.coordinate.atDistanceAndAzimuth((_missionItem.loiterRaduis ? _missionItem.loiterRaduis : 0),90)
            anchorPoint: Qt.point(sourceItem.width/2, sourceItem.height/2)
        }
    }
    
    Component.onCompleted: {
     
        ...
        //start_cch_20210321 loiterRaduis-5
        //初始化,类似于构造函数
        showCircle()
    }

    Component.onDestruction: {
     
        ...
        //start_cch_20210321 loiterRaduis-6
        //类似于析构函数
        hideCircle()
    }

2.2 C++后台数据处理

SimpleMissionItem.h 中, 因代码不方便查看,直接截图:

     修改7: 可以与QML交互的属性定义:
在这里插入图片描述
     修改8: 信号触发函数:
QGC(QGroundControl)地面站手把手教你改——盘旋半径在地图中的显示_第1张图片
     修改9: 私有变量定义:
在这里插入图片描述

SimpleMissionItem.cc 中:

     修改10、11: 填充初始化列表:
在这里插入图片描述在这里插入图片描述
     修改12: 初始化时,数据源的获取,在演示gif中添加.plan文件时会被调用。实现的话是在 void SimpleMissionItem::_rebuildTextFieldFacts(void) 函数中:
QGC(QGroundControl)地面站手把手教你改——盘旋半径在地图中的显示_第2张图片
     修改13: setLoiterRaduis 函数定义,QML的输入影响C++
QGC(QGroundControl)地面站手把手教你改——盘旋半径在地图中的显示_第3张图片

2.3 用户输入半径值的交互

     下图输入框的交互:
QGC(QGroundControl)地面站手把手教你改——盘旋半径在地图中的显示_第4张图片
     修改14: SimpleItemEditor.qml 函数中:

QGC(QGroundControl)地面站手把手教你改——盘旋半径在地图中的显示_第5张图片
点击这里下载源文件:资源已上传,审核完毕后,再补上。


以上有任何我没写明白或错误的欢迎留言,我会一直在的~

关于QGC地面站其它文章请点击这里:     QGC地面站

你可能感兴趣的:(QGC——无人机地面站,QT,QML,QGroundControl,地面站,盘旋半径)