QGC/QML技术问询：如何在地图多边形上添加随动文本标签

问题背景 #

刚接触QT，在QGroundControl中给地图多边形（如GeoFence）添加可随多边形移动的文本标签时，直接在MapPolygon下嵌套QGCLabel会报错：QML MapPolygon: Geographic map items do not support child items。改用QGCButton实现了部分效果，但需要更完善的方案。

优化方案方向 #

1. 用MapQuickItem承载文本标签

地图类元素（MapPolygon、MapCircle等）不支持子项，MapQuickItem是官方提供的用于在地图上放置QML元素的容器，可绑定到多边形的中心坐标实现跟随移动。示例代码：

Component {
    id: polygonComponent

    MapPolygon {
        color:          mapPolygon.showAltColor ? altColor : interiorColor
        opacity:        interiorOpacity
        border.color:   borderColor
        border.width:   borderWidth
        path:           mapPolygon.path

        MapQuickItem {
            // 绑定到多边形中心，若path无center属性可自行计算
            coordinate: calculatePolygonCenter(mapPolygon.path)
            anchorPoint.x: label.width / 2
            anchorPoint.y: label.height / 2
            visible: !mapPolygon.traceMode

            QGCLabel {
                id: label
                text: qsTr("Area1")
                color: "#000000"
                background: Rectangle {
                    color: "#ffffff"
                    radius: 2
                    opacity: 0.8
                }
            }
        }
    }
}

// 计算多边形中心坐标的辅助函数
function calculatePolygonCenter(path) {
    if (path.length === 0) return QtPositioning.coordinate(0, 0)
    let latSum = 0, lonSum = 0
    path.forEach(coord => {
        latSum += coord.latitude
        lonSum += coord.longitude
    })
    return QtPositioning.coordinate(latSum / path.length, lonSum / path.length)
}

2. 用MapItemGroup管理多边形与标签

将MapPolygon和承载标签的MapQuickItem放入MapItemGroup中，两者会作为一个整体联动，移动多边形时标签自动跟随。这种方式分离了多边形和标签的逻辑，更易维护：

Component {
    id: polygonComponent

    MapItemGroup {
        MapPolygon {
            id: polygon
            color:          mapPolygon.showAltColor ? altColor : interiorColor
            opacity:        interiorOpacity
            border.color:   borderColor
            border.width:   borderWidth
            path:           mapPolygon.path
        }

        MapQuickItem {
            coordinate: calculatePolygonCenter(polygon.path)
            anchorPoint.x: label.width / 2
            anchorPoint.y: label.height / 2
            visible: !mapPolygon.traceMode

            QGCLabel {
                id: label
                text: qsTr("Area1")
                // 可自定义文本样式
            }
        }
    }
}

// 同方案1的中心坐标计算函数
function calculatePolygonCenter(path) {
    if (path.length === 0) return QtPositioning.coordinate(0, 0)
    let latSum = 0, lonSum = 0
    path.forEach(coord => {
        latSum += coord.latitude
        lonSum += coord.longitude
    })
    return QtPositioning.coordinate(latSum / path.length, lonSum / path.length)
}

3. 自定义封装带标签的多边形组件

如果需要频繁复用带标签的多边形，可以封装一个独立的QML组件，对外暴露标签文本、可见性等属性，简化使用：

// CustomLabeledPolygon.qml
Item {
    property var path: []
    property string labelText: "Area"
    property bool labelVisible: true
    property color polygonColor: "#40ff0000"
    property color borderColor: "#ff000000"
    property int borderWidth: 2

    MapItemGroup {
        MapPolygon {
            path: parent.path
            color: parent.polygonColor
            border.color: parent.borderColor
            border.width: parent.borderWidth
        }

        MapQuickItem {
            visible: parent.labelVisible
            coordinate: calculatePolygonCenter(parent.path)
            anchorPoint.x: label.width / 2
            anchorPoint.y: label.height / 2

            QGCLabel {
                id: label
                text: parent.labelText
                color: "#000000"
                background: Rectangle {
                    color: "#ffffff"
                    radius: 2
                    opacity: 0.8
                }
            }
        }
    }

    function calculatePolygonCenter(path) {
        if (path.length === 0) return QtPositioning.coordinate(0, 0)
        let latSum = 0, lonSum = 0
        path.forEach(coord => {
            latSum += coord.latitude
            lonSum += coord.longitude
        })
        return QtPositioning.coordinate(latSum / path.length, lonSum / path.length)
    }
}

使用时直接引用该组件：

Component {
    id: polygonComponent
    CustomLabeledPolygon {
        path: mapPolygon.path
        labelText: qsTr("Area1")
        labelVisible: !mapPolygon.traceMode
        polygonColor: mapPolygon.showAltColor ? altColor : interiorColor
        borderColor: mapPolygon.borderColor
        borderWidth: mapPolygon.borderWidth
    }
}

补充说明 #

之前用QGCButton能生效是因为它内部的布局逻辑绕过了地图元素的子项限制，但它本质是按钮控件，存在点击事件冗余、样式不符合纯文本标签需求的问题，所以用QGCLabel配合MapQuickItem是更贴合场景的选择。

内容的提问来源于stack exchange，提问作者Motoguza