QML地图绘制地理关联网格：现有方案低效，寻求优化方法

问题背景 #

需要在地图上绘制与地理区域绑定的正方形网格（非屏幕叠加），仅渲染可见区域内的网格以提升性能。当前通过ListModel存储瓦片坐标，在VisibleRegionChanged时清空并重新填充模型，再通过MapItemView+MapPolygon渲染，但该方案效率极低，急需优化。

低效实现代码 #

Map {
    ...

    onMapReadyChanged: miv.model = tilesModel
    onVisibleRegionChanged: {
        tilesModel.clear();

        const visibleTL = map.visibleRegion.boundingGeoRectangle().topLeft;
        const visibleTL_m = QtPositioning.coordToMercator(visibleTL);
        const visibleBR = map.visibleRegion.boundingGeoRectangle().bottomRight;
        const visibleBR_m = QtPositioning.coordToMercator(visibleBR);

        const xStarting = Math.floor(visibleTL_m.x/tilesModel.tilesSize)*tilesModel.tilesSize
        const yStarting = Math.floor(visibleTL_m.y/tilesModel.tilesSize)*tilesModel.tilesSize
        const xEnding = visibleBR_m.x
        const yEnding = visibleBR_m.y

        for(var r = xStarting; r < xEnding; r+=tilesModel.tilesSize){
            for(var c = yStarting; c < yEnding; c+=tilesModel.tilesSize){
                tilesModel.append({
                    tile_tl_x: r,
                    tile_tl_y: c
                })
            }
        }

    }

    ListModel {
        id: tilesModel
        property real tilesSize: 0.0005

        Component.onCompleted: {
            const visibleTL = map.visibleRegion.boundingGeoRectangle().topLeft;
            const visibleTL_m = QtPositioning.coordToMercator(visibleTL);
            const visibleBR = map.visibleRegion.boundingGeoRectangle().bottomRight;
            const visibleBR_m = QtPositioning.coordToMercator(visibleBR);

            const xStarting = Math.floor(visibleTL_m.x/tilesSize)*tilesSize
            const yStarting = Math.floor(visibleTL_m.y/tilesSize)*tilesSize
            const xEnding = visibleBR_m.x
            const yEnding = visibleBR_m.y

            for(var r = xStarting; r < xEnding; r+=tilesSize){
                for(var c = yStarting; c < yEnding; c+=tilesSize){
                    append({
                        tile_tl_x: r,
                        tile_tl_y: c
                    })
                }
            }
        }

    }
    
    MapItemView {
        id: miv
        model: tilesModel

        delegate: Component {
            MapPolygon {

                function fromTL(x,y){
                    const ts = tilesModel.tilesSize;
                    return [QtPositioning.mercatorToCoord(Qt.point(x,y)),
                            QtPositioning.mercatorToCoord(Qt.point(x+ts,y)),
                            QtPositioning.mercatorToCoord(Qt.point(x+ts,y+ts)),
                            QtPositioning.mercatorToCoord(Qt.point(x,y+ts))];
                }

                path: fromTL(tile_tl_x, tile_tl_y);

            }
        }
    }
}

优化方案及代码 #

核心优化思路：减少组件创建销毁开销、避免模型频繁更新、改用更高效的渲染组件。

优化后的QML实现

Map {
    id: map
    anchors.fill: parent

    // 网格瓦片大小（墨卡托坐标系单位）
    property real tileSize: 0.0005
    // 瓦片对象池：复用已创建的瓦片组件，避免重复初始化
    property var tilePool: []
    // 池最大容量：根据可见区域最大网格数设定，防止内存溢出
    property int maxPoolSize: 300

    onVisibleRegionChanged: {
        // 先将所有池内瓦片设为不可见
        tilePool.forEach(tile => tile.visible = false)

        const visibleRect = visibleRegion.boundingGeoRectangle()
        const tlMercator = QtPositioning.coordToMercator(visibleRect.topLeft)
        const brMercator = QtPositioning.coordToMercator(visibleRect.bottomRight)

        const startX = Math.floor(tlMercator.x / tileSize) * tileSize
        const startY = Math.floor(tlMercator.y / tileSize) * tileSize
        const endX = brMercator.x
        const endY = brMercator.y

        let currentTileIndex = 0
        // 遍历生成可见区域内的网格
        for(let x = startX; x < endX; x += tileSize) {
            for(let y = startY; y < endY; y += tileSize) {
                let tile
                // 优先从对象池取可用瓦片，无可用则创建新的（不超过池上限）
                if(currentTileIndex < tilePool.length) {
                    tile = tilePool[currentTileIndex]
                } else {
                    if(tilePool.length < maxPoolSize) {
                        tile = tileComponent.createObject(map)
                        tilePool.push(tile)
                    } else {
                        break // 超过池容量，停止创建
                    }
                }
                // 计算瓦片的地理矩形范围
                const tileTopLeft = QtPositioning.mercatorToCoord(Qt.point(x, y))
                const tileBottomRight = QtPositioning.mercatorToCoord(Qt.point(x + tileSize, y + tileSize))
                tile.geoShape = QtPositioning.rectangle(tileTopLeft, tileBottomRight)
                tile.visible = true
                currentTileIndex++
            }
        }
    }

    // 网格瓦片组件：用MapQuickItem加载矩形，利用硬件加速提升渲染效率
    Component {
        id: tileComponent
        MapQuickItem {
            anchorPoint.x: 0.5
            anchorPoint.y: 0.5
            sourceItem: Rectangle {
                // 根据瓦片大小计算屏幕像素尺寸
                width: {
                    const p1 = map.toPixels(QtPositioning.mercatorToCoord(Qt.point(0, 0)))
                    const p2 = map.toPixels(QtPositioning.mercatorToCoord(Qt.point(map.tileSize, 0)))
                    return p2.x - p1.x
                }
                height: width
                color: "transparent"
                border.color: "#cccccc"
                border.width: 1
            }
        }
    }
}

关键优化点说明

• 对象池复用：避免每次地图移动时创建/销毁大量MapItem组件，大幅减少组件初始化和GC开销
• 跳过模型更新：直接操作瓦片组件，省去ListModel清空、追加数据以及MapItemView的delegate绑定流程
• 高效渲染组件：用MapQuickItem替代MapPolygon，借助QuickItem的硬件加速渲染，批量网格的渲染性能提升显著
• 减少重复计算：提前批量计算地理坐标，避免在delegate中重复执行坐标转换逻辑

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