QML Карты

Обзор

Тип Map позволяет отображать карту и размещать объекты на ней. Можно определять и добавлять различные интересные точки на карту для отображения. Также тип Map имеет функции для управления отображением карты. С помощью элемента Map можно центрировать карту, изменять масштаб, выполнять масштабирование двумя пальцами и сделать элемент прокручиваемым.

Места, которые необходимо добавить на карту, являются MapItems. Положение элемента определяется координатами coordinate, включающими широту, долготу и высоту. Элемент автоматически отображается после добавления на карту Map.

Положение на карте

Все API позиционирования являются частью модуля QtPositioning. Основной информационной единицей позиционирования является координата. Координата encapsulates данные для широты, долготы и высоты над уровнем моря местоположения. Высота указывается в метрах. Она также имеет метод для определения расстояния до другой координаты. Тип координаты также может храниться в элементе Location, который также содержит информацию о размере ограничивающей рамки для определения достаточной близости к местоположению и адрес местоположения.

Вот пример клиента, который использует источник позиционирования, чтобы центрировать карту на текущем местоположении:

Rectangle {

    import QtPositioning 5.2
    import QtLocation 5.3
    ...

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

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

Геокодирование

Геокодирование — это получение географических координат (широты и долготы) из других географических ссылок на местоположения. Например, это может быть адрес улицы. Также возможно обратное геокодирование, когда адрес улицы используется для определения географических координат. Геокодирование выполняется с помощью типа GeocodeModel.

Следующие примеры кода являются небольшой частью компонента map в примере Map Viewer (QML). Фрагменты демонстрируют объявление компонента GeocodeModel.

В фрагменте мы видим, что [QML]{GeocodeModel} содержит плагин и два обработчика сигналов. Один для изменений статуса onStatusChanged, а другой для обновления центрирования объекта Map onLocationsChanged.

GeocodeModel {
    id: geocodeModel
    plugin: map.plugin
    onStatusChanged: {
        if ((status == GeocodeModel.Ready) || (status == GeocodeModel.Error))
            map.geocodeFinished()
    }
    onLocationsChanged:
    {
        if (count == 1) {
            map.center.latitude = get(0).coordinate.latitude
            map.center.longitude = get(0).coordinate.longitude
        }
    }
}

MapItemView {
    model: geocodeModel
    delegate: pointDelegate
}

Функции геокодирования вызываются из кода более высокого уровня. В этом фрагменте мы видим объект Address, заполненный необходимыми параметрами.

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

Объект Address впоследствии используется в запросе для GeocodeModel для обработки и определения географических координат.

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

Навигация

Очень важной функцией типа Map является навигация от одного места к месту назначения с возможными промежуточными точками на маршруте. Маршрут будет разделен на ряд сегментов. В конце каждого сегмента находится вершина, называемая маневром. Сегменты содержат информацию о времени и расстоянии до конца сегмента. Маневры содержат информацию о том, что делать дальше, как перейти на следующий сегмент, если он есть. Таким образом, маневр содержит информацию о навигации, например, «поверните направо сейчас».

Для поиска подходящего маршрута нам необходимо использовать RouteQuery для определения критериев выбора и добавления необходимых промежуточных точек. RouteModel должен возвращать список RouteSegments, который определяет маршрут до пункта назначения, включая навигационные рекомендации на стыках между сегментами, называемыми RouteManeuvers.

Существует множество опций, которые можно добавить в запрос для сужения критериев. Свойства RouteQuery могут включать

В следующем примере объявлен RouteQuery по умолчанию в RouteModel.

RouteModel {
    id: routeModel
    plugin : map.plugin
    query:  RouteQuery {
        id: routeQuery
    }
    onStatusChanged: {
        if (status == RouteModel.Ready) {
            switch (count) {
            case 0:
                // technically not an error
                map.routeError()
                break
            case 1:
                map.showRouteList()
                break
            }
        } else if (status == RouteModel.Error) {
            map.routeError()
        }
    }
}

Пользователь вводит некоторую информацию, такую как начальная точка маршрута, некоторые промежуточные точки и пункт назначения. Все эти местоположения являются промежуточными точками, поэтому местоположения от начала до конца будут введены как последовательность промежуточных точек. Затем можно установить другие свойства запроса, которые могут быть специфичными для этого путешествия.

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

routeInfoModel ListModel используется для получения результатов запроса и построения подходящего списка для отображения.

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

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

Дополнительную информацию об примере см. в примере Map Viewer (QML).

Масштабирование, масштабирование двумя пальцами и прокручивание

Элемент Map также поддерживает взаимодействия пользователя с картой с помощью тактильных и мышиных жестов. То есть такие функции, как прокручивание для перемещения, масштабирование двумя пальцами.

Включить и настроить масштабирование двумя пальцами и прокручивание очень просто в типе Map.

Map {
    id: map
    // Enable pan, flick, and pinch gestures to zoom in and out
    gesture.acceptedGestures: MapGestureArea.PanGesture | MapGestureArea.FlickGesture | MapGestureArea.PinchGesture | MapGestureArea.RotationGesture | MapGestureArea.TiltGesture
    gesture.flickDeceleration: 3000
    gesture.enabled: true
}

Масштабирование также можно контролировать с помощью других объектов, таких как ползунки, с привязкой к уровню масштабирования карты zoomLevel.

Типы QML

Карты

Геокодирование

Маршрутизация

Пример

Приведённые выше фрагменты взяты из примера Map Viewer (QML).