Visualiseur de carte (QML)

Il s'agit d'un exemple complet couvrant de nombreuses utilisations de base des cartes, du positionnement et des services de navigation dans Qt Location. Cette page est divisée en sections couvrant chacun de ces domaines fonctionnels, accompagnées d'extraits de code.

Exécution de l'exemple

Vous pouvez exécuter l’exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l’exemple dans « Examples ». Pour plus d’informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.

L’exemple fonctionne avec n’importe quel plugin de services géographiques disponible. Cependant, certains plugins peuvent nécessiter des plugin parameters s supplémentaires pour fonctionner correctement. Plugin parameters peut être passé en ligne de commande à l’aide de l’argument --plugin, qui prend la forme suivante :

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

Reportez-vous à la documentation de chaque plugin de services géographiques pour plus de détails sur les paramètres pris en charge. Le plugin par défaut utilisé dans cet exemple est le plugin OpenStreetMap (Qt Location ), qui ne nécessite aucun paramètre.

Présentation

Types QML présentés dans cet exemple :

• Affichage d’une carte
  • Map
  • MapView
  • geoCoordinate
• Recherche d'une adresse
  • GeocodeModel
  • MapItemView
  • MapCircle
• Itinéraires et trajets
  • RouteModel
  • MapRoute

Afficher une carte

Pour dessiner une carte à l'écran, on utilise le type « MapView », comme illustré ci-dessous.

MapView {
    id: view
    map.zoomLevel: (maximumZoomLevel - minimumZoomLevel)/2
    map.center {
        // The Qt Company in Oslo
        latitude: 59.9485
        longitude: 10.7686
    }
}

L'MapView se compose d'un map et l'étend pour offrir des fonctionnalités de navigation de base. Dans cet exemple, nous définissons l'geoCoordinate e de centre initiale de la carte à l'aide d'une latitude et d'une longitude précises. Nous définissons également le niveau de zoom initial à 50 % (à mi-chemin entre le maximum et le minimum).

Recherche d’une adresse (géocodage)

Pour localiser une adresse ou un lieu précis sur la carte, on utilise un processus appelé géocodage. Afin d’effectuer une opération de géocodage, nous devons d’abord configurer notre objet Map pour qu’il puisse recevoir le résultat.

La réception des résultats du géocodage s’effectue via une méthode « 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
        }
    }
}

Pour afficher le contenu de l’ GeocodeModel, nous utilisons un MapItemView:

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

MapItemView utilise un objet appelé « delegate » qui sert de modèle aux éléments qu’il crée. Celui-ci peut contenir n’importe quel objet Map souhaité, mais dans ce cas précis, nous affichons un « MapQuickItem » contenant l’image d’un marqueur :

Component {
    id: pointDelegate

    MapQuickItem {
        id: point
        parent: view.map
        coordinate: locationData.coordinate

        sourceItem: Image {
            id: pointMarker
            source: "../resources/marker_blue.png"
        }
    }
}

Avec ces trois objets, nous disposons de tout ce qu’il faut pour recevoir les réponses de géocodage et les afficher sur notre carte. Il ne reste plus qu’à envoyer la requête de géocodage proprement dite.

Pour envoyer une requête de géocodage, nous créons d’abord un objet ` Address `, puis nous le renseignons avec les paramètres souhaités.

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

Ensuite, nous attribuons à ` geocodeModel.query ` l’` Address` renseigné, puis nous appelons la méthode `update()` sur ` GeocodeModel`.

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

Itinéraires et trajets

Tout comme l’ GeocodeModel, l’ Qt Location propose également le type RouteModel, qui permet de recevoir des informations sur les itinéraires (par exemple des itinéraires routiers) entre deux ou plusieurs points, et de les utiliser avec une Map.

Ici encore, nous instancions l’ RouteModel en tant que propriété de notre carte :

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

Pour afficher le contenu d’un modèle à l’utilisateur, nous avons besoin d’une vue. Une fois encore, nous utiliserons un MapItemView pour afficher les itinéraires sous forme d’objets sur la carte :

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

Pour servir de modèle aux objets que nous souhaitons voir créés par la vue, nous créons un composant délégué :

Component {
    id: routeDelegate

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

Le modèle, la vue et le délégué étant désormais prêts, il ne manque plus qu’un élément permettant de contrôler le modèle afin de lancer le processus de demande d’itinéraire. Dans le cas le plus simple, nous pouvons remplir une demande d’itinéraire à l’aide de deux objets ` coordinates` déjà disponibles :

property variant fromCoordinate: QtPositioning.coordinate(59.9483, 10.7695)
property variant toCoordinate: QtPositioning.coordinate(59.9645, 10.671)

Dans l’extrait de code suivant, nous montrons comment configurer l’objet de requête et demander au modèle de se mettre à jour. Nous demandons également à la carte de se centrer sur les coordonnées de départ de notre requête d’itinéraire.

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

C’est tout ce qu’il faut pour afficher un itinéraire sur la carte. Cependant, il est également utile de pouvoir récupérer les indications écrites et l’explication de l’itinéraire. Dans l’exemple, celles-ci sont affichées dans un élément ` ListView `. Pour créer ce contenu, nous utilisons une paire standard composée d’un `ListModel` et d’un ` ListView `. Les données du ` ListModel` sont générées à partir de la sortie du `routeModel` :

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

À l’intérieur de l’ RouteModel, comme vous pouvez le voir ci-dessus, nous ajoutons un gestionnaire d’ onStatusChanged, qui appelle la méthode showRouteList(), laquelle met à jour l’ routeInfoModel:

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

Exemple de projet @ code.qt.io