Qt QML MapQuickItem文本旋转异常问题求助

在QML中使用OSM地图时，创建了包含Text子项的MapQuickItem，希望文本能根据两点（QtPositioning.coordinate）间MapPolyLine的角度旋转。编写了drawRuler函数计算角度并设置旋转，但文本仅在90度倍数角度时显示正确，45度时会偏离约10-20度。尝试调整transform.origin、替换Math.atan为Math.atan2均无效。

1. 地理坐标与屏幕坐标不匹配：直接用经纬度差值计算角度忽略了OSM墨卡托投影的变形，高纬度地区经度差会被拉伸，导致地理角度和屏幕视觉角度不一致。
2. MapQuickItem尺寸设置错误：固定宽高为2x2，导致锚点和旋转原点的计算与实际Text控件尺寸不匹配，旋转时出现偏移。

1. 基于屏幕坐标计算角度 #

将地理坐标转换为地图的屏幕像素坐标，再计算两点间的视觉角度，完全匹配线条的屏幕显示方向。

2. 修正MapQuickItem的尺寸与锚点设置 #

让MapQuickItem的尺寸跟随Text控件，确保锚点和旋转原点准确对应文本中心。

修改后的MapQuickItem代码 #

MapQuickItem {
    property alias rulerRotationAngle: rulerRotation.angle
    id: rulerTextMapItem
    visible: false
    // 跟随sourceItem的尺寸，避免固定值导致的偏移
    width: rulerText.width
    height: rulerText.height
    transform: Rotation {
        id: rulerRotation
        // 旋转原点设为控件自身中心，对应文本中心
        origin.x: rulerTextMapItem.width / 2
        origin.y: rulerTextMapItem.height / 2
        angle: 0
    }
    // 锚点设为自身中心，确保文本居中显示在目标坐标上
    anchorPoint.x: width / 2
    anchorPoint.y: height / 2
    z:5
    sourceItem: Text {
        id: rulerText
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        color: Material.color(Material.Amber, Material.Shade100)
        text: "0.0 km";
    }
}

修改后的drawRuler函数 #

function drawRuler()
{
    rulerLine.path = [];
    rulerLine.addCoordinate(r_firstpoint);
    rulerLine.addCoordinate(r_secondpoint);
    rulerTextMapItem.visible = true;
    
    // 计算两点的地理中点
    const midLat = (r_firstpoint.latitude + r_secondpoint.latitude) / 2;
    const midLon = (r_firstpoint.longitude + r_secondpoint.longitude) / 2;
    rulerTextMapItem.coordinate = QtPositioning.coordinate(midLat, midLon);
    
    // 将地理坐标转换为屏幕像素坐标
    const screenPoint1 = map.toScreenPosition(r_firstpoint);
    const screenPoint2 = map.toScreenPosition(r_secondpoint);
    
    // 计算屏幕上的向量角度（适配屏幕坐标系Y轴向下的特性）
    const deltaX = screenPoint2.x - screenPoint1.x;
    const deltaY = screenPoint2.y - screenPoint1.y;
    let angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;
    
    // 调整文本方向，确保文字始终正立可读
    if (angle < -90 || angle > 90) {
        angle += 180;
    }
    
    rulerTextMapItem.rulerRotationAngle = angle;
}

关键修改说明 #

• 移除MapQuickItem的固定宽高，改为绑定Text控件的尺寸，让锚点和旋转原点完全对应文本的实际中心。
• 使用map.toScreenPosition()将经纬度转为屏幕坐标，基于像素差值计算角度，彻底解决投影变形导致的角度偏差。
• 优化文本方向判断逻辑，确保无论线条朝向如何，文本都保持正立可阅读的状态。

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