Visionneuse de carte (QML)

Il s'agit d'un vaste exemple 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 de fonctionnalité avec des extraits de code.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt CreatorOuvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

L'exemple peut fonctionner avec tous les plugins de services géographiques disponibles. Toutefois, certains plugins peuvent nécessiter des éléments supplémentaires plugin parameters pour fonctionner correctement. Plugin parameters peut être transmis sur la ligne de commande à l'aide de l'argument --plugin, qui se présente sous la forme suivante :

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

Reportez-vous à la documentation de chacun des plugins de géoservices pour plus de détails sur les paramètres de plugin qu'ils prennent en charge. Le plugin par défaut utilisé dans cet exemple est Qt Location Open Street Map Plugin, qui ne nécessite aucun paramètre.

Vue d'ensemble

Types QML présentés dans cet exemple :

• Affichage d'une carte
  • Map
  • MapView
  • coordonnées
• Recherche d'une adresse
  • GeocodeModel
  • MapItemView
  • MapCircle
• Directions et itinéraires
  • RouteModel
  • MapRoute

Affichage d'une carte

L'affichage d'une carte à l'écran s'effectue à l'aide du 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
    }
}

Le type MapView se compose d'un type map et l'étend pour offrir des capacités de navigation de base. Dans cet exemple, nous donnons à la carte une coordonnée centrale initiale avec une latitude et une longitude définies. Nous avons également fixé le niveau de zoom initial à 50 % (à mi-chemin entre le maximum et le minimum).

Recherche d'une adresse (géocodage)

La localisation d'une adresse ou d'un lieu sur la carte fait appel à un processus appelé géocodage. Pour effectuer une opération de géocodage, nous devons d'abord ajuster notre objet Map afin de pouvoir recevoir le résultat.

La réception des résultats du géocodage se fait par l'intermédiaire de 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 GeocodeModel, nous utilisons un objet MapItemView:

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

MapItemView utilise un objet appelé delegate qui sert de modèle pour les éléments qu'il crée. Cet objet peut contenir n'importe quel objet cartographique, mais dans le cas présent, nous affichons un MapQuickItem qui contient 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 suffisamment d'éléments pour recevoir des réponses de géocodage et les afficher sur notre carte. La dernière étape consiste à envoyer la demande de géocodage proprement dite.

Pour envoyer une demande de géocode, nous créons d'abord un objet Address et le remplissons avec les paramètres souhaités.

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

Ensuite, nous définissons geocodeModel.query avec l'objet Address, et nous appelons update() sur GeocodeModel.

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

Itinéraires et itinéraires de voyage

Tout comme GeocodeModel, Qt Location dispose également du type RouteModel, qui permet de recevoir et d'utiliser des informations sur les itinéraires (par exemple, les itinéraires de conduite) entre deux ou plusieurs points, à l'aide d'un objet Map.

Ici encore, nous instancions le type 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 de plus, nous utiliserons une vue 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 que la vue crée, 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 terminés, le seul composant manquant est une sorte de contrôle sur le modèle pour lancer le processus de demande d'itinéraires. Dans le cas le plus simple, nous pouvons remplir une demande d'itinéraire en utilisant deux coordonnées déjà disponibles :

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

Dans l'extrait 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 la coordonnée de départ de notre demande 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 qui est nécessaire pour afficher un itinéraire sur la carte. Cependant, il est également utile de pouvoir récupérer les instructions é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 ListModel et ListView. Les données du modèle ListModel sont construites à partir des données de sortie du modèle 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'élément RouteModel, comme vous pouvez le voir ci-dessus, nous ajoutons un gestionnaire onStatusChanged, qui appelle l'élément showRouteList() qui met à jour l'élément 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