Kartenanzeige (QML)

Es handelt sich um ein umfangreiches Beispiel, das viele grundlegende Anwendungsmöglichkeiten von Karten, Positionsbestimmung und Navigationsdiensten in „ Qt Location “ abdeckt. Diese Seite ist in Abschnitte unterteilt, die jeweils einen dieser Funktionsbereiche behandeln und Codeausschnitte enthalten.

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

• Qt Creator

  Öffnen Sie den Modus „ Welcome “ und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter Qt Creator: Tutorial: Erstellen und Ausführen.

• Qt Extension for Visual Studio Code

  Führen Sie den Befehl „ Qt: Open Qt examples “ über „ Command Palette “ aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen.

Das Beispiel funktioniert mit jedem der verfügbaren Geodienst-Plugins. Einige Plugins erfordern jedoch möglicherweise zusätzliche „ plugin parameters “, um korrekt zu funktionieren. „ Plugin parameters “ können über die Befehlszeile mit dem Argument „ --plugin “ übergeben werden, das folgende Form hat:

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

Einzelheiten dazu, welche Plugin-Parameter unterstützt werden, finden Sie in der Dokumentation der jeweiligen Geodienst-Plugins. Das in diesem Beispiel standardmäßig verwendete Plugin ist das „Qt Location Open Street Map Plugin“, das keine Parameter benötigt.

Übersicht

In diesem Beispiel gezeigte QML-Typen:

• Anzeigen einer Karte
  • Map
  • MapView
  • geoCoordinate
• Eine Adresse suchen
  • GeocodeModel
  • MapItemView
  • MapCircle
• Wegbeschreibungen und Routen
  • RouteModel
  • MapRoute

Anzeigen einer Karte

Das Zeichnen einer Karte auf dem Bildschirm erfolgt mithilfe des Typs „ 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 “ basiert auf dem Typ „ map “ und erweitert diesen um grundlegende Navigationsfunktionen. In diesem Beispiel legen wir für die Karte einen Anfangs geoCoordinate mit festgelegten Breiten- und Längengraden fest. Außerdem stellen wir die anfängliche Zoomstufe auf 50 % ein (auf halbem Weg zwischen dem Maximum und dem Minimum).

Eine Adresse suchen (Geokodierung)

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

Das Empfangen 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 des „ GeocodeModel “ anzuzeigen, verwenden wir ein „ MapItemView “:

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

MapItemView verwendet ein Objekt namens „ delegate “ als Vorlage für die Elemente, die es erstellt. Dieses kann jedes beliebige Kartenobjekt enthalten, aber in diesem Fall zeigen wir ein „ MapQuickItem “, 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 verfügen wir über alles, was nötig ist, um Geocode-Antworten zu empfangen und auf unserer Karte anzuzeigen. Der letzte Schritt 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.

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

Anschließend weisen wir „ geocodeModel.query “ dem ausgefüllten „ Address “ zu und rufen „update()“ für „ GeocodeModel “ auf.

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

Wegbeschreibungen und Reiserouten

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

Auch hier instanziieren wir den ` RouteModel ` als 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 dem Benutzer den Inhalt eines Modells anzuzeigen, benötigen wir eine Ansicht. Auch hier verwenden wir wieder eine ` MapItemView`, um die Routen als Objekte auf der Karte darzustellen:

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

Als Vorlage für die Objekte, die die Ansicht erstellen soll, erstellen wir eine Delegate-Komponente:

Component {
    id: routeDelegate

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

Nachdem das Modell, die Ansicht und die Delegat-Komponente nun fertiggestellt sind, fehlt als einzige Komponente noch eine Möglichkeit, das Modell zu steuern, um den Routenabfrageprozess zu starten. Im einfachsten Fall können wir eine Routenabfrage mithilfe von 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 Codeausschnitt zeigen wir, wie man das Anfrageobjekt einrichtet und das Modell anweist, eine Aktualisierung durchzuführen. Außerdem weisen wir die Karte an, die Startkoordinate unserer Routenanfrage in den Mittelpunkt zu rücken.

// 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;

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

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

Innerhalb des ` RouteModel` fügen wir, wie oben zu sehen, einen ` onStatusChanged `-Handler hinzu, der die Methode ` showRouteList() ` aufruft, welche wiederum die ` 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