QGC二次开发---框选多机执行解锁任务2

使用QML实现地图框选功能

最新推荐文章于 2025-07-25 11:15:44 发布

原创

最新推荐文章于 2025-07-25 11:15:44 发布 · 700 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html5

这篇博客主要介绍了如何在QML中编写前端代码来实现地图上的框选功能。通过添加遮罩层、捕获鼠标事件以及使用Canvas绘制矩形线框，实现了在地图上选择区域的功能。在鼠标按下和释放时，转换坐标并调用相关函数进行处理，同时在鼠标移动时实时更新绘制。此外，还包括了对框选区域内目标进行操作的逻辑。

上一篇中，已经展示了实现以后的效果动图以及实现思路。此篇着重开始编写前端QML界面代码，包括获取鼠标按压/释放点的坐标、绘制矩形线框的代码。

阻拦地图插件的鼠标事件

在FlightDisplayView.qml中，直接在Map视图添加鼠标事件，将会拖动地图，所以需要在地图窗口添加一个遮罩层（Rectangle）

然后添加鼠标事件

最后添加一个Canvas画布，在鼠标位置改变时绘制，代码如下：

//定义变量
//记录按压、释放时的坐标
property  var pressedPonit;
property  var relasedPonit;
//绘制选中框
//鼠标点击坐标位置
property real startX     //储存鼠标开始时的坐标
property real startY
property real stopX      //储存鼠标结束时的坐标
property real stopY
property bool isMouseMoveEnable: false //是否允许鼠标移动绘制事件

//--------------------------------------------------------------
//-- Map View
        Item {
            id: _flightMapContainer
            z:  mainIsMap ? _mapAndVideo.z + 1 : _mapAndVideo.z + 2
            anchors.left:   _mapAndVideo.left
            anchors.bottom: _mapAndVideo.bottom
            visible:        mainIsMap || _isPipVisible && !QGroundControl.videoManager.fullScreen
            width:          mainIsMap ? _mapAndVideo.width  : _pipSize
            height:         mainIsMap ? _mapAndVideo.height : _pipSize * (9/16)
            states: [
                State {
                    name:   "pipMode"
                    PropertyChanges {
                        target:             _flightMapContainer
                        anchors.margins:    ScreenTools.defaultFontP

最低0.47元/天解锁文章