QML Карты

Обзор

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

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

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

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

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

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, а другой — для обновления центрирования объекта карты 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 {
    id :fromAddress
    street: "Sandakerveien 116"
    city: "Oslo"
    country: "Norway"
    state : ""
    postalCode: "0484"
}

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

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

Навигация

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

Для поиска подходящего маршрута нам нужно использовать 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 {
    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

Карты

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

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

Пример

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