Question

我想显示多个MapPolygons。为了更好地进行构造，我想在一个单独的文件中定义多边形。经过一番探索之后，我认为使用ListView和ListModel的方法可以工作。

到目前为止，我尝试在MapPolygon内定义完整的ListElement{}。这产生了一个错误，即ListElement{}不能包含任何嵌套元素。因此，我在path中定义了一个可通过color和ListElement{}来尝试将它们委托给MapPolygon。这将产生错误：“ ListElement：不能将脚本用于属性值”

ListView：

ListView {
        model: PolygonCoords {}
        delegate: MapPolygon {
            color: color
            path:   path
        }
    }

ListModel，PolygonCoords.qml：

ListModel{
    ListElement{
            color: "blue"
            path: [ //very big
                {latitude: 47.30985701233802, longitude:  8.957498557565305},
                {latitude: 48.31223969058969, longitude:  12.959643094792634},
                {latitude: 50.31281785500094, longitude:  12.960823612887165},
                {latitude: 47.31281654102718, longitude:  8.962966471196324},
                {latitude: 47.30862993050194, longitude:  8.963243902017013},
                {latitude: 47.30863115391583, longitude:  8.963151349827395},
                {latitude: 47.30697209667029, longitude:  8.962058898768426},
                {latitude: 47.30985701233802, longitude:  8.957498557565305}
            ]
    }

    ListElement {
            color: "red"
            path: [ //very big
                {latitude: 45.30985701233802, longitude:  7.957498557565305},
                {latitude: 41.31223969058969, longitude:  11.959643094792634},
                {latitude: 54.31281785500094, longitude:  11.960823612887165},
                {latitude: 45.31281654102718, longitude:  7.962966471196324},
                {latitude: 45.30862993050194, longitude:  7.963243902017013},
                {latitude: 45.30863115391583, longitude:  7.963151349827395},
                {latitude: 45.30697209667029, longitude:  7.962058898768426},
                {latitude: 45.30985701233802, longitude:  7.957498557565305}
            ]
    }
}

我该如何更改path-使其不能作为脚本阅读，并且 ListView甚至是正确的方法还是有更好的选择？

@Update感谢@folibis，我将其与中继器一起使用，只要路径和中继器与地图位于同一文件中即可。由于带有地图的文件已经很大，因此我想在其自己的文件中尽可能多地移动。

我无法以property var points开头文件，因此我想到了将Item用作PolygonCoords.qml中的包装器：

Item {

 property var points: [
        {
                color: Qt.rgba(0, 80, 128, 0.5),
                path: [ //very big
                    {latitude: 47.30985701233802, longitude:  8.957498557565305},
                    {latitude: 48.31223969058969, longitude:  12.959643094792634},
                    {latitude: 50.31281785500094, longitude:  12.960823612887165},
                    {latitude: 47.31281654102718, longitude:  8.962966471196324},
                    {latitude: 47.30862993050194, longitude:  8.963243902017013},
                    {latitude: 47.30863115391583, longitude:  8.963151349827395},
                    {latitude: 47.30697209667029, longitude:  8.962058898768426},
                    {latitude: 47.30985701233802, longitude:  8.957498557565305}
                ]
        },
        {
               color: Qt.rgba(128, 80, 0, 0.5),
                path: [ //very big
                    {latitude: 45.30985701233802, longitude:  7.957498557565305},
                    {latitude: 41.31223969058969, longitude:  11.959643094792634},
                    {latitude: 54.31281785500094, longitude:  11.960823612887165},
                    {latitude: 45.31281654102718, longitude:  7.962966471196324},
                    {latitude: 45.30862993050194, longitude:  7.963243902017013},
                    {latitude: 45.30863115391583, longitude:  7.963151349827395},
                    {latitude: 45.30697209667029, longitude:  7.962058898768426},
                    {latitude: 45.30985701233802, longitude:  7.957498557565305}
                ]
        }
    ]
}

然后像这样调用它：

Repeater {
        model: PolygonCoords.points
        MapPolygon {
            color:  Polygoncoords.points[index].color
            border {width: 2; color: "grey"}
            path:  PolygonCoords.points[index].path
        }
    }

在这里我没有收到错误，但是在地图上都没有MapPolygon。

我还尝试了用ID命名Item并像这样调用它：

