Mapas QML

Descripción general

El tipo Map permite mostrar un mapa y colocar objetos dentro del mismo. Se pueden definir varios puntos de interés y añadirlos al mapa para su visualización. Además, Map dispone de funciones para controlar cómo se muestra el mapa. Con el elemento Mapa se puede centrar el mapa, hacer zoom, pellizcar y hacer que el elemento se pueda desplazar.

Los lugares que se añaden al mapa son MapItems. La posición del elemento se define mediante una coordenada que incluye la latitud, la longitud y la altitud. El elemento se muestra automáticamente una vez añadido a Map.

Posición en el mapa

Todas las API de posición forman parte del módulo QtPositioning. La información básica sobre la posición es la coordenada. Una coordenada encapsula los datos de latitud, longitud y altitud del lugar. La altitud se expresa en metros. También tiene un método para determinar la distancia a otra coordenada. El tipo de coordenada también se puede mantener dentro de un elemento Location, este también tendrá información sobre un tamaño de cuadro delimitador para determinar la proximidad suficiente a la ubicación y una dirección de ubicación.

A continuación se muestra un ejemplo de un cliente que utiliza un position source para centrar un map en la posición actual:

import QtPositioning
import QtLocation
...

Rectangle {

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

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

Geocodificación

Lageocodificación es la derivación de coordenadas geográficas (latitud y longitud) a partir de otras referencias geográficas de las ubicaciones. Por ejemplo, puede tratarse de la dirección de una calle. También es posible realizar una geocodificación inversa utilizando una dirección para determinar una coordenada geográfica. La geocodificación se realiza utilizando el tipo GeocodeModel.

Los siguientes ejemplos de código son una pequeña parte del componente map del ejemplo Visor de mapas (QML). Los fragmentos muestran la declaración del componente GeocodeModel.

En el fragmento vemos que el [QML]{GeocodeModel} contiene el plugin y dos manejadores de señales. Uno para los cambios de estado onStatusChanged y el otro para actualizar el centrado del objeto 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
}

Las funciones de geocodificación se llaman desde un fragmento de código de nivel superior. En este fragmento vemos un objeto Address rellenado con los parámetros deseados.

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

El Address se utiliza posteriormente en una consulta para que el GeocodeModel procese y determine las coordenadas geográficas.

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

Navegación

Una función muy importante del tipo Map es la navegación desde un lugar a un destino con posibles waypoints a lo largo de la ruta. La ruta se dividirá en una serie de segmentos. Al final de cada segmento hay un vértice llamado maniobra. Los segmentos contienen información sobre el tiempo y la distancia hasta el final del segmento. Las maniobras contienen información sobre qué hacer a continuación, cómo llegar al siguiente segmento, si lo hay. Así, una maniobra contiene información de navegación, por ejemplo "gire ahora a la derecha".

Para encontrar una ruta adecuada tendremos que utilizar un RouteQuery para definir los criterios de selección y añadir los waypoints necesarios. El RouteModel debe devolver una lista de routeSegments que defina la ruta al destino completa con consejos de navegación en las uniones entre segmentos, llamados routeManeuvers

Hay muchas opciones que puede añadir a la consulta para limitar los criterios. Las propiedades de RouteQuery pueden incluir

En el siguiente ejemplo se declara un RouteQuery por defecto dentro 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()
        }
    }
}

El usuario introduce algunos datos, como el punto de partida de la ruta, algunos waypoints y el destino. Todas estas ubicaciones son puntos de paso, por lo que las ubicaciones desde el inicio hasta el final se introducirán como una secuencia de puntos de paso. Luego se pueden establecer otras propiedades de consulta que pueden ser específicas para este viaje.

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

El ListModel routeInfoModel se utiliza para obtener los resultados de la consulta y construir una lista adecuada para su visualización.

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

El ListModel routeInfoModel puede rellenarse con valores utilizando un código, que realiza un bucle a través de los segmentos extrayendo la longitud del segmento, el texto de la instrucción y la distancia hasta la siguiente instrucción. Los datos extraídos se formatean para su visualización a medida que se recuperan.

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

Para más información sobre el ejemplo, consulte el ejemplo Visor de mapas (QML ).

Zoom, pellizco y desplazamiento

El elemento Map también admite interacciones de la interfaz de usuario con el mapa mediante gestos táctiles y del ratón. Es decir, funciones como deslizar para desplazarse o pellizcar para hacer zoom.

Habilitar y configurar los gestos de pellizcar y deslizar es fácil dentro del tipo 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);
    }
}
}

El zoom también puede controlarse mediante otros objetos, como controles deslizantes, vinculados al mapa zoomLevel.

Tipos QML

Mapas

Geocodificación

Rutas

Ejemplo

Los fragmentos anteriores se han tomado del ejemplo Visor de mapas (QML ).