Qt QML地图上绘制热力图（Qt/QML组件）

Qt QML地图上绘制热力图（Qt/QML组件）

QML中使用Map加载地图十分好用，但当需要在地图上可视化的展示区域位置数据的疏密程度时用热力图展示效果就会很好，如果需要在QWidget上绘制热力图，只需要将MapHeatImage继承由QQuickPaintedItem改为继承自QWidget即可使用，效果如图：

1、添加文件并注册到QML

在工程中添加“mapheatimage.h”、“mapheatimage.cpp”文件，在工程将类MapHeatImage注册到QML中：

qmlRegisterType<MapHeatImage>("MapHeatImage",1,0,"MapHeatImage");

2、QML中添加MapHeatImage模块

MapHeatImage将组件上的位置信息进行热力图绘制，因此需要将地图上的经纬度转换为注意：MapHeatImage的尺寸必须和Map尺寸大小一致

Map{
    id:myMap
    anchors.fill: parent
    plugin: mapPlugin
    zoomLevel: 8
    color: "#00000000"
    center: QtPositioning.coordinate(24,102)
    copyrightsVisible: false

    MapHeatImage{
        id:mapHeatImage
        anchors.fill: parent//MapHeatImage的尺寸必须和Map尺寸大小一致
        legendVisible: true//热力图颜色标识
        hideZeroPoint: true//无数据处颜色是否透明
        diffraction: 15//热力衍射值大小
    }
}

在地图上添加位置点：

        MapCircle {
            id:point1
            center {
                latitude: 24
                longitude: 102
            }
            radius: 5000.0
            color: 'green'
            border.width: 3
        }

        ....省略部分代码
        
        MapCircle {
            id:point5
            center {
                latitude: 24
                longitude: 102.5
            }
            radius: 5000.0
            color: 'green'
            border.width: 3
        }

3、传入相对位置，绘制热力图

将地图上的位置经纬度数据使用fromCoordinate转为相对位置数据并传入MapHeatImage，使用paintHeat()函数绘制热力图。

Button{
    text: "绘制热力图"
    onClicked: {
        setHeatPos()
        mapHeatImage.paintHeat()
    }
}

function setHeatPos(){//将经纬度数据转为相对位置数据并传入MapHeatImage
    var pos1 = myMap.fromCoordinate(point1.center)
    mapHeatImage.appendListPos(pos1)
    var pos2 = myMap.fromCoordinate(point2.center)
    mapHeatImage.appendListPos(pos2)
    var pos3 = myMap.fromCoordinate(point3.center)
    mapHeatImage.appendListPos(pos3)
    var pos4 = myMap.fromCoordinate(point4.center)
    mapHeatImage.appendListPos(pos4)
    var pos5 = myMap.fromCoordinate(point5.center)
    mapHeatImage.appendListPos(pos5)
}

完整demo地址Github：https://github.com/zjgo007/QmlDemo/tree/master/HeatDemo

MapHeatImage实现原理可查看我博文：https://blog.csdn.net/zjgo007/article/details/121744432