Управление картой в Windows 10 что это такое

Обновлено: 04.07.2024

В этом разделе объясняется, как отображать карты, использовать картографические сервисы, находить местоположение и настраивать геозону в приложении. В этом разделе также показано, как запустить приложение "Карты Windows" для конкретной карты, маршрута или набора пошаговых инструкций.

MapControl и картографические сервисы требуют ключ аутентификации карт, который называется MapServiceToken. Дополнительные сведения о получении и настройке ключа аутентификации карт см. в статье Запрос ключа аутентификации карт.

Чтобы узнать больше об использовании карт и местоположений в приложении, загрузите следующие примеры из репозитория Windows-universal-samples на GitHub:

Показать карты

Отображайте карты с 2D-, 3D-изображениями или видами Streetside в своем приложении с помощью API-интерфейсов из пространства имен Windows.UI.Xaml.Controls.Maps. Вы можете отметить точки интереса (POI) на карте с помощью кнопок, изображений, фигур или элементов пользовательского интерфейса XAML. Вы также можете накладывать мозаичные изображения или полностью заменять изображения карты.

Тема	Описание
Запрос ключа аутентификации карты	Ваше приложение должно пройти аутентификацию, прежде чем оно сможет использовать MapControl и картографические сервисы в пространстве имен Windows.Services.Maps. Чтобы аутентифицировать ваше приложение, вы должны указать ключ аутентификации карт. В этой статье описывается, как запросить ключ аутентификации карт в Центре разработчиков карт Bing и добавить его в свое приложение.
Отображение карт в 2D-, 3D- и Streetside-представлениях	Отображение настраиваемых карт в приложении с помощью класса MapControl. В этом разделе также представлены 3D-виды с высоты птичьего полета и вид на улицу.
Отображение точек интереса (POI) на карте	Добавление точек интереса (POI) на карту карту с помощью кнопок, изображений, фигур и элементов пользовательского интерфейса XAML.
Наложение мозаичных изображений на карту	Наложение сторонних или пользовательских мозаичных изображений на карту с использованием источников тайлов. Используйте источники тайлов для наложения специализированной информации, такой как данные о погоде, данные о населении или сейсмические данные; или используйте источники тайлов, чтобы полностью заменить карту по умолчанию.

Доступ к картографическим сервисам

Добавьте в приложение маршруты, направления и возможности геокодирования с помощью API из пространства имен Windows.Services.Maps.

< td>Запрос маршрутов и направлений и отображение их в приложении.

Тема	Описание
Запрос ключа аутентификации карты	Ваше приложение должно пройти аутентификацию, прежде чем оно сможет использовать MapControl и картографические сервисы в пространстве имен Windows.Services.Maps. Чтобы аутентифицировать ваше приложение, вы должны указать ключ аутентификации карт. В этой статье описывается, как запросить ключ аутентификации карт в Центре разработчиков карт Bing и добавить его в свое приложение.
Отображение точек интереса (POI) на карте	Добавляйте точки интереса (POI) на карту с помощью кнопок, изображений, фигур и элементов пользовательского интерфейса XAML.
Отображение маршрутов и направлений
Выполнение геокодирования и обратного геокодирования	Преобразование адресов в географические местоположения (геокодирование) и преобразование географические местоположения в адреса (обратное геокодирование) путем вызова методов класса MapLocationFinder в пространстве имен Windows.Services.Maps.
Поиск и загрузка пакетов карт для автономного использования	В прошлом ваше приложение должно было направлять пользователей в приложение «Настройки» для загрузки офлайн-карт. Теперь вы можете использовать классы в пространстве имен Windows.Services.Maps.OfflineMaps для поиска загруженных пакетов в заданной области (на основе Geopoint, GeoboundingBox и т. д.). Вы также можете проверять и прослушивать статус загрузки пакетов карт, а также запускать загрузку, не требуя от пользователя выхода из вашего приложения. Вы найдете примеры того, как это сделать, как в справочном материале, так и в образце карты универсальной платформы Windows (UWP).

Получить местоположение пользователя

