Стартовая страницаНовостиОтображение объектов на карте
Читайте также:

Отображение объектов на карте

О разработке UWP-приложения, использующего картографический сервис для размещения на карту объектов с использованием вешок, изображений, фигур и элементов пользовательского интерфейса XAML. Объект — это определенная точка на карте, представляющая что-нибудь интересное. Например, это может быть расположение компании, города или друга.

Совет. Чтобы получить дополнительные сведения об отображении объектов в приложении, скачайте следующий образец из репозитория Windows-universal-samples на веб-сайте GitHub.

Вы можете отображать вешки, изображения и фигуры на карте, добавляя объекты MapIcon, MapPolygon и MapPolyline в коллекцию MapElements элемента управления картой. Используйте привязку данных или добавляйте элементы программным способом. Невозможно выполнить привязку к коллекции MapElements с помощью объявлений в разметке XAML.

Чтобы отобразить элементы пользовательского интерфейса XAML, например Button, HyperlinkButton или TextBlock, на карте, добавьте их в качестве Children объекта MapControl. Кроме того, можно добавить их в объект MapItemsControl или привязать объект MapItemsControl к коллекции элементов.

Краткие сведения.

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

 

Добавление объекта MapIcon

Чтобы показать изображение, например вешку на карте, и при желании добавить к нему текст, используйте класс MapIcon. Можно принять изображение по умолчанию или указать пользовательское изображение с помощью свойства Image. На рисунке ниже показано изображение по умолчанию для объекта MapIcon, у которого не задано значения для свойства Title, с коротким названием, длинным названием и очень длинным названием.

В примере ниже показано, как отобразить карту Сиэтла и добавить объект MapIcon с изображением по умолчанию и необязательным заголовком, чтобы указать расположение башни Спейс-Нидл. Кроме того, в примере показано, как выполнить центровку карты по отношению к значку и увеличить ее масштаб. Общие сведения об использовании элемента управления картой см. в статье Отображение карт с помощью двумерных и трехмерных представлений, а также представлений Streetside.

 private void displayPOIButton_Click(object sender, RoutedEventArgs e)
 {
 // Specify a known location.
 BasicGeoposition snPosition = new BasicGeoposition() { Latitude = 47.620, Longitude = -122.349 };
 Geopoint snPoint = new Geopoint(snPosition);

 // Create a MapIcon.
 MapIcon mapIcon1 = new MapIcon();
 mapIcon1.Location = snPoint;
 mapIcon1.NormalizedAnchorPoint = new Point(0.5, 1.0);
 mapIcon1.Title = "Space Needle";
 mapIcon1.ZIndex = 0;

 // Add the MapIcon to the map.
 MapControl1.MapElements.Add(mapIcon1);

 // Center the map over the POI.
 MapControl1.Center = snPoint;
 MapControl1.ZoomLevel = 14;
 }

В этом примере отображаются указанные ниже объекты на карте (изображение по умолчанию находится в центре).

Указанная ниже строка кода отображает объект MapIcon с пользовательским изображением, сохраненным в папке Assets проекта. Свойство Image объекта MapIcon предполагает значение типа RandomAccessStreamReference. Этому типу требуется оператор using для пространства имен Windows.Storage.Streams.

Совет. Чтобы обеспечить максимальную производительность при использовании одного и того же изображения для нескольких значков карт, объявите объект RandomAccessStreamReference на уровне страницы или приложения.

 MapIcon1.Image =
 RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/customicon.png"));

При работе с классом MapIcon учитывайте указанные ниже соображения.

  • Свойство Image поддерживает изображения размером не более 2048×2048 пикселей.
  • По умолчанию отображение изображения значка карты не гарантируется. Этот элемент может быть скрыт, если он заслоняет другие элементы или метки на карте. Чтобы он оставался видимым, задайте для свойства CollisionBehaviorDesired значка карты значение MapElementCollisionBehavior.RemainVisible.
  • Отображение необязательного свойства Title объекта MapIcon не гарантируется. Если текст не отображается, уменьшите масштаб, уменьшив значение свойства ZoomLevel объекта MapControl.
  • При показе изображения MapIcon, которое указывает определенное местоположение на карте, например вешки или стрелки, попробуйте присвоить значению свойства NormalizedAnchorPoint приблизительное расположение указателя на изображении. Если для свойства NormalizedAnchorPoint оставить значение по умолчанию (0, 0), которое соответствует верхнему левому углу изображения, то в результате изменений свойства карты ZoomLevel изображение может указывать на другое расположение.

Добавление объекта MapPolygon

Для отображения многоточечной фигуры на карте используйте класс MapPolygon. В фрагменте ниже из примера карты UWP показано, как отобразить красное поле с синей рамкой на карте.

