QML Карты

Обзор

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

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

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

Все 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()

Навигация

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

Для поиска подходящего маршрута нам необходимо использовать 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 {
    id: map
    // Enable pan, flick, and pinch gestures to zoom in and out
    gesture.acceptedGestures: MapGestureArea.PanGesture | MapGestureArea.FlickGesture | MapGestureArea.PinchGesture
    gesture.flickDeceleration: 3000
    gesture.enabled: true
}

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

Типы QML

Карты

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

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

Пример

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