QML-Karten

Übersicht

Der Typ Map ermöglicht die Anzeige einer Karte und die Platzierung von Objekten innerhalb der Karte. Es können verschiedene Points of Interest definiert und der Karte zur Anzeige hinzugefügt werden. Außerdem verfügt Map über Funktionen zur Steuerung der Kartendarstellung. Mit dem Element "Karte" können Sie die Karte zentrieren, zoomen, aufziehen und das Element flickbar machen.

Die Orte, die der Karte hinzugefügt werden, sind MapItems. Die Position des Elements wird durch eine coordinate definiert, die Breitengrad, Längengrad und Höhe enthält. Das Element wird dann automatisch angezeigt, nachdem es der Map hinzugefügt wurde.

Position auf der Karte

Alle Positions-APIs sind Teil des Moduls QtPositioning. Die grundlegende Positionsinformation ist die coordinate. Eine Koordinate enthält Daten für den Breitengrad, den Längengrad und die Höhe des Standortes. Die Höhe wird in Metern angegeben. Sie enthält auch eine Methode zur Bestimmung der Entfernung zu einem anderen coordinate. Der Typ coordinate kann auch in einem Element Location enthalten sein, das auch Informationen über die Größe eines Begrenzungsrahmens (Bounding Box) enthält, um eine ausreichende Nähe zum Standort und eine Standortadresse zu bestimmen.

Hier ist ein Beispiel für einen Client, der ein position source verwendet, um ein map auf die aktuelle Position zu zentrieren:

import QtPositioning
import QtLocation
...

Rectangle {

    Map {
        id: map
        // initialize map
        ...
    }

    PositionSource {
        onPositionChanged: {
            // center the map on the current position
            map.center = position.coordinate
        }
    }
}

Geokodierung

Unter Geokodierung versteht man die Ableitung von geografischen Koordinaten (Breiten- und Längengrad) aus anderen geografischen Referenzen für Standorte. Dies kann zum Beispiel eine Straßenadresse sein. Eine umgekehrte Geokodierung ist ebenfalls möglich, wobei eine Straßenadresse zur Bestimmung einer geografischen Koordinate verwendet wird. Die Geokodierung wird mit Hilfe des Typs GeocodeModel durchgeführt.

Die folgenden Codebeispiele sind ein kleiner Teil der Komponente map im Map Viewer (QML) Beispiel. Die Schnipsel demonstrieren die Deklaration der Komponente GeocodeModel.

In dem Schnipsel sehen wir, dass [QML]{GeocodeModel} das Plugin und zwei Signalhandler enthält. Einer für Statusänderungen onStatusChanged und der andere für die Aktualisierung der Zentrierung des Map-Objekts onLocationsChanged.

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
        }
    }
}

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

Die Geokodierungsfunktionen werden von einer höheren Code-Ebene aus aufgerufen. In diesem Schnipsel sehen wir ein Address Objekt, das mit den gewünschten Parametern gefüllt ist.

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

Die Address wird später in einer Abfrage für die GeocodeModel verwendet, um die geografische coordinates zu verarbeiten und zu bestimmen.

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

Navigation

Eine sehr wichtige Funktion des Typs Map ist die Navigation von einem Ort zu einem Ziel mit möglichen Wegpunkten entlang der Route. Die Route wird in eine Reihe von Segmenten aufgeteilt. Am Ende jedes Segments befindet sich ein Scheitelpunkt, der als Manöver bezeichnet wird. Die Segmente enthalten Informationen über die Zeit und die Entfernung bis zum Ende des Segments. Die Manöver enthalten Informationen darüber, was als Nächstes zu tun ist, wie man zum nächsten Segment gelangt, falls es ein solches gibt. Ein Manöver enthält also Navigationsinformationen, z. B. "Jetzt rechts abbiegen".

Um eine geeignete Route zu finden, müssen wir eine RouteQuery verwenden, um die Auswahlkriterien zu definieren und alle erforderlichen Wegpunkte hinzuzufügen. RouteModel sollte eine Liste von routeSegmentzurückgeben, die die Route zum Ziel definiert, einschließlich Navigationshinweisen an den Verbindungsstellen zwischen den Segmenten, genannt routeManeuvers

Es gibt viele Optionen, die Sie der Abfrage hinzufügen können, um die Kriterien einzugrenzen. Die RouteQuery Eigenschaften können umfassen

Im folgenden Beispiel wird eine Standardroute RouteQuery unter RouteModel angegeben.

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()
        }
    }
}

Der Benutzer gibt einige Informationen ein, z. B. den Startpunkt der Route, einige Wegpunkte und das Ziel. Alle diese Orte sind Wegpunkte, so dass die Orte vom Start bis zum Ziel als eine Folge von Wegpunkten eingegeben werden. Dann können andere Abfrageeigenschaften festgelegt werden, die für diese Reise spezifisch sein können.

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

Das routeInfoModel ListModel wird verwendet, um die Ergebnisse der Abfrage zu erfassen und eine geeignete Liste für die Anzeige zu erstellen.

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

Das ListModel routeInfoModel kann mit Hilfe eines Codes mit Werten gefüllt werden, der in einer Schleife die Segmente durchläuft und die Segmentlänge, den Text der Anweisung und die Entfernung zur nächsten Anweisung extrahiert. Die extrahierten Daten werden für die Anzeige formatiert, sobald sie abgerufen werden.

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)
        });
    }
}

Weitere Informationen zu diesem Beispiel finden Sie im Beispiel Map Viewer (QML).

Zoom, Pinch und Flickable

Das Element Map unterstützt auch die Interaktion der Benutzeroberfläche mit der Karte durch taktile und Mausgesten. Dazu gehören Funktionen wie das Streichen zum Schwenken und das Auf- und Zuziehen zum Zoomen.

Das Aktivieren und Konfigurieren von "Pinch" und "Flickable" ist innerhalb des MapView Typs einfach.

MapView {
    id: view
TapHandler {
    id: tapHandler
    property variant lastCoordinate
    acceptedButtons: Qt.LeftButton | Qt.RightButton

    onPressedChanged: (eventPoint, button) => {
        if (pressed) {
            lastCoordinate = view.map.toCoordinate(tapHandler.point.position)
        }
    }

    onSingleTapped: (eventPoint, button) => {
            if (button === Qt.RightButton) {
                showMainMenu(lastCoordinate)
            }
    }

    onDoubleTapped: (eventPoint, button) => {
        var preZoomPoint = view.map.toCoordinate(eventPoint.position);
        if (button === Qt.LeftButton) {
            view.map.zoomLevel = Math.floor(view.map.zoomLevel + 1)
        } else if (button === Qt.RightButton) {
            view.map.zoomLevel = Math.floor(view.map.zoomLevel - 1)
        }
        var postZoomPoint = view.map.toCoordinate(eventPoint.position);
        var dx = postZoomPoint.latitude - preZoomPoint.latitude;
        var dy = postZoomPoint.longitude - preZoomPoint.longitude;

        view.map.center = QtPositioning.coordinate(view.map.center.latitude - dx,
                                                   view.map.center.longitude - dy);
    }
}
}

Der Zoom kann auch durch andere Objekte wie Schieberegler gesteuert werden, mit Bindung an die Karte zoomLevel.

QML-Typen

Karten

Geokodierung

Routenplanung

Beispiel

Die obigen Ausschnitte stammen aus dem Beispiel des Map Viewers (QML).