Получить текущее местоположение пользователя и получать уведомления об изменении местоположения в вашем приложении с помощью API из пространства имен Windows.Devices.Geolocation. Эти элементы API также часто используются в параметрах API карт. API-интерфейсы из пространства имен Windows.Devices.Geolocation.Geofencing уведомляют ваше приложение, когда пользователь входит или выходит из геозоны (заранее определенной географической области).

< td>Рекомендации по производительности для приложений, использующих функцию геозоны.

Тема	Описание
Запрос ключа аутентификации карты	Ваше приложение должно пройти аутентификацию, прежде чем оно сможет использовать MapControl и картографические сервисы в пространстве имен Windows.Services.Maps. Чтобы аутентифицировать ваше приложение, вы должны указать ключ аутентификации карт. В этой статье описывается, как запросить ключ аутентификации карт в Центре разработчиков карт Bing и добавить его в свое приложение.
Руководство по разработке приложений с учетом местоположения	Рекомендации по производительности для приложений, которым требуется доступ к местоположению пользователя.
Получить местоположение пользователя	Получить доступ к местоположению пользователя, а затем получить его.
Руководство по использованию отслеживания посещений	Узнайте, как использовать мощную функцию отслеживания посещений для более удобного отслеживания местоположения.
Руководство по проектированию геозон
Настройка геозоны	Настройте геозону в своем приложении и узнайте, как с ней справиться уведомления на переднем и заднем плане.

Запустите приложение "Карты Windows"

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

Команда Google Карт была занята улучшением и добавлением новых функций на платформу Карт для Windows 10 Fall Creators Update. В дополнение к производительности и визуальным улучшениям 3D-движка мы представляем функции, запрошенные пользователями, такие как возможность импорта 3D-моделей на карту и поддержку наложения слоев и привязки элементов карты. Мы также вносим улучшения в API стилей, чтобы клиенты могли указывать базовые стили карты и визуальные состояния для своих собственных элементов карты. Наконец, мы представляем API мест для просмотра актуальной информации о месте прямо в текущем контексте вызывающего приложения.

Без дальнейших церемоний, ознакомьтесь с основными моментами ниже и продолжайте оставлять свои отзывы!

3D-здания

Возможно, вы помните, что в предыдущей версии отсутствовали некоторые трехмерные здания. С тех пор мы усердно работали, чтобы вернуть их (и улучшить те, которые выглядели неправильно) с этим обновлением. Следите за новыми 3D-зданиями в ближайшие несколько месяцев!

3D-объекты

Мы добавляем новый MapElement под названием MapElement3D. Наряду с MapModel3D этот новый API можно использовать для простого импорта и отображения 3D-объектов. Подумайте о причудливых 3D-канцелярских кнопках, автомобилях, самолетах и т. д. Возможности безграничны!

Вот несколько замечательных примеров MapElement3D, отображающих 3D-модели в определенном месте, ориентации и масштабе в элементе управления картой Windows 10:

Аватары

Автомобили

Облака

API слоев карты

Мы также добавляем новый класс MapLayer, первым производным от которого является MapElementsLayer. В отличие от существующего MapControl.MapElements API, его можно использовать для независимого управления группами элементов как единым целым или для обозначения общей цели.

Привяжите свои данные к карте с помощью MapControl.Layers

Вы можете связать элементы на карте со своими собственными коллекциями бизнес-объектов с помощью Map Control.Layers API.

Расширения API оформления карт

Мы расширяем текущий набор API стилей карт для управления картами Windows 10. В предыдущем выпуске мы добавили MapStylesheet API, чтобы вы могли динамически изменять внешний вид карты в режиме реального времени. В этом выпуске мы добавляем поддержку двух новых свойств в MapElement: MapStyleSheetEntry и MapStyleSheetEntryState, которые можно использовать для более глубокой настройки внешнего вида элементов карты с использованием одного из стилей и состояний по умолчанию или пользовательских.

Вот несколько примеров настройки элементов карты с помощью новых расширений стилей в элементе управления картой Windows 10:

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

Вы можете сделать так, чтобы элементы карты выглядели так, как будто они являются частью базовой карты, установив их стиль в соответствии с существующей записью в таблице стилей карты, например Вода. См. MapStyleSheetEntry для получения полного списка записей, которые вы можете выбрать.