private void mapPolygonAddButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
 double centerLatitude = myMap.Center.Position.Latitude;
 double centerLongitude = myMap.Center.Position.Longitude;
 MapPolygon mapPolygon = new MapPolygon();
 mapPolygon.Path = new Geopath(new List<BasicGeoposition>() {
 new BasicGeoposition() {Latitude=centerLatitude+0.0005, Longitude=centerLongitude-0.001 }, 
 new BasicGeoposition() {Latitude=centerLatitude-0.0005, Longitude=centerLongitude-0.001 }, 
 new BasicGeoposition() {Latitude=centerLatitude-0.0005, Longitude=centerLongitude+0.001 },
 new BasicGeoposition() {Latitude=centerLatitude+0.0005, Longitude=centerLongitude+0.001 },

 });
 
 mapPolygon.ZIndex = 1;
 mapPolygon.FillColor = Colors.Red;
 mapPolygon.StrokeColor = Colors.Blue;
 mapPolygon.StrokeThickness = 3;
 mapPolygon.StrokeDashed = false;
 myMap.MapElements.Add(mapPolygon);
}

Добавление объекта MapPolyline

Для отображения линии на карте используйте класс MapPolyline. В фрагменте ниже из примера карты UWP показано, как отобразить пунктирную линию на карте.

private void mapPolylineAddButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
 double centerLatitude = myMap.Center.Position.Latitude;
 double centerLongitude = myMap.Center.Position.Longitude;
 MapPolyline mapPolyline = new MapPolyline();
 mapPolyline.Path = new Geopath(new List<BasicGeoposition>() { 
 new BasicGeoposition() {Latitude=centerLatitude-0.0005, Longitude=centerLongitude-0.001 }, 
 new BasicGeoposition() {Latitude=centerLatitude+0.0005, Longitude=centerLongitude+0.001 },
 });
 
 mapPolyline.StrokeColor = Colors.Black;
 mapPolyline.StrokeThickness = 3;
 mapPolyline.StrokeDashed = true;
 myMap.MapElements.Add(mapPolyline);
}

Добавление XAML

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

  • Чтобы задать расположение на карте, где необходимо разместить XAML, вызовите метод SetLocation.
  • Чтобы настроить относительное расположение в XAML, соответствующее указанному расположению, вызовите метод SetNormalizedAnchorPoint.

В примере ниже показано, как отобразить карту Сиэтла и добавить элемент управления Border XAML, чтобы указать расположение башни Спейс-Нидл. Кроме того, в примере показано, как выполнить центровку карты по отношению к области и увеличить ее масштаб. Общие сведения об использовании элемента управления картой см. в статье Отображение карт с помощью двумерных и трехмерных представлений, а также представлений Streetside.

private void displayXAMLButton_Click(object sender, RoutedEventArgs e)
{
 // Specify a known location.
 BasicGeoposition snPosition = new BasicGeoposition() { Latitude = 47.620, Longitude = -122.349 };
 Geopoint snPoint = new Geopoint(snPosition);

 // Create a XAML border.
 Border border = new Border
 {
 Height = 100,
 Width = 100,
 BorderBrush = new SolidColorBrush(Windows.UI.Colors.Blue),
 BorderThickness = new Thickness(5),
 };

 // Center the map over the POI.
 MapControl1.Center = snPoint;
 MapControl1.ZoomLevel = 14;

 // Add XAML to the map.
 MapControl1.Children.Add(border);
 MapControl.SetLocation(border, snPoint);
 MapControl.SetNormalizedAnchorPoint(border, new Point(0.5, 0.5));
}

В этом примере показано, как отобразить синюю рамку на карте.

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

В этом примере показано, как отобразить два элемента управления XAML в качестве неявных потомков класса MapControl.

<maps:MapControl>
 <TextBox Text="Seattle" maps:MapControl.Location="{Binding SeattleLocation}"/>
 <TextBox Text="Bellevue" maps:MapControl.Location="{Binding BellevueLocation}"/>
</maps:MapControl>


В этом примере показано, как отобразить два элемента управления XAML, содержащиеся в классе MapItemsControl.

<maps:MapControl>
 <maps:MapItemsControl>
 <TextBox Text="Seattle" maps:MapControl.Location="{Binding SeattleLocation}"/>
 <TextBox Text="Bellevue" maps:MapControl.Location="{Binding BellevueLocation}"/>
 </maps:MapItemsControl>
</maps:MapControl>


В этом примере показано, как отобразить коллекцию элементов XAML, связанных с классом MapItemsControl.

<maps:MapControl x:Name="MapControl" MapTapped="MapTapped" MapDoubleTapped="MapTapped" MapHolding="MapTapped">
 <maps:MapItemsControl ItemsSource="{Binding StateOverlays}">
 <maps:MapItemsControl.ItemTemplate>
 <DataTemplate>
 <StackPanel Background="Black" Tapped="Overlay_Tapped">
 <TextBlock maps:MapControl.Location="{Binding Location}" Text="{Binding Name}" maps:MapControl.NormalizedAnchorPoint="0.5,0.5" FontSize="20" Margin="5"/>
 </StackPanel>
 </DataTemplate>
 </maps:MapItemsControl.ItemTemplate>
 </maps:MapItemsControl>
</maps:MapControl>

 

 

Пока еще нет ни одного комментария. 

Дима Кононов © - разработка сайтов и порталов.


Функционирует с 2013 года. Версия 3.0
Разработка и дизайн: Кононов Дмитрий
Комментарий: У меня есть, что сказать по этому поводу, но я лучше промолчу.
Сейчас зарегистрированных посетителей на сайте: 0 Посмотреть подробнее...
Новостная лента RSS 2.0

Вверх