qt - 如何在 QML 中使用 MapPolyline 在任意时间后使路径消失？

Question

这是我在 QML 中的代码。我想知道如何添加计时器，以便每个坐标在任意时间后消失。

        MapPolyline {
            id:         mapPolyLine
            line.width: 8
            line.color: "blue"
            path: [
                { latitude: -34, longitude: 129.0 },
                { latitude: -35, longitude: 133.0 },
                { latitude: -34, longitude: 135.0 },
                { latitude: -33, longitude: 134.0 }
            ]
        }

Answer 1

逻辑是将每个坐标与一个标识符相关联，因此当触发任何计时器时，然后使用该标识符获取索引，然后将其从模型中删除。每次更改模型中的项目数时，都会重新计算路径。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtLocation 5.15
import QtPositioning 5.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    ListModel{
        id: polylineModel
        dynamicRoles: true
        onCountChanged: ()=> _internals.updatePolyline()
    }
    QtObject{
        id: _internals
        property int identifier_counter: 0
        function updatePolyline(){
            var path = []
            for(var i =0; i < polylineModel.count; ++i){
                var obj = polylineModel.get(i);
                path.push({"latitude": obj.latitude, "longitude": obj.longitude});
            }
            mapPolyLine.path = path
        }

        function deletePoint(identifier){
            for(var i =0; i < polylineModel.count; ++i){
                var obj = polylineModel.get(i);
                if(obj.identifier === identifier){
                    polylineModel.remove(i);
                    break
                }
            }
        }

        property Component timerComponent: Timer{
            id: timer
            repeat: false
            required property int identifier
            onTriggered: ()=> {
                             destroy();
                             _internals.deletePoint(identifier)
                         }
        }

        function appendPoint(latitude, longitude,  interval){
            var timer = timerComponent.createObject(polylineModel,
                                                    {"identifier": identifier_counter,
                                                        "interval": interval
                                                    })
            timer.start();
            polylineModel.append({"longitude": longitude, "latitude": latitude, "identifier": identifier_counter})
            identifier_counter++;
        }
        function init(){
            appendPoint(-34, 129, 1000);
            appendPoint(-35, 133, 5000);
            appendPoint(-34, 135, 3000);
            appendPoint(-33, 134, 2000);
        }
    }
    Map {
        anchors.fill: parent
        plugin: Plugin{
            name: "osm"
        }
        center: QtPositioning.coordinate(-34, 135)
        zoomLevel: 8
        MapPolyline {
            id: mapPolyLine
            line.width: 8
            line.color: "blue"
        }
    }
    Component.onCompleted: _internals.init()
}