Логотип Bing отображается элементом управления картой Windows 10 путем изменения свойства MapStyleSheetEntry многоугольника карты на Вода.

Реализуйте состояния элементов карты с помощью MapStyleSheetEntryState

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

Площадь Бельвю, центр города и достопримечательности Мейденбауэра отображаются с помощью элемента управления картой Windows 10 путем переопределения масштаба существующей записи UserPoint и изменения свойства MapStyleSheetEntryState значка карты на пользовательское состояние, которое расширяет существующее Состояния входа Наведение и Выбрано.

Информация о месте

Наконец, мы рады объявить о новом API-интерфейсе PlaceInfo, который позволяет просматривать обширную релевантную информацию о месте без необходимости переключения контекста во всплывающем пользовательском интерфейсе прямо в вашем собственном приложении.

Обновления и дополнения API

Список API, добавленных после Windows 10 Creators Update, см. здесь: следующие ресурсы:

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

Карты действительно изменили то, как пользователи взаимодействуют со своими устройствами и миром. К счастью, универсальная платформа Windows (UWP) оснащена полнофункциональным элементом управления картой, который использует возможности и возможности картографических сервисов Bing. В колонке этого месяца я расскажу об управлении картой и покажу, как легко его добавить в ваши приложения.

Настройка проекта

Создайте новый пустой проект UWP в Visual Studio, выбрав «Новый проект» в меню «Файл». Разверните установленные шаблоны | Окна | Пустое приложение (универсальное приложение для Windows). Назовите проект MapControl и нажмите OK. Сразу после этого появится диалоговое окно с вопросом, на какую версию Windows должно ориентироваться приложение. Для этого проекта подойдут параметры по умолчанию, поэтому можно просто нажать кнопку "ОК".

Откройте файл MainPage.xaml и добавьте следующее объявление пространства имен в тег страницы:

Это делает элементы, расположенные в пространстве имен Windows.UI.Xaml.Controls.Maps, доступными для обращения к элементам XAML, содержащимся в элементе управления Page, с помощью префикса maps:. Подробное объяснение пространств имен XAML и сопоставления пространств имен можно найти в подробной статье Центра разработки для Windows по адресу bit.ly/2jwcO2D.

Добавление элемента управления картой

Чтобы добавить карту в это приложение, просто добавьте следующий код XAML:

Запустите решение, нажав клавишу F5 или выбрав «Начать отладку» в меню «Отладка». Ваше приложение должно выглядеть примерно так, как показано на рис. 1. Обратите внимание, что вы можете щелкать и перетаскивать карту для перемещения по ней. Двойной щелчок увеличивает точку. Кроме того, сенсорные жесты также управляют элементом управления Map. Вы также заметите красный текст в левом нижнем углу элемента управления с надписью «Предупреждение: MapServiceToken не указан».

Рис. 1. Базовое управление картой

Регистрация токена службы Bing Maps

Рис. 2. Доступ к моим ключам в Центре разработки Bing Maps

Если вы ранее регистрировали ключи с помощью Bing Maps, они появятся в списке, как показано на рис. 3. Чтобы создать новый ключ, щелкните параметр, который гласит: «Нажмите здесь, чтобы создать новый ключ. ”

Рис. 3. Страница «Мои ключи» со списком ранее зарегистрированных ключей

Появится форма с запросом информации о приложении, для которого будет создан ключ (см. рис. 4). Назовите приложение, выберите «Базовый» для типа ключа и «Универсальное приложение для Windows» для типа приложения. URL-адрес приложения является необязательным. Нажмите «Создать», и вам будет представлен новый ключ. Скопируйте его и вернитесь к файлу MainPage.xaml.Измените XAML, добавив атрибут MapServiceToken и вставьте ключ в качестве его значения, например:

Рис. 4. Создание формы ключа

Запустите решение еще раз, и предупреждающее сообщение исчезнет.

Управление картой с помощью кода

