QML Карты

Обзор

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

Места, которые необходимо добавить на карту, являются 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 в примере Просмотр карты (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ов, которые определяют маршрут до места назначения, включая навигационные рекомендации в местах соединения сегментов, называемые 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)
        });
    }
}

Дополнительную информацию об примере см. в примере Просмотр карты (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

Карты

Geocoding

Routing

Example

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