Этот пост участвует в конкурсе „Умные телефоны за умные посты"
В статье освещены основные моменты при разработке картографических и геолокационных мобильных приложений с использованием QtQuick/QML. Рассматриваемый в статье пример поможет вникнуть в суть и основы использования API модуля Location из QtMobility.
В конце статьи читателю станет понятно, как мало кода необходимо для реализации базового функционала картографического приложения, такого как отображение карты, перемещение и изменение масштаба карты, так называемым, “щипком”. Для этого жеста воспользуемся элементом PinchArea, который был представлен в Qt Quick 1.1. Так же для изменения масштаба могут использоваться клавиши увеличения/уменьшения громкости.
Плюс я поведаю что нужно сделать, для использования карт не только от Nokia, но и от Google и OpenStreetMap. Для доступа к дополнительным картам необходимо собрать проект с плагинами для Qt. Для отображения карт необходимо подключение к интернету, но тайлы загружаются один раз и затем запросы кешируются во временной папке. Расположение и размер кеша настраиваемые.
Описание сборки проекта и плагинов основывается на утверждении, что у читателя установлен QtSDK последней версии и прописаны все системные пути к библиотекам (и умение всем этим пользоваться, конечно же).
Дополнительные плагины
Для использования карт от Google и OpenStreetMap необходимо скачать проект с плагинами, либо в виде архива, либо клонировать репозиторий с gitorius.
Для сборки я использовал QtCreator, поэтому буду описывать сборку на основе имеющегося опыта.
При открытии проекта в QtCreator он предложит настроить конфигурацию сборки, выбираете «Эмулятор Qt» и нажимаете Ctrl+B.
Когда сборка завершиться, создайте отдельную папку и назовите ее /geoservices, и положите в нее получившиеся библиотеки. Для того чтобы Qt искала наши плагины в этой папке, нужно либо положить эту папку рядом с исполняемым файлом приложения, либо добавить путь для поиска вызвав QApplication::addLibraryPath() в функции main. Всё, расширения готовы к использованию, можно переходить к нашему приложению.
Картографическое приложение
Итак, приступим, наконец-то, к созиданию. Для создания приложения можно воспользоваться стандартным Qt Quick шаблоном предоставленным в QtCreator. Все изменения будут происходить в main.qml, открываем этот файл, удаляем всё что было добавлено и приступаем к написанию картографического приложения.
Сначала конечно же нужно подключить необходимые модули:
import QtQuick 1.1
//необходимые элементы для работы с картами
import QtMobility.location 1.2
Для отображения карт в модуле Location есть такой прекрасный элемент как Map, ему нужно установить плагин с именем отображаемой карты и установить фокус:
Map {
id: map
z : 1
//для того чтобы доходили события от клавиатуры
focus : true
//по умолчанию плагин поддерживает только карты "nokia",
//но мы расширили поддержку карт (не так ли ;-) )
//и теперь у нас есть выбор из: "nokia" "google" "openstreetmap"
//по-умолчанию буду использовать карты "nokia", вдруг кому стало лень собирать дополнительные провайдеры
plugin : Plugin { name : "nokia" }
//...
}
В принципе, вы уже можете испытать приложение, оно правда не умеет реагировать на события, но для отображения карты больше ничего не нужно. Конечно же, мы не остановимся и продолжим расширять функционал. Итак, пусть карта показывает нам нашу всеми любимую столицу и для этого зададим карте центр и масштаб.
//...
zoomLevel: 7
center: Coordinate {
latitude: 55.7545
longitude: 37.6268
}
//...
Теперь можно добавить функционал для реагирования на действия пользователя.
Начнем с реализации щипка.
//...
PinchArea {
id: pincharea
property double oldZoom
anchors.fill: parent
function calcZoomDelta(zoom, percent) {
return zoom + Math.log(percent)/Math.log(2)
}
onPinchStarted: {
oldZoom = map.zoomLevel
}
onPinchUpdated: {
map.zoomLevel = calcZoomDelta(oldZoom, pinch.scale)
}
onPinchFinished: {
map.zoomLevel = calcZoomDelta(oldZoom, pinch.scale)
}
}
//...
Вся реализация такого функционала заняла 22 строчки кода, не плохо, не правда ли?
Итак, осталось реализовать перемещение карты и добавить изменение масштаба клавишами.
//...
Keys.onPressed: {
switch (event.key)
{
case Qt.Key_VolumeUp:
case Qt.Key_Plus: map.zoomLevel += 1; break;
case Qt.Key_VolumeDown:
case Qt.Key_Minus: map.zoomLevel -= 1; break;
}
}
MapMouseArea {
property int lastX : -1
property int lastY : -1
onPressed : {
lastX = mouse.x
lastY = mouse.y
}
onReleased : {
lastX = -1
lastY = -1
}
onPositionChanged: {
if (mouse.button == Qt.LeftButton) {
if ((lastX != -1) && (lastY != -1)) {
var dx = mouse.x - lastX
var dy = mouse.y - lastY
map.pan(-dx, -dy)
}
lastX = mouse.x
lastY = mouse.y
}
}
onDoubleClicked: {
map.center = mouse.coordinate
map.zoomLevel += 1
lastX = -1
lastY = -1
}
}
//...
И для того чтобы карта не была совсем скучной, добавим булавку в стиле Google.
//...
MapImage {
id: baloon
//заметьте MapImage сам скачает картинку
source: "http://habrastorage.org/storage1/b80bea34/0e0bc0f1/2cc13b01/8b462d5a.png"
offset.x: -12
offset.y: -24
//расположим булавку по адресу офиса Nokia
coordinate : Coordinate {
latitude: 55.752949
longitude: 37.606292
}
//добавим интерактивности
//при нажатии на булавку происходит масштабирование карты
//и булавка располагается в центре карты
MapMouseArea {
anchors.fill: parent
//а вот тут можно применить всю силу анимации
//для анимированного перемещения и масштабирования карты
onClicked: {
map.center = baloon.coordinate
map.zoomLevel = map.maximumZoomLevel
}
}
}
}
Результат получившегося приложения, можно наблюдать на скриншотах:
Заключение
Итак, с минимальными усилиями мы получили рабочее картографическое приложение, количество кода так же минимально. В итоге мы получили элемент который можно встраивать в любое приложение, где нужно показать например какую-то информацию об адресе офиса или магазина, можно отобразить путь от метро до офиса, да и просто отобразить карту. Примеров использования, конечно же, масса. Плюс, на примере исходников к дополнительным плагинам можно реализовать работу с любыми картографическими сервисами, которые поддерживают работу с тайлами (Bing как пример). Для размещения на карте различных элементов, присутствуют такие как:
Все элементы и события мыши работают в координатах карты, что избавляет программиста от конвертации и облегчает работу с элементами. Например, у MapCircle есть такое свойство как radius, оно хранит значение в метрах и при изменении масштаба карты круг либо увеличивается, либо уменьшается.
Ссылки
- Само приложение на gitorius
- Репозиторий с доп. плагинами
- Документация на плагины
