QML Карты

Обзор

Тип Карта позволяет отображать карту и размещать объекты на ней. Различные точки интереса могут быть определены и добавлены на карту для отображения. Также у Карты есть функции управления отображением карты. С помощью элемента 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()

Навигация

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

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

Карты

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

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

Пример

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