QML Карты

Обзор

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

Объекты, которые нужно добавить на карту, — это MapItems. Положение объекта определяется координатами, включающими широту, долготу и высоту. Объект автоматически отображается после добавления его на карту.

Позиционирование на карте

Все API позиционирования являются частью модуля QtPositioning. Основной частью информации о позиции является координата. Координата содержит данные о широте, долготе и высоте расположения. Высота указана в метрах. Также она имеет метод определения расстояния до другой координаты. Тип координата также может храниться в элементе 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 должен возвращать список RouteSegment, определяющих маршрут до пункта назначения, в том числе с указаниями по навигации в местах соединения сегментов, называемых RouteManeuver.

Вы можете добавить множество вариантов в запрос для уточнения критериев. Свойства 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
}

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

Типы QML

Карты

Geocoding

Routing

Example

Вышеупомянутые фрагменты взяты из примера Map Viewer (QML).