Узнайте, как элемент управления Карты Telerik UI для .NET MAUI позволяет отображать карты, метки и регионы, добавляя в ваши приложения такие функции, как карты мира или схемы рассадки.
В мире веб-разработки существуют приложения для отображения географической информации. Хотя существуют способы внедрения Google Maps или аналогичных решений, их настройка оказывается не столь простой, когда требуется выделить географические области или реагировать на выбор пользователя. К счастью, библиотека Progress Telerik UI содержит элемент управления Карты .NET MAUI, который мы подробно рассмотрим в этой статье. Давайте начнем!
Что такое элемент управления Карты Telerik UI для .NET MAUI?
Элемент управления Карты Telerik .NET MAUI — это мощный инструмент для отображения карт в ваших приложениях .NET MAUI, обладающий множеством гибких возможностей стилизации. Он также поддерживает работу с несколькими слоями, панорамирование, масштабирование и множество других функций.
Элемент управления работает с шейп-файлами ESRI, которые являются стандартным векторным форматом в географических информационных системах или ГИС. Согласно документации MAUI Map, эти файлы состоят из геометрических объектов, таких как линии, полилинии и полигоны. Это позволяет отображать самые разные типы объектов: от планов этажей и схем распределения мест до фрагментов карт стран, дорог, рек и т. д.
Важно отметить, что шейп-файл ESRI состоит из двух файлов:
- Файл .shp, который содержит полигоны, прорисовывающие объекты на карте, такие как страна, регион или пользовательская фигура.
- Файл .dbf, который содержит атрибуты, связанные с каждой геометрией, такие как название страны или ее численность населения.
Элемент управления использует SkiaSharp для рендеринга геометрий шейп-файлов, что обеспечивает быстрый и согласованный рендеринг на разных платформах.
Наконец, следует знать, что элемент управления Карты .NET MAUI основан на использовании слоев, где каждый слой представляет собой источник данных, накладываемый поверх карты. Давайте посмотрим, как интегрировать этот элемент управления в приложение .NET MAUI.
Интеграция элемента управления Карты Telerik .NET MAUI в приложения .NET MAUI
Чтобы увидеть возможности элемента управления в действии, мы создадим новый проект, выбрав шаблон Приложение .NET MAUI (MAUI App) и убедившись, что в него не включен пример кода. После создания проекта вы можете следовать руководству по установке элементов управления Telerik в проекты .NET MAUI, что позволит использовать компоненты Telerik в вашем проекте.
Затем мы установим в проект следующий пакет NuGet:
Этот пакет поможет уменьшить количество повторяющегося кода в моделях представлений. С этим мы готовы к интеграции карты в наше приложение.
Загрузка данных карты
Как я упоминал ранее, для прорисовки карты элементу управления требуется шейп-файл. Чтобы упростить это руководство, мы скачаем файлы world.shp и world.dbf, которые компания Progress Telerik предоставила нам в репозитории примеров.
Чтобы использовать загруженные файлы, создадим новую папку в Resources/Maps, куда поместим файлы .shp и .dbf. Кроме того, мы должны пометить файлы как внедренные ресурсы (embedded resources), чего можно добиться, изменив файл проекта .csproj следующим образом:
Благодаря этому мы сможем в будущем использовать дополнительные файлы карт без необходимости настраивать каждый файл как внедренный. Кроме того, мы помечаем их как EmbeddedResource, чтобы они упаковывались в сборку приложения, что позволит нам прочитать их позже.
Создание демонстрационной модели представления
После добавления файлов карт следующим шагом станет создание модели представления для хранения информации о выбранной пользователем стране. Для этого мы определим файл MainViewModel.cs со следующим кодом:
Приведенный выше код определяет свойства для определения факта выбора, выбранной страны и выбранного населения. Свойство HasNoSelection позволит выводить сообщение, если страна еще не выбрана.
Отображение карты на странице ContentPage
Пришло время отобразить карту в приложении. Для этого откроем файл ContentPage, на котором мы хотим показать карту, и заменим его содержимое следующим:
В приведенном выше коде вы можете заметить, что мы используем свойства элемента управления карты, такие как MinZoomLevel и MaxZoomLevel, для ограничения диапазона масштабирования, а также InteractionMode для включения панорамирования и жестов масштабирования.
Кроме того, мы используем тег RadMap.Layers для добавления типа MapShapefileLayer, который будет считывать шейп-файл. Мы также используем тип MapShapeReader с именем reader, который будет отвечать за загрузку файлов .shp и .dbf.
Теперь мы должны загрузить файлы из кода программной части (code-зади) страницы, где мы определили карту, следующим образом:
В приведенном выше коде есть несколько элементов, заслуживающих внимания:
- Мы получаем доступ к информации о карте через специальный класс MapSource, с помощью которого загружаем ресурсы карты. Обязательно измените пространство имен в соответствии с названием вашего проекта.
- Мы подписываемся на событие ReadCompleted перед любым чтением карты, чтобы обработчик запускался по завершении чтения файлов.
- Мы используем свойства DataSource и Source для загрузки как самой карты, так и геометрий.
- В обработчике OnReadCompleted мы отписываемся от события чтения, чтобы оно выполнялось только один раз, а также используем методы SetView и GetBestView для вычисления региона, наиболее оптимально вмещающего все геометрии.
Перед запуском приложения мы должны вернуться в файл MauiProgram.cs и добавить в контейнер зависимостей ссылки на страницу содержимого и ее модель представления.
Теперь при запуске приложения мы сможем увидеть корректно отрисованный элемент управления карты:
Добавление меток на карту
Мы успешно добавили карту в наше приложение. Однако на ней не отображается никакой информации, что не очень полезно.
Файл .dbf содержит информацию, которую мы можем использовать для добавления дополнительных данных на карту, таких как названия стран. Для этого мы используем атрибут с именем CNTRY_NAME, изменив слой MapShapefileLayer для включения слоя LabelAttributeName:
В приведенном выше коде свойство LabelAttributeName позволяет добавить метку для каждой фигуры в слое MapShapefileLayer. При запуске приложения мы увидим названия на карте, как показано ниже:
В приведенной выше демонстрации вы можете видеть, как при изменении масштаба метки стран появляются постепенно, обеспечивая приятный пользовательский опыт.
Настройка карты
До сих пор мы использовали стиль карты по умолчанию; однако в реальных приложениях вам, вероятно, захочется раскрасить разные участки карты. Это возможно благодаря использованию MapShapeStyleSelector — селектора стилей, который мы можем применить для определения цветов каждого региона на карте.
В нашем примере мы сравним численность населения каждой страны, чтобы определить ее цвет. Для этого мы создадим новый класс с именем PopulationShapeStyleSelector, который будет определяться следующим образом:
Этот принцип работы похож на обычный селектор стилей .NET MAUI: мы определяем ссылки на стили как часть класса, в данном случае HighPopulationStyle, MediumPopulationStyle и LowPopulationStyle.
Затем из каждого объекта mapShape извлекается атрибут POP_CNTRY, который оценивается для определения применяемого стиля.
После определения селектора нам все еще нужно создать стили, которые будут применяться. Мы можем сделать это из ContentPage, где мы реализовали элемент управления карты, следующим образом:
Вы можете увидеть, что мы создаем экземпляр PopulationShapeStyleSelector, внутри которого мы присваиваем каждому свойству селектора MapShapeStyle, что позволит настроить каждый определенный селектор.
Последний шаг — указать, что мы хотим использовать только что созданный селектор в MapShapefileLayer:
Результат выполнения выглядит следующим образом:
На изображении выше вы можете увидеть, как страны окрашиваются в зависимости от численности их населения. Теперь давайте посмотрим, как выбирать регионы на карте.
Включение выбора стран
Чтобы сделать карту полностью функциональной, мы позволим пользователям выбирать страну для просмотра подробной информации о ней. Мы сделаем это, добавив использование свойства SelectionMode в MapShapefileLayer:
В приведенном выше коде мы указали, что одновременно может быть выбрана только одна страна, хотя вы также можете использовать значение Multiple, если вам нужно, чтобы пользователь мог выбрать более одной страны. Аналогичным образом мы определили раздел MapShapeStyle, который используется для указания характеристик выбранного региона.
Мы также дополним ContentPage нашего приложения, добавив контейнер Telerik RadBorder во вторую строку основной сетки, который будет служить для отображения информации о выбранной стране с использованием стандартных элементов управления и кнопок Telerik:
Вам также необходимо дополнить код ContentPage, чтобы реагировать на изменения выбора, а также обрабатывать действия кнопок:
В приведенном выше коде мы подписались на событие CollectionChanged, которое будет вызываться, когда пользователь выбирает или отменяет выбор страны. В обработчике события OnSelectedShapesChanged мы проверяем, есть ли выбранные фигуры; если нет, графические элементы, отображающие информацию о каждой стране, очищаются.
Если страна была выбрана, считываются атрибуты CNTRY_NAME и POP_CNTRY, а значения в модели представления обновляются.
Наконец, мы также создаем обработчики событий OnResetViewClicked для кнопки, которая позволяет снова центрировать всю карту с помощью метода GetBestView(). Мы также определили метод OnClearSelectionClicked, который будет использоваться для очистки коллекции SelectedShapes, чтобы отменить выбор любой выбранной страны и сбросить данные в пользовательском интерфейсе:
На изображении выше мы видим, как при выборе страны на карте информация о ней правильно отображается в нижней части.
Заключение
В этой статье вы познакомились с элементом управления Telerik UI Map для .NET MAUI, который является отличным вариантом для надежного и быстрого отображения карт, меток и регионов. Мы пошагово рассмотрели, как читать файлы фигур ESRI, а также как их визуализировать.
Мы также узнали, как раскрашивать различные регионы с помощью селектора стилей и как позволить пользователям выбирать определенные регионы на карте.
Теперь ваша очередь создавать уникальные возможности с помощью этого мощного элемента управления. Весь пакет Telerik UI для .NET MAUI поставляется с бесплатной 30-дневной пробной версией, чтобы вы могли изучить его самостоятельно.
Попробуйте сейчас
