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

---

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

关于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： 信号触发函数：

     修改9： 私有变量定义：

SimpleMissionItem.cc 中：

     修改10、11： 填充初始化列表：

     修改12： 初始化时，数据源的获取，在演示gif中添加.plan文件时会被调用。实现的话是在 void SimpleMissionItem::_rebuildTextFieldFacts(void) 函数中：

     修改13： setLoiterRaduis 函数定义，QML的输入影响C++

2.3 用户输入半径值的交互

     下图输入框的交互：

     修改14： SimpleItemEditor.qml 函数中：

点击这里下载源文件：资源已上传，审核完毕后，再补上。

---

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

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