QML-Karten

Übersicht

Der Typ „ Map “ ermöglicht die Anzeige einer Karte und das Platzieren von Objekten auf der Karte. Verschiedene Sehenswürdigkeiten können definiert und zur Anzeige auf der Karte hinzugefügt werden. Außerdem verfügt das „ Map “ über Funktionen zur Steuerung der Kartenanzeige. Mit dem „Map“-Element können Sie die Karte zentrieren, zoomen, mit zwei Fingern zoomen und das Element wischbar machen.

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

Position auf der Karte

Alle Positions-APIs sind Teil des Moduls „ QtPositioning “. Die grundlegende Positionsinformation ist das „ geoCoordinate “. Ein „ geoCoordinate “ kapselt die Daten für Breitengrad, Längengrad und Höhe des Standorts. Die Höhe wird in Metern angegeben. Es gibt außerdem eine Methode zur Ermittlung der Entfernung zu einem anderen „ geoCoordinate “. Der Typ „ geoCoordinate “ kann ebenfalls in einem „ Location “-Element enthalten sein; dieses enthält zudem Informationen zur Größe eines Begrenzungsrahmens, um eine ausreichende Nähe zum Standort zu ermitteln, sowie eine Standortadresse.

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

Geokodierung ist die Ableitung geografischer Koordinaten (Breiten- und Längengrad) aus anderen geografischen Referenzen zu den Standorten. Dies kann beispielsweise eine Straßenadresse sein. Auch eine umgekehrte Geokodierung ist möglich, bei der eine Straßenadresse zur Bestimmung einer geografischen Koordinate verwendet wird. Die Geokodierung erfolgt mithilfe des Typs „ GeocodeModel “.

Die folgenden Code-Beispiele sind ein kleiner Ausschnitt aus der Komponente „ map “ im Beispiel „Map Viewer (QML) “. Die Code-Schnipsel veranschaulichen die Deklaration der Komponente „ GeocodeModel “.

Im Codeausschnitt sehen wir, dass die ` GeocodeModel ` das Plugin sowie zwei Signal-Handler enthält. Einer dient zur Erkennung von Statusänderungen onStatusChanged und der andere zur 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 aus einem übergeordneten Codeabschnitt aufgerufen. In diesem Codeausschnitt 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"
}

Der „ Address “ wird später in einer Abfrage an die „ GeocodeModel “ verwendet, um die geografische „ coordinates “ zu verarbeiten und zu ermitteln.

// 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 unterteilt. Am Ende jedes Segments befindet sich ein Knotenpunkt, 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 und wie man auf das nächste Segment gelangt, sofern es eines gibt. Ein Manöver enthält also Navigationsinformationen, zum Beispiel „jetzt rechts abbiegen“.

Um eine geeignete Route zu finden, müssen wir die Methode „ RouteQuery “ verwenden, um die Auswahlkriterien zu definieren und gegebenenfalls erforderliche Zwischenziele hinzuzufügen. Die Methode „ RouteModel “ sollte eine Liste von „ routeSegments“ zurückgeben, die die Route zum Ziel definieren, einschließlich Navigationshinweisen an den Übergängen zwischen den Segmenten, die als „ routeManeuvers“ bezeichnet werden.

Es gibt zahlreiche Optionen, die Sie der Abfrage hinzufügen können, um die Kriterien einzugrenzen. Zu den Eigenschaften von „ RouteQuery “ gehören unter anderem

Im folgenden Beispiel wird ein Standard- RouteQuery innerhalb von „ RouteModel “ deklariert.

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, wie beispielsweise den Startpunkt der Route, einige Wegpunkte und das Ziel. Alle diese Orte sind Wegpunkte, sodass die Orte vom Start bis zum Ziel als eine Abfolge von Wegpunkten eingegeben werden. Anschließend können weitere Abfrageeigenschaften festgelegt werden, die möglicherweise spezifisch für diese Fahrt sind.

// 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 abzurufen 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 mithilfe eines Codes mit Werten gefüllt werden, der die Segmente durchläuft und dabei die Segmentlänge, den Anweisungstext sowie die Entfernung zur nächsten Anweisung extrahiert. Die extrahierten Daten werden bei der Abfrage für die Anzeige formatiert.

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 Flick

Das Element „ Map “ unterstützt zudem Benutzerinteraktionen mit der Karte mittels Berührungs- und Mausgesten. Dazu gehören Funktionen wie Wischen zum Verschieben und Auf- und Zuziehen zum Zoomen.

Das Aktivieren und Konfigurieren von Pinch und Flickable ist innerhalb des Typs „ MapView “ ganz 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);
    }
}
}

Das Zoomen kann auch über andere Objekte wie Schieberegler gesteuert werden, die an den „Map zoomLevel “ gebunden sind.

QML-Typen

Karten

Geokodierung

Routenplanung

Beispiel

Die obigen Codeausschnitte stammen aus dem Beispiel „Map Viewer (QML) “.