Начинаем работать с API и элементы управления для работы с картами в платформе универсальных приложений Windows

Поскольку приложения становятся все более и более ориентированы на местоположение, разработчики должны интересоваться как интегрировать карты и сервисы определения местоположения в существующие приложения. Универсальная платформа Windows (UWP) предлагает широкий выбор элементов управления и сервисов для этой задачи.
Часть 1: Начинаем работать с API и элементы управления для работы с картами в платформе универсальных приложений Windows
Часть 2: API и элементы управления для работы с картами в платформе универсальных приложений Windows: сервисы местоположения
Часть 3: API и элементы управления для работы с картой в универсальных приложениях Windows: использование внешних элементов
Примеры кода в этой публикации либо взяты непосредственно из или основаны на универсальных примерах, опубликованных Microsoft на GitHub. Эти примеры представляют отличную возможность познакомиться с различными API и элементами управления платформы UWP и перейти непосредственно к работе с картами.

Самый первый шаг: получение ключа аутентификации
Прежде чем что-то начать делать, вам необходимо зарегистрироваться, чтобы получить ключ Bing Maps в центре разработчика Bing Maps. Bing Maps предоставляет все картографические данные, используемые в UWP и требует регистрации, чтобы он мог отслеживать, сколько этих данных вы используете. Вы можете создать учетную запись на главной странице, если у вас еще её нет, или если вы хотите использовать новую. Если у вас есть учетная запись Bing Maps, вы будете создавать новый ключ для каждого UWP приложения, над которым вы работаете. Вам будет предложено указать имя приложения, тип ключа (который по умолчанию «Basic»), а также тип приложения.

Базовый ключ позволит вам выполнять до 50000 вызовов Bing Maps в день, что более чем достаточно для разработки с выполнением достаточного количества сценариев приложения. Позже, когда вы будете готовы к развертыванию, посетите страницу лицензирования, чтобы проверить нужно ли вам получить другой вид ключа. Пока просто убедитесь, что ваш тип приложения установлен как «Universal Windows App». Вы можете не заполнять поле с URL-адресом приложения, так как у вас его нет на данный момент.
После нажатия на кнопку Create, вы обеспечены ключом Bing Map Key, который можно использовать во всём вашем приложении. В UWP, это называется как ваш сервисный токен.
Вы можете указать ключ аутентификации декларативно в Xaml вашего приложения:

  1. maps:MapControl x:Name=»myMap» MapServiceToken=»(Bing Maps Key)»/>

Имея в руках ваш базовый ключ, вы можете начать делать вызовы к сервисам карт.


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

Визуализация карт с помощью элемента управления в XAML
Добавление карты в ваше UWP приложение настолько же просто, как все отдельные шаги: перетаскивание класса MapControl из панели инструментов на вашу страницу приложения в Visual Studio, указание сервисного токена, а также указание местоположения. Для того, чтобы установить центр вашей карты, вам сначала нужно обработать событие загрузки вашего MapControl в конструкторе страницы:

  1. this.InitializeComponent();
  2. myMap.Loaded += MyMap_Loaded;

Вы можете установить местоположение путем присвоения значения широты и долготы в качестве центра карты. Затем используйте метод TrySetSceneAsync, чтобы установить как центр карты, а также радиус в метрах, который вы хотите отобразить на карте.

  1. private async void MyMap_Loaded(object sender, RoutedEventArgs e)
  2. {
  3.     // center on Notre Dame Cathedral      
  4.     var center =
  5.         new Geopoint(new BasicGeoposition()
  6.         {
  7.             Latitude = 48.8530,
  8.             Longitude = 2.3498
  9.         });
  10.     // retrieve map
  11.     await myMap.TrySetSceneAsync(MapScene.CreateFromLocationAndRadius(center, 3000));
  12. }

Эти значения широты и долготы указанные выше фактически описывают расположение собора Нотр-Дам в Париже, Франция и возвращают следующую 2D карту:

Тип GeoPoint довольно прост. В большинстве случаев вам просто нужно передать ему объект BasicGeoposition, который состоит из широты и долготы. Он также использует значение высоты, которое может быть весьма значительным, когда вы запрашиваете карту Aerial3D.
Примечание: В настоящее время нет преобразователя типа String в тип GeoPoint, так что вы не сможете установить центр карты в XAML. Это должно быть сделано либо в исполняемом коде или через привязку данных.
Свойство ZoomLevel элемента управления MapControl имеет диапазон значений от 1 до 20 для 2D-карты, от 1 — это мелкий масштаб до 20 — крупный масштаб. Это дает масштаб видимости континента на вашей карте, который вероятно намного больше, чем вам нужно на самом деле. Вы можете перейти к ещё более глубокому увеличению за счет перехода от 2D вида к StreetSide View (обзору улиц), если это доступно для вашей карты (то есть, если кто-то на самом деле прошёлся с камерами и фотографировал местность).
Чтобы использовать StreetSide View, сначала проверьте поддерживает ли текущее устройство эту возможность, вызвав метод IsStreetsideSupported, если она поддеживается вы можете использовать свойство CustomExperience в MapControl, чтобы настроить StreetSide View.

  1. private async void MyMap_Loaded(object sender, RoutedEventArgs e)
  2. {
  3.     //set map to lat and long for Broadway and 7th, New York City
  4.     myMap.Center =
  5.         new Geopoint(new BasicGeoposition()
  6.         {
  7.             Latitude = 40.757969,
  8.             Longitude = 73.985535
  9.         });
  10.     //check for streetside support
  11.     if (myMap.IsStreetsideSupported)
  12.     {
  13.         //check that map is available for lat and long
  14.         var panorama = await StreetsidePanorama.FindNearbyAsync(myMap.Center);
  15.         if (panorama != null)
  16.         {
  17.             //create custom view
  18.             myMap.CustomExperience = new StreetsideExperience(panorama);
  19.         }
  20.     }
  21. }