Как видите, добавить элемент управления "Карта" в приложение UWP довольно просто. Элемент управления даже позволяет пользователям управлять центральной точкой карты и уровнем масштабирования с помощью мыши или касания. Карта была бы более полезной, если бы ею можно было манипулировать в коде. Например, было бы полезно изменить стиль карты, чтобы на ней отображались аэрофотоснимки или данные о местности, а не только вид дороги по умолчанию, показанный на рис. 1.

Изменение стилей карты

У элемента управления Map есть свойство Style типа MapStyle, которое является перечислением. Например, чтобы изменить карту так, чтобы она отображала аэрофотоснимки с наложенными на них дорогами, достаточно ввести следующую строку кода:

Чтобы реализовать возможность выбора любого доступного стиля карты, приложению потребуются дополнительные элементы управления. Добавьте следующие определения сетки в элемент управления «Сетка на странице» в файле MainPage.xaml, чтобы освободить место для элементов управления, которые вы собираетесь добавить:

Затем добавьте атрибут Grid.Row в элемент управления Map и установите для него значение 2.

Теперь добавьте следующие элементы управления Button в StackPanel:

В файл MainPage.xaml.cs добавьте код обработчика событий, показанный на рис. 5, чтобы определить, какая кнопка была нажата, а затем задайте для карты соответствующий стиль.

Рис. 5. Код обработчика событий

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

Увеличение и уменьшение

По умолчанию карта будет полностью уменьшена, чтобы можно было увидеть всю Землю. Это может быть бесполезно для многих целей. Элемент управления Map имеет свойство типа Double, называемое ZoomLevel, чтобы задать степень увеличения или уменьшения масштаба карты. Значение варьируется от 1 до 20, где 1 соответствует максимальному масштабу, а 20 показывает весь мир. Значения вне этого диапазона игнорируются.

Добавить увеличение и уменьшение масштаба в приложение довольно просто. Сначала добавьте следующие элементы XAML в файл MainPage.xaml внутри элемента управления Grid:

Далее добавьте следующие два обработчика событий для двух кнопок:

Размещение маркеров на картах

Еще одной полезной функцией картографического программного обеспечения является возможность размещать маркеры на различных точках интереса. Это может быть отличным способом указать на местные достопримечательности. Управление картой также упрощает эту задачу. В этом примере поместите маркер на монумент Вашингтона в Вашингтоне, округ Колумбия. Геопространственные координаты монумента Вашингтона: 38,8895 северной широты и 77,0353 западной долготы. Для этого добавьте следующий код в файл MainPage.xaml.cs:

Далее вызовите функцию из метода конструктора MainPage.

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

Широта и долгота

Все точки на Земле могут быть представлены системой координат, измеряющей угловое расстояние от экватора и нулевого меридиана в Гринвиче, Англия. Градусы широты измеряют север и юг в градусах от -90 на Южном полюсе до 90 на Северном полюсе. Градусы долготы измеряют восток или запад в градусах от -180 до 180.

Просмотр данных о трафике

Bing отслеживает данные о дорожном движении в городах по всему миру, и элемент управления "Карта" может очень легко накладывать эти данные на карту. Чтобы добавить эту функцию в приложение, добавьте следующую разметку в файл MainPage.xaml сразу после кнопки «Уменьшить»:

Затем добавьте в файл MainPage.xaml.cs следующие обработчики событий:

Запустите приложение, установите флажок "Показать пробки" и увеличьте масштаб любого крупного города. Данные о трафике будут отображаться только при уровне масштабирования 8 или выше.

Геолокация

Теперь в приложении есть несколько элементов управления для изменения стиля карты, увеличения или уменьшения масштаба и даже отображения данных о транспортном потоке. Было бы полезно, чтобы элемент управления картой инициализировался рядом с текущим местоположением пользователя. Таким образом, пользователи могут быстро получить представление о своем местном окружении, а также об условиях движения поблизости. Для этого вам потребуется включить функцию Location в файле Package.appxmanifest, как показано на рис. 6. В Visual Studio дважды щелкните файл Package.appxmanifest на панели обозревателя решений. В редакторе убедитесь, что установлен флажок рядом с Location. Сохраните файл. Теперь в приложении есть функция определения местоположения.

