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

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

Флажки
Все знакомы с культом полицейских детективов в кино и телевидении, и могут представить себе детектива стоящего перед картой на стене и втыкающего в карту флажки на иголке, соединяющие все точки. Рано или поздно мы узнаем, что детектив выяснил где находится плохой парень / мешок с деньгами / тикающая бомба с замедлителем. Этот телевизионный образ является убедительным, поскольку он является идеальным зеркалом того, как работает наш мозг — человеческий мозг постоянно оценивает случайные куски визуальной информации для того, чтобы найти закономерности и смысл.

Флажки в приложениях с картой точно таким же образом являются убедительными. Они предоставляют вам возможность привлечь внимание пользователя с помощью интересного визуального образа. В UWP MapControl аналог флажка называется MapIcon. Вы можете использовать его только для обозначения «Вы находитесь здесь» в вашем приложении, или создать символ для интересных близлежащих достопримечательностей, а так же для списка торговых центров. Чтобы добавить один флажок на карту, вам нужны всего лишь геокоординаты точки и заголовок.

  1. var pushpin = new MapIcon();
  2. // assign pushpin geoposition
  3. pushpin.Location = new Geopoint(new BasicGeoposition()
  4. {
  5.     Latitude = 51.178840,
  6.     Longitude = 1.826189
  7. });
  8. // assign pushpin title
  9. pushpin.Title = «Here’s something interesting!»;
  10. //  make sure pushpin always appears
  11. pushpin.CollisionBehaviorDesired = MapElementCollisionBehavior.RemainVisible;
  12. // set pushpin bottom center over geoposition
  13. pushpin.NormalizedAnchorPoint = new Point(0.5, 1.0);
  14. // put pushpin on the map
  15. this.myMap.MapElements.Add(pushpin);

Флажки имеют изображение по умолчанию, которое иногда могут быть скрыты с помощью меток или других элементов. Вы можете установить свойство CollisionBehaviorDesired в состояние RemainVisible для того, чтобы не допустить этого. По умолчанию верхний левый угол изображения будет появляться над геоположением для MapIcon. Вы можете сдвинуть его, присвая параметру NormalizedAnchorPoint х и у значения от 0 до 1 (устанавливается 0, 0, если не используется).

В то время как обычный флажок может быть полезным как показано выше, то MapIcon становится наиболее интересным, когда вы используете его для выявления скрытых закономерностей на карте. Например, сколько кофеен находится в радиусе одной мили вокруг вашего пользователя? Где чаще встречается НЛО на карте США? Как распределены средневековые замки на юге Франции? Каждая из этих моделей рассказывает историю, которая делает карты и ваше приложение привлекательным, а не просто утилитарным.
Вы можете использовать собственные изображения для замены изображения по умолчанию для того, чтобы дать вашему приложение больше индивидуальности и сделать ваши карты более актуальными. Изображение должно быть меньше, чем 2048 на 2048 пикселей.
Допустим вам нужен флажок в виде Стоунхенджа на равнине Солсбери в Англии. Вы можете изменить изображение MapIcon с помощью класса RandomAccessStreamReference, чтобы указать ваш выбор.

  1. // set pushpin title
  2. pushpin.Title = «Stonehenge»;
  3. // add custom Stonehenge image
  4. var myImageUri = new Uri(«ms-appx:///Assets/upright.png»);
  5. pushpin.Image = RandomAccessStreamReference.CreateFromUri(myImageUri);

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

  1. // create Stonehenge geoposition
  2. var locStonehenge = new BasicGeoposition()
  3. {
  4.     Latitude = 51.178840,
  5.     Longitude = 1.826189
  6. };
  7. // create Swinside circle geoposition
  8. var locSwinside = new BasicGeoposition()
  9. {
  10.     Latitude = 54.282490,
  11.     Longitude = 3.273860
  12. };
  13. // instantiate mappolyline
  14. var polyline = new MapPolyline();
  15. // add geopsitions to path
  16. polyline.Path = new Geopath(new List<BasicGeoposition>() {locStonehenge, locSwinside});
  17. //set appearance of connector line
  18. polyline.StrokeColor = Colors.OrangeRed;
  19. polyline.StrokeThickness = 2;
  20. polyline.StrokeDashed = true;
  21. // add to map
  22. this.myMap.MapElements.Add(polyline);

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

Добавление фигур на вашу карту
Класс MapPolygon позволяет добавлять фигуры на карту таким же образом как класс MapPolyline позволяет добавлять линии. Разница состоит в том, что полигон может иметь цвет заливки. Для забавы давайте нарисуем фигуру между трёх каменных кругов ближе к югу.

  1. // instantiate mappolygon
  2. var polygon = new MapPolygon();
  3. // set appearance
  4. polygon.StrokeColor = Colors.DeepSkyBlue;
  5. polygon.FillColor = Color.FromArgb(100,255,255,0);
  6. polygon.StrokeThickness = 4;
  7. //create path
  8. polygon.Path = new Geopath(new List<BasicGeoposition>()
  9. {
  10.     new BasicGeoposition() {Latitude=52.5, Longitude=-3.5 },
  11.     new BasicGeoposition() {Latitude=52.5, Longitude=-2.5 },
  12.     new BasicGeoposition() {Latitude=52, Longitude=-2.5 },
  13.     new BasicGeoposition() {Latitude=52, Longitude=-3.5 },
  14. });
  15. // add to map
  16. this.myMap.MapElements.Add(polygon);

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

Добавление элементов XAML на вашу карту
Наконец, вы можете также рассматривать MapControl как своего рода холст и добавить XAML элементы в коллекцию Children вашей карты. Затем с помощью прикрепленных свойств вы можете настроить элемент XAML, как только он будет добавлен в визуальную иерархию.

  1. // create new button
  2. var button = new Button();
  3. button.Content = «Push this!»;
  4. this.myMap.Children.Add(button);
  5. // assign geoposition
  6. var position = new Geopoint(new BasicGeoposition()
  7. {
  8.     Latitude = 52.25,
  9.     Longitude = 3.0
  10. });
  11. MapControl.SetLocation(button, position);
  12. // center button over geoposition
  13. MapControl.SetNormalizedAnchorPoint(button, new Point(0.5, 0.5));

Не добавляйте много элементов XAML без особой необходимости. Они добавляют некоторые издержки производительности, поэтому используйте их только когда вам требуется богатый стиль оформления или интерактивность.

Подводя итоги
MapControl является чрезвычайно мощным и универсальным классом. В то время как в предыдущих публикациях этой серии было показано как его использовать относительно привычным способом, в этой публикации мы пошли дальше и показали вам как создать уникальное приложение с картой, специфичное для ваших целей, интересов, потребностей пользователей.
Имея почти полный контроль над визуализацией карты — это даже побуждает некоторых разработчиков использовать MapControl для целей, отличных обычных карт, например, воссоздавая настольную игру Risk, использующую карту в качестве подосновы. Один инновационный разработчик даже использовал Kinect для сканирования 3D-модели своей головы, которую он мог затем поместить в любую точку мира на подобие передвижной горы Рашмор.

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

Перевод оригинальной публикации Map APIs and controls: Adding external elements
Перевод: Сергей Урусов

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

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