更改缩放之前无法获取MapCircle的宽度

时间:2019-09-03 18:37:41

标签: qt qml

我需要在Map元素中获取MapCircle的宽度,因为我需要将MapQuickItem放置在MapCircle上方,并且可以使用Map元素上的toCoordinate()函数来做到这一点。但是在更改缩放比例之前,我无法获得MapCircle的宽度,但是在此之后,有正确的数字。

即使使用Map的mapReady属性,我也无法获得宽度

        onMapReadyChanged: {
            if (mapReady){
                console.log(mapReady+" width = "+testCircle.width)
            }
        }

即使MapQuickItem中矩形的宽度和高度等于MapCircle的宽度。

import QtQuick 2.0
import QtQuick.Window 2.0
import QtLocation 5.6
import QtPositioning 5.6

Window {
    width: 1200
    height: 1200
    visible: true

    Plugin {
        id: mapPlugin
        name: "esri" // "mapboxgl", "esri", ...
    }

    Map {
        id: _map
        anchors.fill: parent
        plugin: mapPlugin
        center: QtPositioning.coordinate(59.91, 28.6)
        zoomLevel: 9

        Component.onCompleted: {
            console.log("on completed "+testCircle.width)
        }

        MapCircle {
            id: testCircle
            center: parent.center
            radius: 50000.0
            color: '#8000FF00'
            border.width: 3
            border.color: "orange"
        }

        MapQuickItem {
            id: testItem
            coordinate: parent.center

            sourceItem: Rectangle {
                id:testR
                width: testCircle.width
                height: width
                color: "pink"
            }
        }

        onMapReadyChanged: {
            if (mapReady){
                console.log(mapReady+" width = "+testCircle.width)
            }
        }

        onZoomLevelChanged: {
            console.log(" width = "+testCircle.width+" "+testCircle.implicitWidth)
        }
    }
}

在更改缩放之前如何获得正确的结果?可能吗?这是缩放之前此代码的控制台输出

qml: on completed 0
qml: true width = 0

但是在缩放地图后,效果不错

qml:  width = 658.222013399468 0
qml:  width = 605.3187684634481 0

即使我在MapQuickItem中分配的矩形大小等于mapCircle的宽度时,我也无法理解为什么在缩放之前没有收到正确的数字。

1 个答案:

答案 0 :(得分:0)

如果您的目标是将MapQuickItem放置在MapCircle的顶部,则只需设置适当的偏移量即可:

// ...
MapQuickItem {
    id: testItem
    coordinate: parent.center
    sourceItem: Rectangle {
        id:testR
        x: - width/2  // <---
        y: - height/2 // <---
        width: testCircle.width
        height: width
        color: "pink"
    }
}
// ...