model: PolygonCoords.ItemID.points

但是与此同时，我得到了错误：TypeError：无法读取未定义的属性点。

我进一步尝试将中继器和点一起移动到另一个文件中，然后仅调用PolygonCoords。同样，没有错误也没有MapPolygon：

Item {
 Repeater {
        model: PolygonCoords.points
        MapPolygon {
            color:  Polygoncoords.points[index].color
            border {width: 2; color: "grey"}
            path:  PolygonCoords.points[index].path
        }
    }

 property var points: [
        {
                color: Qt.rgba(0, 80, 128, 0.5),
                path: [ //very big
                    {latitude: 47.30985701233802, longitude:  8.957498557565305},
                    {latitude: 48.31223969058969, longitude:  12.959643094792634},
                    {latitude: 50.31281785500094, longitude:  12.960823612887165},
                    {latitude: 47.31281654102718, longitude:  8.962966471196324},
                    {latitude: 47.30862993050194, longitude:  8.963243902017013},
                    {latitude: 47.30863115391583, longitude:  8.963151349827395},
                    {latitude: 47.30697209667029, longitude:  8.962058898768426},
                    {latitude: 47.30985701233802, longitude:  8.957498557565305}
                ]
        },
        {
               color: Qt.rgba(128, 80, 0, 0.5),
                path: [ //very big
                    {latitude: 45.30985701233802, longitude:  7.957498557565305},
                    {latitude: 41.31223969058969, longitude:  11.959643094792634},
                    {latitude: 54.31281785500094, longitude:  11.960823612887165},
                    {latitude: 45.31281654102718, longitude:  7.962966471196324},
                    {latitude: 45.30862993050194, longitude:  7.963243902017013},
                    {latitude: 45.30863115391583, longitude:  7.963151349827395},
                    {latitude: 45.30697209667029, longitude:  7.962058898768426},
                    {latitude: 45.30985701233802, longitude:  7.957498557565305}
                ]
        }
    ]
}

在带有地图的文件中：

PolygonCoords {}

为确保正确，我正确地引用了PolygonCords，在其中定义了一个MapPolygon。此地图已正确显示在地图上。

知道我缺少什么吗？

Answer 1

以下是说明我正在谈论的想法的示例。我使用了Repeater而不是ListView，因为我猜它更适合您的目的。数据数组可以存储在其他javascript文件中。

import QtQuick 2.11
import QtQuick.Controls 2.4
import QtLocation 5.6
import QtPositioning 5.6

ApplicationWindow {
    id: mainWindow
    width: 800
    height: 600
    visible: true
    property var points: [
        {
            color: Qt.rgba(0, 80, 128, 0.5),
            path: [
                {latitude:59.91288302222718, longitude:10.728799819940349},
                {latitude:59.91821810440818, longitude:10.737211227411649},
                {latitude:59.912323649434825, longitude:10.754119873037723},
                {latitude:59.90961270928307, longitude:10.764762878423767},
                {latitude:59.90165073245826, longitude:10.759441375730745},
                {latitude:59.908364741793115, longitude:10.748540878294307},
                {latitude:59.9010050830971, longitude:10.741846084608},
                {latitude:59.910387286199025, longitude:10.731632232668204},
            ]
        },
        {
            color: Qt.rgba(128, 80, 0, 0.5),
            path: [
                {latitude:59.92101437751683, longitude:10.77077102661346},
                {latitude:59.920842305970744, longitude:10.772916793815767},
                {latitude:59.9168413910999, longitude:10.772830963132293},
                {latitude:59.915206469874626, longitude:10.769741058354015},
                {latitude:59.91787393143297, longitude:10.765792846683212},
            ]
        }
    ]

    Map {
        id: map
        anchors.fill: parent
        plugin: Plugin { id: mapPlugin; name: "esri" }
        center: QtPositioning.coordinate(59.91, 10.75)
        zoomLevel: 14
        MouseArea {
            anchors.fill: parent
            onPressed: {
                var coord = map.toCoordinate(Qt.point(mouse.x,mouse.y));
                console.log(coord.latitude, coord.longitude);
            }
        }
        Repeater {
            model: points
            MapPolygon {
                color: points[index].color
                border{ width: 1; color: "grey" }
                path: points[index].path
            }
        }
    }
}

通过ListView和ListModel

1 个答案: