Kartenbetrachter (QML)

Es handelt sich um ein umfangreiches Beispiel, das viele grundlegende Anwendungen von Karten, Positionsbestimmung und Navigationsdiensten in Qt Location abdeckt. Diese Seite ist in Abschnitte unterteilt, die jeden dieser Funktionsbereiche mit Auszügen aus dem Code abdecken.

Ausführen des Beispiels

Zum Ausführen des Beispiels von Qt Creatorauszuführen, öffnen Sie den Modus Welcome und wählen Sie das Beispiel aus Examples aus. Weitere Informationen finden Sie unter Erstellen und Ausführen eines Beispiels.

Das Beispiel kann mit jedem der verfügbaren Geodienste-Plugins verwendet werden. Einige Plugins benötigen jedoch zusätzliche plugin parameters, um korrekt zu funktionieren. Plugin parameters kann in der Befehlszeile mit dem Argument --plugin übergeben werden, das die Form hat:

--plugin.<parameter name> <parameter value>

Welche Plugin-Parameter sie unterstützen, entnehmen Sie bitte der Dokumentation der einzelnen Geodienste-Plugins. Das in diesem Beispiel verwendete Standard-Plugin ist Qt Location Open Street Map Plugin, das keine Parameter benötigt.

Übersicht

In diesem Beispiel gezeigte QML-Typen:

• Anzeigen einer Karte
  • Map
  • MapView
  • coordinate
• Suche nach einer Adresse
  • GeocodeModel
  • MapItemView
  • MapCircle
• Wegbeschreibung und Reiserouten
  • RouteModel
  • MapRoute

Anzeigen einer Karte

Das Zeichnen einer Karte auf dem Bildschirm erfolgt mit dem Typ MapView, wie unten gezeigt.

MapView {
    id: view
    map.zoomLevel: (maximumZoomLevel - minimumZoomLevel)/2
    map.center {
        // The Qt Company in Oslo
        latitude: 59.9485
        longitude: 10.7686
    }
}

Der Typ MapView besteht aus map und erweitert diesen um grundlegende Navigationsfunktionen. In diesem Beispiel geben wir der Karte ein anfängliches Zentrum coordinate mit einem festgelegten Breiten- und Längengrad. Außerdem setzen wir die anfängliche Zoomstufe auf 50 % (auf halbem Weg zwischen dem Maximum und dem Minimum).

Suchen einer Adresse (Geokodierung)

Um eine bestimmte Adresse oder einen Ort auf der Karte zu finden, wird ein Prozess namens Geokodierung verwendet. Um eine Geokodierung durchzuführen, müssen wir zunächst unser Kartenobjekt so anpassen, dass es das Ergebnis empfangen kann.

Der Empfang von Geokodierungsergebnissen erfolgt über eine GeocodeModel:

GeocodeModel {
    id: geocodeModel
    plugin: view.map.plugin
    onStatusChanged: {
        if ((status == GeocodeModel.Ready) || (status == GeocodeModel.Error))
            view.geocodeFinished()
    }
    onLocationsChanged:
    {
        if (count === 1) {
            view.map.center.latitude = get(0).coordinate.latitude
            view.map.center.longitude = get(0).coordinate.longitude
        }
    }
}

Um den Inhalt von GeocodeModel anzuzeigen, verwenden wir MapItemView:

MapItemView {
    parent: view.map
    model: geocodeModel
    delegate: pointDelegate
}

MapItemView verwendet ein Objekt namens delegate, das als Vorlage für die von ihm erstellten Elemente dient. Dieses kann jedes beliebige Kartenobjekt enthalten, aber in diesem Fall zeigen wir ein MapQuickItem an, das ein Bild eines Markers enthält:

Component {
    id: pointDelegate

    MapQuickItem {
        id: point
        parent: view.map
        coordinate: locationData.coordinate

        sourceItem: Image {
            id: pointMarker
            source: "../resources/marker_blue.png"
}
}
}

Mit diesen drei Objekten haben wir genug, um Geocode-Antworten zu empfangen und sie auf unserer Karte anzuzeigen. Der letzte Teil besteht darin, die eigentliche Geocode-Anfrage zu senden.

Um eine Geocode-Anfrage zu senden, erstellen wir zunächst ein Address Objekt und füllen es mit den gewünschten Parametern aus.

Address {
    id :fromAddress
    street: "Sandakerveien 116"
    city: "Oslo"
    country: "Norway"
    state : ""
    postalCode: "0484"
}

Dann setzen wir geocodeModel.query auf das ausgefüllte Address, und rufen update() auf GeocodeModel auf.

// send the geocode request
geocodeModel.query = fromAddress
geocodeModel.update()

Wegbeschreibung und Reiserouten

Ähnlich wie GeocodeModel verfügt auch Qt Location über den Typ RouteModel, der es ermöglicht, Informationen über Routen (z. B. Wegbeschreibungen) zwischen zwei oder mehr Punkten zu empfangen und mit einem Map zu verwenden.

Auch hier instanziieren wir die RouteModel als eine Eigenschaft unserer Karte:

RouteModel {
    id: routeModel
    plugin : view.map.plugin
    query:  RouteQuery {
        id: routeQuery
    }
    onStatusChanged: {
        if (status == RouteModel.Ready) {
            switch (count) {
            case 0:
                // technically not an error
                view.routeError()
                break
            case 1:
                view.showRouteList()
                break
            }
        } else if (status == RouteModel.Error) {
            view.routeError()
        }
    }
}

Um den Inhalt eines Modells für den Benutzer anzuzeigen, benötigen wir eine Ansicht. Auch hier verwenden wir eine MapItemView, um die Routen als Objekte auf der Karte darzustellen:

MapItemView {
    parent: view.map
    model: routeModel
    delegate: routeDelegate

Um als Vorlage für die Objekte zu dienen, die die Ansicht erstellen soll, erstellen wir eine Delegatenkomponente:

Component {
    id: routeDelegate

    MapRoute {
        id: route
        route: routeData
        line.color: "#46a2da"
        line.width: 5
        smooth: true
        opacity: 0.8

Da das Modell, die Ansicht und der Delegat nun vollständig sind, fehlt nur noch eine Art von Kontrolle über das Modell, um den Prozess der Routenanfrage zu starten. Im einfachsten Fall können wir eine Route-Anfrage mit zwei bereits verfügbaren coordinates ausfüllen:

property variant fromCoordinate: QtPositioning.coordinate(59.9483, 10.7695)
property variant toCoordinate: QtPositioning.coordinate(59.9645, 10.671)

Im nächsten Schnipsel zeigen wir, wie man das Anfrageobjekt einrichtet und das Modell anweist, sich zu aktualisieren. Außerdem weisen wir die Karte an, sich auf die Startkoordinate für unsere Routing-Anfrage zu zentrieren.

// clear away any old data in the query
routeQuery.clearWaypoints();
// add the start and end coords as waypoints on the route
routeQuery.addWaypoint(startCoordinate)
routeQuery.addWaypoint(endCoordinate)
routeQuery.travelModes = RouteQuery.CarTravel
routeQuery.routeOptimizations = RouteQuery.FastestRoute
routeModel.update();
// center the map on the start coord
view.map.center = startCoordinate;

Dies ist alles, was erforderlich ist, um eine Route auf der Karte anzuzeigen. Es ist jedoch auch nützlich, die schriftliche Wegbeschreibung und Erläuterung der Reiseroute abrufen zu können. Im Beispiel werden diese in einem Element ListView angezeigt. Um diesen Inhalt zu erstellen, verwenden wir ein Standardpaar aus ListModel und ListView. Die Daten im ListModel werden aus der Ausgabe des routeModel erstellt:

ListView {
    interactive: true
    model: ListModel { id: routeInfoModel }
    header: RouteListHeader {}
    delegate:  RouteListDelegate{
        routeIndex.text: index + 1
        routeInstruction.text: instruction
        routeDistance.text: distance
    }
}

Innerhalb des RouteModel, wie Sie oben sehen können, fügen wir einen onStatusChanged Handler hinzu, der den showRouteList() aufruft, der das routeInfoModel aktualisiert:

routeInfoModel.clear()
if (routeModel.count > 0) {
    for (var i = 0; i < routeModel.get(0).segments.length; i++) {
        routeInfoModel.append({
            "instruction": routeModel.get(0).segments[i].maneuver.instructionText,
             "distance": Helper.formatDistance(routeModel.get(0).segments[i].maneuver.distanceToNextInstruction)
        });
    }
}

Beispielprojekt @ code.qt.io