Отображение нескольких MapPolygons через ListView и ListModel

Question

Я хотел бы отобразить несколько MapPolygons.Чтобы это хорошо структурировать, я бы хотел определить полигоны в отдельном файле.После некоторого поиска в Google, я думаю, что подход с 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}
            ]
    }
}

Howмне нужно изменить мой 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 на карте.

Я также попробовал, назвав 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
            }
        }
    }
}