QML Карты

Обзор

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

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

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

Все 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 должен возвращать список 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).

Масштабирование, Pinch и Flickable

Элемент Map также поддерживает взаимодействия с пользователем с картой с помощью тактильных и мышиных жестов. Это такие функции, как прокрутка для перемещения, масштабирование pinch-to-zoom.

Включение и настройка pinch и flickable просты в типе 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
}

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

QML Типы

Карты

Geocoding

Routing

Example

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