По умолчанию Streetside View включает такие возможности, как кнопки масштабирования, кнопку закрытия, курсор StreetSide и адресные метки. Вы можете включить любую или все эти возможности через свойства вашего объекта StreetSideExperience.

Кроме видов 2D и StreetSide, также легко отобразить 3D вид вашего местоположения GeoPoint. Как и с видом StreetSide, вам нужно проверить, что 3D поддерживается на текущем устройстве. Вы также можете использовать метод TrySetSceneAsync класса MapControl чтобы убедиться, что элемент управления не удается корректно отобразить в случае если 3D-сцены недоступны.

  1. private async void MyMap_Loaded(object sender, RoutedEventArgs e)
  2. {
  3.     //set map to lat and long for the Coliseum in Rome, Italy
  4.     myMap.Center =
  5.         new Geopoint(new BasicGeoposition()
  6.         {
  7.             Latitude = 41.890170,
  8.             Longitude = 12.493094
  9.         });
  10.     myMap.ZoomLevel = 16;
  11.     //check for 3D support
  12.     if (myMap.Is3DSupported)
  13.     {
  14.         //set style to 3D
  15.         myMap.Style = MapStyle.Aerial3D;
  16.         //create a mapscene for lat and long
  17.         //facing East (90 deg) and pitched 45 deg
  18.         var mapScene = MapScene.CreateFromLocationAndRadius(myMap.Center, 500, 90, 45);
  19.         await myMap.TrySetSceneAsync(mapScene);
  20.     }
  21. }

Чтобы воспользоваться преимуществами 3D, вы можете определить, в каком направлении направлена ваша камера, а также под каким углом она направлена вниз на сцену. В этом примере камера смотрит на восток. Угол наклона может иметь значение от 0 до 90, где 0 — это направление камеры прямо вниз.


Чтобы получить 3D вид сверху, вы должны присвоить свойству Style класса MapControl значение Aerial3D. MapControl может быть сконфигурирован с использованием нескольких дополнительных стилей, таких как Road, Aerial (без 3D) и Terrain. Самый простой способ понять, что означают эти дополнительные стили — это посмотреть на них в действительности. Изображения города Вашингтона, округ Колумбия, показанные ниже, являются масштабными изображениями с уровнем масштабирования 10, так что эти различия более очевидны.

  1. myMap.Style = MapStyle.Road;

  1. myMap.Style = MapStyle.Aerial;

  1. myMap.Style = MapStyle.AerialWithRoads;

  1. myMap.Style = MapStyle.Terrain;

MapControl имеет такие флаги как TrafficFlowVisible, PedestrainFeaturesVisible и LandmarksVisible, которые обеспечивают дополнительный контент для вашей карты. Мы исследуем эти возможности в следующих публикациях. Вы также можете узнать больше о различных поддерживаемых видах карт на сайте MSDN.

Взаимодействие с картами
С визуализированными картами можно взаимодействовать тремя способами с использованием MapControl:
RotateInteractionMode. Включает поворот карты (Север не должен всегда быть вверху, в конце концов).
ZoomInteractionMode. Изменение уровня масштабирования карты.
TiltInteractionMode. Измените желаемый наклон карты, это выглядит так, будто вы смотрите на карту под углом, а не так, будто вы склонились прямо над картой.

С современными устройствами, пользователи обычно предпочитают взаимодействовать с картами с помощью жестов. К счастью, MapControl неявно поддерживает жесты по умолчанию в каждом из режимов взаимодействия для PointerOnly.
Для того, чтобы повернуть карту, пользователю нужно разместить два пальца на карте и повернуть их вокруг друг друга. Чтобы уменьшить масштаб, нужно просто сжать щипком двумя пальцами. Чтобы увеличить масштаб, нужно раздвигать два пальца в обе стороны в области масштабирования. Чтобы установить нужный угол наклона карты, пользователь должен приложить два пальца прижатых друг к другу и сдвинуть их вверх на карте. Пользователи также имеют возможность перенести центр карты либо перемещением одного пальца на карте или нажав и удерживая левую кнопку мыши и двигая её по карте. Если вы захотите отключить эту возможность, можно переключить параметр PanInteractionMode в состояние Disabled.
Хотя многие устройства поддерживают прямые манипуляции и жесты, но не все. К счастью можно также задать все режимы взаимодействия, за исключением PanInteractionMode для PointerOnly или PointerKeyboardAndControl. Эти два режима добавляют новые элементы управления на холст вашей карты. Элементы управления на холсте карты реагируют на щелчки мыши и по умолчанию появляются и накладываются на карту с правой стороны.

И, наконец, если вы просто хотите отобразить карту определенным образом в вашем приложении и отключить все взаимодействия с пользователем, вы можете установить все эти свойства взаимодействия в состояние Disabled.

Подводя итоги
В этой статье мы узнали, как получить ключ Bing Maps для вашего приложения, как добавить карту, используя различные представления, и, наконец, как управлять как пользовательским взаимодействием в картах. Без сомнения, MapControl является одним из самых простых способов интегрировать карты в приложение и сохранить пользовательский опыт использования карты живым и интересным.
Не забудьте следите за обновлениями в двух следующих бликациях из этой серии, которые будут охватывать картографические сервисы, геолокацию, использование флажков и многое другое.

Перевод оригинальной публикации Getting started with map APIs and controls
Перевод: Сергей Урусов

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *