Cartes QML

Présentation

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 être affichés. De plus, l’ Map dispose de fonctionnalités permettant de contrôler l’affichage de la carte. Grâce à l’élément « Map », vous pouvez centrer la carte, zoomer, pincer et rendre l’élément « flickable ».

Les lieux à ajouter à la carte sont des MapItems. La position de l’élément est définie par un geoCoordinate qui inclut la latitude, la longitude et l’altitude. L’élément s’affiche alors automatiquement après avoir été ajouté à l’ Map.

Position sur la carte

Toutes les API de position font partie du module QtPositioning. L’élément de base des informations de position est l’ geoCoordinate. Un geoCoordinate encapsule les données de latitude, de longitude et d’altitude du lieu. L'altitude est exprimée en mètres. Elle dispose également d’une méthode permettant de déterminer la distance par rapport à un autre geoCoordinate. Le type geoCoordinate peut également être contenu dans un élément Location; celui-ci contiendra alors des informations sur la taille d’un cadre de délimitation permettant de déterminer si un emplacement est suffisamment proche, ainsi que l’adresse de cet emplacement.

Voici un exemple de client utilisant un position source pour centrer une 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

Le géocodage consiste à déduire des coordonnées géographiques (latitude et longitude) à partir d’autres références géographiques relatives à des lieux. Il peut s’agir, par exemple, d’une adresse postale. Le géocodage inversé est également possible : une adresse postale est alors utilisée pour déterminer des coordonnées géographiques. Le géocodage s’effectue à l’aide du type ` GeocodeModel `.

Les exemples de code suivants constituent une petite partie du composant map de l’exemple Map Viewer (QML). Ces extraits de code illustrent la déclaration du composant GeocodeModel.

Dans cet extrait, on constate que le composant ` 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 fonctionnalités de géocodage sont appelées à partir d’un code de niveau supérieur. Dans cet extrait, on voit un objet ` Address ` renseigné avec les paramètres souhaités.

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

L’ Address est ensuite utilisé dans une requête que l’ GeocodeModel doit traiter afin de déterminer l’ coordinates géographique.

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

Navigation

Une fonction très importante du type Map est la navigation d’un lieu à une destination, avec d’éventuels points de passage 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 le temps et la distance jusqu’à la fin du segment. Les manœuvres contiennent des informations sur la marche à suivre, notamment comment accéder au segment suivant, s’il y en a un. Une manœuvre contient donc des informations de navigation, par exemple « tournez à droite maintenant ».

Pour trouver un itinéraire adapté, nous devrons utiliser une requête « RouteQuery » afin de définir les critères de sélection et d’ajouter les points de passage requis. L’ RouteModel devrait renvoyer une liste d’ routeSegments définissant l’itinéraire vers la destination, accompagnée de consignes de navigation aux jonctions entre les segments, appelées « routeManeuvers».

Il existe de nombreuses options que vous pouvez ajouter à la requête pour affiner les critères. Les propriétés de la méthode RouteQuery peuvent inclure

Dans l’exemple suivant, une requête par défaut de type « RouteQuery » est déclarée dans 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 certaines 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 ; ainsi, le trajet du départ à l’arrivée sera saisi sous la forme d’une séquence de points de passage. D’autres propriétés de requête spécifiques à ce trajet peuvent ensuite être définies.

// 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 ` ListModel ` de ` routeInfoModel ` est utilisé pour récupérer les résultats de la requête et construire une liste adaptée à l’affichage.

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

Le ListModel routeInfoModel peut être renseigné à l’aide d’un code qui parcourt les segments en boucle pour extraire la longueur de chaque segment, le texte des instructions et la distance jusqu’à l’instruction suivante. Les données extraites sont formatées pour l’affichage au fur et à mesure de leur récupération.

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 cet exemple, consultez l’exemple « Map Viewer (QML) ».

Zoom, pincement et balayage

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

L’activation et la configuration du pincement et du balayage sont faciles à réaliser au sein du 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, grâce à une liaison avec l’ zoomLevel de la carte.

Types QML

Cartes

Géocodage

Calcul d'itinéraire

Exemple

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