Рис. 6. Включение функции определения местоположения для приложения

В файл MainPage.xaml добавьте следующий элемент управления Button:

И добавьте следующий обработчик событий в файл MainPage.xaml.cs:

Метод btnCurrentLocation_Click сначала запрашивает у объекта GeoLocator статус доступа к нему приложения. При первом запуске приложения в системе пользователя система отобразит диалоговое окно, подобное показанному на рис. 7. Если пользователь нажмет «Да», код получит текущую позицию из геолокатора. После этого код центрирует карту по предоставленным широте и долготе. Если бы возможность определения местоположения не была добавлена, пользователю даже не было бы предложено диалоговое окно.

Рис. 7. Запрос у пользователя разрешения на доступ к точной информации о местоположении

Подведение итогов

Карты — одна из важнейших функций мобильных устройств. Многие приложения могли бы выиграть от добавления элемента управления Map для визуализации данных или помощи пользователям в поиске ближайших услуг. В этой колонке вы увидели, насколько просто добавить карту в ваше приложение и что в большинстве случаев доступ к картографическим службам предоставляется вам, разработчику, бесплатно.

Благодарим следующих технических экспертов за рецензирование этой статьи: Рэйчел Аппель

В своей колонке в прошлом месяце я продемонстрировал основные функции элемента управления Bing Maps для приложений универсальной платформы Windows (UWP) и то, как легко добавить карту в ваши приложения UWP. В этом месяце я покажу вам, как использовать некоторые из более продвинутых функций, которые сделают ваши приложения действительно выделяющимися и предоставят пользователям отличные возможности. Я также расскажу, как внедрить богатые изображения и возможности 3D-карт Bing Maps непосредственно в ваши приложения.

Начало работы

Теперь вы можете запустить решение, и вы должны увидеть элемент управления Map, покрывающий весь экран вашего приложения. Имея этот элемент управления, вы теперь можете начать пользоваться всеми преимуществами элемента управления Bing Maps для UWP.

Пользовательские маркеры карты

В прошлой колонке я писал о добавлении маркеров на карту. Маркеры просто указывают место на карте. Однако элемент управления UWP Map также позволяет разработчикам размещать на карте настраиваемые элементы управления XAML и, наряду с элементами управления XAML, обеспечивает улучшенную интерактивность. Цель состоит в том, чтобы создать карту, которая демонстрирует различные достопримечательности в Вашингтоне, округ Колумбия. Каждый маркер на карте будет иметь изображение местоположения, и при нажатии на него откроется соответствующий веб-сайт. В итоге карта должна выглядеть примерно так, как показано на рисунке 1.

Рис. 1. Карта с настроенными элементами управления "Кнопка", размещенными в указанном месте

Для этого элементу управления Map потребуются MapItemsControl, DataTemplate и несколько других добавленных атрибутов. Сначала измените XAML элемента управления Map в файле MainPage.xaml, чтобы он выглядел так, как показано на рис. 2.

Рис. 2. Модифицированный XAML элемента управления картой в файле MainPage.xaml

Внимательно прочитайте XAML и обратите внимание, что MapItemsControl DataTemplate привязывается к объекту с несколькими свойствами. Следующим шагом является создание модели, содержащей эти свойства. В обозревателе решений щелкните правой кнопкой мыши проект, нажмите «Добавить», а затем нажмите «Новая папка» в следующем меню. Назовите папку Models и нажмите Enter. Щелкните правой кнопкой мыши папку «Модели», нажмите «Добавить», а затем выберите «Новый элемент». В следующем диалоговом окне выберите Class из списка шаблонов. Назовите новый файл класса POI.cs и нажмите OK (POI означает точки интереса).

Измените содержимое файла POI.cs, чтобы оно напоминало следующий код:

Затем откройте файл MainPage.xaml.cs и добавьте обработчик событий, показанный на рис. 3, чтобы отцентрировать карту в Вашингтоне, округ Колумбия, и установить уровень масштабирования, который фокусируется на области вокруг Национальной аллеи. Метод LoadPointsOfInterest создает и заполняет список

