Cartes QML

Vue d'ensemble

Le type Map permet d'afficher une carte et d'y placer des objets. Divers points d'intérêt peuvent être définis et ajoutés à la carte pour affichage. Le site Map propose également des fonctions permettant de contrôler l'affichage de la carte. L'élément Carte permet de centrer la carte, de zoomer, de pincer et de faire vaciller l'élément.

Les endroits à ajouter à la carte sont des MapItems. La position de l'élément est définie par une coordonnée qui comprend la latitude, la longitude et l'altitude. L'élément est affiché automatiquement une fois qu'il a été ajouté au site Map.

Position sur la carte

Toutes les API de position font partie du module QtPositioning. L'élément de base de l'information sur la position est la coordonnée. Une coordonnée contient les données relatives à la latitude, à la longitude et à l'altitude de l'emplacement. L'altitude est exprimée en mètres. Elle dispose également d'une méthode permettant de déterminer la distance par rapport à une autre coordonnée. Le type de coordonnées peut également être contenu dans un élément Location, qui contiendra également des informations sur la taille d'une zone de délimitation afin de déterminer la proximité suffisante de l'emplacement et l'adresse de l'emplacement.

Voici un exemple de client qui utilise un élément position source pour centrer un élément map sur la position actuelle :

import QtPositioning
import QtLocation
...

Rectangle {

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

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

Géocodage

Legéocodage consiste à dériver des coordonnées géographiques (latitude et longitude) à partir d'autres références géographiques aux lieux. Il peut s'agir, par exemple, d'une adresse postale. Le géocodage inverse est également possible, l'adresse étant utilisée pour déterminer une coordonnée géographique. Le géocodage est effectué à l'aide du type GeocodeModel.

Les exemples de code suivants sont une petite partie du composant map dans l'exemple Map Viewer (QML). Ils illustrent la déclaration du composant GeocodeModel.

Dans l'extrait, nous voyons que le [QML]{GeocodeModel} contient le plugin et deux gestionnaires de signaux. L'un pour les changements d'état onStatusChanged et l'autre pour mettre à jour le centrage de l'objet Map 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
}

Les fonctions de géocodage sont appelées à partir d'un morceau de code de niveau supérieur. Dans cet extrait, nous voyons un objet Address rempli avec les paramètres souhaités.

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

L'objet Address est ensuite utilisé dans une requête pour que l'objet GeocodeModel traite et détermine les coordonnées géographiques.

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

Navigation

Une fonction très importante du type Map est la navigation d'un endroit à une destination avec des points de passage possibles le long de l'itinéraire. L'itinéraire sera divisé en une série de segments. À la fin de chaque segment se trouve un sommet appelé manœuvre. Les segments contiennent des informations sur la durée et la distance jusqu'à la fin du segment. Les manœuvres contiennent des informations sur ce qu'il faut faire ensuite, sur la manière d'atteindre le segment suivant, s'il y en a un. Une manœuvre contient donc des informations de navigation, par exemple "tourne à droite maintenant".

Pour trouver un itinéraire approprié, nous devrons utiliser un site RouteQuery pour définir les critères de sélection et ajouter les points de passage requis. Le site RouteModel doit renvoyer une liste de routeSegments qui définit l'itinéraire vers la destination, avec des conseils de navigation aux points de jonction entre les segments, appelés routeManeuvers

De nombreuses options peuvent être ajoutées à la requête pour restreindre les critères. Les propriétés de RouteQuery peuvent inclure

Dans l'exemple suivant, un itinéraire par défaut RouteQuery est déclaré à l'intérieur de RouteModel.

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

L'utilisateur saisit des informations telles que le point de départ de l'itinéraire, quelques points de passage et la destination. Tous ces emplacements sont des points de passage, de sorte que les emplacements du début à la fin seront saisis sous la forme d'une séquence de points de passage. Il est ensuite possible de définir d'autres propriétés de requête spécifiques à ce voyage.

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

Le modèle de liste routeInfoModel est utilisé pour récupérer les résultats de la requête et construire une liste appropriée pour l'affichage.

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

Le modèle ListModel routeInfoModel peut être rempli de valeurs à l'aide d'un code qui parcourt les segments en extrayant la longueur du segment, le texte de l'instruction et la distance jusqu'à l'instruction suivante. Les données extraites sont formatées pour être affichées au fur et à mesure qu'elles sont récupérées.

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

Pour plus d'informations sur l'exemple, voir l'exemple de visualisation de carte (QML).

Zoom, Pinch et Flickable

L'élément Map prend également en charge les interactions de l'interface utilisateur avec la carte à l'aide de gestes tactiles et de la souris. Il s'agit de fonctions telles que le balayage pour effectuer un panoramique ou le pincement pour effectuer un zoom.

Il est facile d'activer et de configurer les fonctions de pincement et de basculement dans le type MapView.

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

Le zoom peut également être contrôlé par d'autres objets tels que des curseurs, en se liant à la carte zoomLevel.

Types QML

Cartes

Géocodage

Routage

Exemple d'un modèle d'itinéraire

Les extraits ci-dessus sont tirés de l'exemple Map Viewer (QML).