Visor de mapas (QML)

Se trata de un amplio ejemplo que abarca muchos usos básicos de los mapas, el posicionamiento y los servicios de navegación en Qt Location. Esta página está dividida en secciones que cubren cada una de estas áreas de funcionalidad con fragmentos del código.

Ejecución del ejemplo

Para ejecutar el ejemplo desde Qt Creatorabra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulta Qt Creator: Tutorial: Construir y ejecutar.

El ejemplo puede funcionar con cualquiera de los plugins de servicios geográficos disponibles. Sin embargo, algunos plugins pueden requerir plugin parameters adicional para funcionar correctamente. Plugin parameters se puede pasar en la línea de comandos utilizando el argumento --plugin, que toma la forma:

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

Consulte la documentación de cada uno de los plugins de servicios geográficos para obtener más información sobre los parámetros que admiten. El complemento predeterminado utilizado en este ejemplo es Qt Location Open Street Map Plugin, que no requiere ningún parámetro.

Descripción general

Tipos QML mostrados en este ejemplo:

• Visualización de un mapa
  • Map
  • MapView
  • coordenadas
• Encontrar una dirección
  • GeocodeModel
  • MapItemView
  • MapCircle
• Indicaciones y rutas de viaje
  • RouteModel
  • MapRoute

Visualización de un mapa

Para dibujar un mapa en pantalla se utiliza el tipo MapView, como se muestra a continuación.

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

El MapView se compone de un map y lo amplía para ofrecer capacidades básicas de navegación. En este ejemplo, damos al mapa una coordenada central inicial con una latitud y longitud establecidas. También fijamos el nivel de zoom inicial en el 50% (a medio camino entre el máximo y el mínimo).

Encontrar una dirección (Geocodificación)

Para localizar una determinada dirección o lugar en el mapa se utiliza un proceso denominado geocodificación. Para realizar una operación de geocodificación, primero tenemos que ajustar nuestro objeto Mapa para poder recibir el resultado.

La recepción de los resultados de la geocodificación se realiza a través de un 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
        }
    }
}

Para mostrar el contenido del GeocodeModel utilizamos un MapItemView:

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

MapItemView utiliza un objeto llamado delegate que actúa como plantilla para los elementos que crea. Éste puede contener cualquier objeto de mapa que se desee, pero en este caso mostramos un MapQuickItem que contiene la imagen de un marcador:

Component {
    id: pointDelegate

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

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

Con estos tres objetos, tenemos suficiente para recibir respuestas Geocode y mostrarlas en nuestro Mapa. La pieza final es enviar la solicitud de Geocode propiamente dicha.

Para enviar una solicitud de geocodificación, primero creamos un objeto Address y lo rellenamos con los parámetros deseados.

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

A continuación, establecemos geocodeModel.query en Address y llamamos a update() en GeocodeModel.

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

Direcciones y rutas de viaje

De forma similar a GeocodeModel, Qt Location también cuenta con el tipo RouteModel, que permite recibir información sobre rutas (por ejemplo, indicaciones para llegar) entre dos o más puntos, y utilizarla con Map.

También en este caso, instanciamos el RouteModel como una propiedad de nuestro Mapa:

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

Para mostrar el contenido de un modelo al usuario, necesitamos una vista. Una vez más, utilizaremos MapItemView para mostrar las rutas como objetos en el mapa:

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

Para actuar como modelo de los objetos que deseamos que cree la vista, creamos un componente delegado:

Component {
    id: routeDelegate

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

Con el modelo, la vista y el delegado ahora completos, el único componente que falta es algún tipo de control sobre el modelo para iniciar el proceso de solicitud de rutas. En el caso más sencillo, podemos rellenar una solicitud de Ruta utilizando dos coordenadas ya disponibles:

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

En el siguiente fragmento, mostramos cómo configurar el objeto de solicitud e instruir al modelo para que se actualice. También ordenamos al mapa que se centre en la coordenada de inicio de nuestra solicitud de ruta.

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

Esto es todo lo que se requiere para mostrar una Ruta en el Mapa. Sin embargo, también es útil poder recuperar las indicaciones escritas y la explicación de la ruta de viaje. En el ejemplo, se muestran en un elemento ListView. Para crear este contenido, utilizamos un par ListModel y ListView estándar. Los datos del ListModel se construyen a partir de la salida del routeModel:

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

Dentro del RouteModel, como puedes ver arriba, añadimos un manejador onStatusChanged, que llama al showRouteList() que actualiza el 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)
        });
    }
}

Proyecto de ejemplo @ code.qt.io