<р>. Последняя строка метода mapControl_Loaded устанавливает ItemsSource MapItemsControl в этот список.

Рис. 3. Обработчик событий для центрирования карты в Вашингтоне, округ Колумбия, и создания списка для заполнения точек интереса

Добавление интерактивности

Теперь добавьте следующий код обработчика событий для кнопки, указанной в DataTemplate:

Обработчик событий извлекает объект POI, связанный с элементом управления, вызвавшим событие, и передает свойство InformationURI методу LaunchURIAsync класса Launcher. Для URI веб-сайтов это запустит браузер по умолчанию в системе и загрузит отправленный ему URI. Класс Launcher находится в пространстве имен Windows.System. У вас есть возможность добавить пространство имен вручную с помощью оператора using или позволить Visual Studio обработать эту деталь. Класс Launcher может делать гораздо больше, чем просто открывать браузер. Подробнее о классе Launcher можно прочитать на странице bit.ly/2n4Zx0F.

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

Карты в трех измерениях

Одним из наиболее привлекательных аспектов элемента управления Bing Maps UWP является его способность отображать 3D-изображения многих местоположений по всему миру. Чтобы приступить к работе, создайте новый проект, выполнив действия, описанные в разделе «Начало работы». Однако на этот раз назовите решение 3DMaps. Не забудьте добавить объявление пространства имен в файл MainPage.xaml, чтобы включить пространство имен карт. Вставьте XAML, показанный на рис. 4, в узел Page файла MainPage.xaml в элемент управления Map и ряд кнопок для управления трехмерным представлением карты.

Рис. 4. XAML для создания интерфейса приложения 3D Map

Управление 3D-картами

Просматривать карту в 3D очень просто, и я кратко коснулся этого вопроса в своей колонке в прошлом месяце. Однако все, что делал образец приложения из этого столбца, — это переключался в 3D-представление. Теперь давайте рассмотрим, как программно управлять 3D-картой. Добавьте обработчик событий для кнопки btn3Dview, как показано на рис. 5.

Рис. 5. Код для переключения в режим 3D-карты, сфокусированный на Нижнем Манхэттене

Сразу вы заметите, что код переключает свойство Style элемента управления Map на Aerial3DWithRoads. Кроме того, я хочу иметь возможность контролировать конкретные детали представления. В этом примере я хочу показать горизонт Нижнего Манхэттена. Чтобы сделать это, мне нужно «кадрировать кадр» почти так же, как это сделал бы фотограф, выбирая место в 3D-пространстве, чтобы настроить камеру и указать в определенном положении и под заданным углом. Диаграмма на рис. 6 дает общий обзор.

Рис. 6. Концептуальная схема MapScene

Чтобы настроить нужное изображение, начните с широты и долготы, чтобы определить местоположение. Затем определите переменные для радиуса, направления и шага, чтобы управлять обзором камеры. Затем создайте MapScene с помощью метода MapScene.CreateFromLocationAndRadius. Это создает сцену с центром на указанной широте и долготе с определенного расстояния в метрах (радиус). Заголовок относится к направлению, в котором смотрит камера. Это значение может быть любым от нуля до 360, представляя точки компаса. Для справки, значение 90 представляет Восток. Нулевое значение соответствует северу, 180 – югу и 270 – западу. Шаг относится к углу, под которым смотрит камера. Ноль – это вид сверху вниз, а 90 – перпендикулярно.

После создания объекта MapScene он применяется к элементу управления Map с помощью метода TrySetSceneAsync. Запустите проект сейчас. Нажмите на 3D-вид, и ваше приложение должно показать 3D-вид нижнего Манхэттена. Обратите внимание, что вы можете управлять картой с помощью мыши и клавиатуры. Если ваше устройство поддерживает сенсорный ввод, вы также можете использовать сенсорные жесты для управления направлением, уровнем масштабирования и шагом элемента управления "Карта".

Несмотря на то, что управление мышью, клавиатурой и жестами, встроенными прямо в элемент управления картой, — это хорошо, было бы неплохо управлять трехмерным окном просмотра карты программно.

Закройте приложение и вернитесь к коду в файле MainPage.xaml в Visual Studio. Добавьте следующий код XAML в элемент управления StackPanel после кнопки btn3DView:

Этот XAML создаст четыре кнопки для управления окном просмотра карты. Два предназначены для управления курсом: один для поворота направо, а другой для поворота налево. Два предназначены для управления высотой тона: один для наклона вверх, а другой для наклона вниз. Теперь добавьте обработчики событий, как показано на рис. 7, в файл MainPage.xaml.cs.

Рис. 7. Обработчики событий для кнопок пользовательского интерфейса, управляющих камерой MapScene

Методы TryRotateAsync и TryTiltAsync принимают параметр типа double, представляющий угол поворота или наклона соответственно. Отрицательные значения поворачиваются влево и наклоняются вниз. Положительные значения поворачиваются вправо и наклоняются вверх. Запустите приложение сейчас. Нажмите на 3D View и попробуйте управлять картой с помощью кнопок. Ваше приложение должно выглядеть примерно так, как показано на рис. 8.

Рис. 8. Приложение после нажатия кнопки «Повернуть вправо» несколько раз

Вид со стороны улицы

Одной из других мощных функций Bing Maps является StreetSide View, который позволяет пользователям исследовать местоположение с помощью серии интерактивных панорам. Благодаря элементу управления UWP Map эта функция теперь может быть встроена в ваши приложения.

Если приложение уже запущено, остановите его и вернитесь в Visual Studio. Добавьте следующий код XAML в файл MainPage.xaml, чтобы добавить кнопку для включения StreetSide View:

Теперь добавьте обработчик событий, показанный на рис. 9, чтобы включить StreetSide View.

Рис. 9. Настройка и отображение вида StreetSide Нижнего Манхэттена

Первый шаг — проверить, работает ли приложение на устройстве, поддерживающем StreetSide View, поскольку не каждое устройство может его поддерживать. Следующим шагом является создание GeoPoint из координат широты/долготы. Теперь передайте этот GeoPoint методу FindNearbyAsync, чтобы найти ближайшее место, где доступны изображения StreetSide. Если рядом с этим местом нет изображений, метод вернет значение null.

Осталось только создать StreetSide Experience, передав объект StreetSide Panorama конструктору StreetSide Experience. Чтобы переключить элемент управления «Карта» на StreetSide View, задайте для свойства «Пользовательский опыт» элемента управления «Карта» только что созданный объект StreetSide Experience.

Запустите решение сейчас и нажмите кнопку StreetSide. Нажмите «Наклон вверх» и «Наклон вниз», и приложение должно отобразить вид со стороны улицы на Всемирный финансовый центр и Башню Свободы. Обратите внимание, что элемент управления реагирует на клавиатуру, мышь и касание. Элемент управления даже позволит вам увеличивать масштаб и исследовать окружающую среду. Под видом StreetSide находится обзорная карта, позволяющая пользователям еще больше изучить местность. В процессе использования приложения вы могли заметить, что кнопки «Повернуть налево» и «Повернуть направо» больше не работают.

Закройте приложение, вернитесь в Visual Studio и измените обработчики событий для кнопок поворота. Чтобы изменить заголовок представления StreetSide, необходимо напрямую изменить свойство Heading элемента управления Map. Чтобы определить, включен ли StreetSide View, проверьте, не равно ли значение свойства Custom Experience значение null. Измените обработчики событий для кнопок «Повернуть налево» и «Повернуть направо», чтобы они выглядели так, как показано на рис. 10.

Рис. 10. Обработчики событий Rotate обновлены для поддержки просмотра StreetSide

Запустите решение еще раз и нажмите кнопку StreetSide, чтобы включить StreetSide View. Кнопки «Повернуть налево» и «Повернуть направо» теперь работают. Стоит отметить, что в 3D-виде установка свойства Heading элемента управления Map действительно поворачивает вид камеры. Однако при этом промежуточные точки не анимируются, что делает переход грубым.

Подведение итогов

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

Благодарим следующего технического эксперта Microsoft за рецензирование этой статьи: Рэйчел Аппель

Читайте также: