Xamarin.Forms Сопоставление многоугольников и полилайнов

Статья
03/10/2020

Polygon, Polylineи Circle элементы позволяют выделить определенные области на карте. A Polygon — это полностью заключенная фигура, которая может иметь цвет штриха и заливки. Строка Polyline , которая не полностью заключена в область. Выделена Circle круговая область карты:

PolylineCircle КлассыPolygon, производные от MapElement класса, предоставляют следующие привязываемые свойства:

StrokeColor — это объект, определяющий Color цвет линии.
StrokeWidth — это объект, определяющий float ширину линии.

Класс Polygon определяет дополнительное привязываемое свойство:

FillColor — это объект, определяющий Color цвет фона многоугольника.

Кроме того, Polygon и Polyline классы определяют GeoPath свойство, которое представляет собой список Position объектов, которые указывают точки фигуры.

Класс Circle определяет следующие привязываемые свойства:

CenterPosition— это объект, определяющий центр круга в широте и долготе.
RadiusDistance— это объект, определяющий радиус круга в метрах, километрах или милях.
FillColorColor— это свойство, определяющее цвет в периметре круга.

Примечание.

StrokeColor Если свойство не указано, штрих по умолчанию будет черным. FillColor Если свойство не указано, заливка по умолчанию будет прозрачной. Таким образом, если ни свойство не указано, фигура будет иметь черную структуру без заливки.

Создание многоугольника

Объект Polygon можно добавить на карту, создав его и добавив его в коллекцию карты MapElements . Это можно сделать в XAML следующим образом:

<ContentPage ...
             xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps">
     <maps:Map>
         <maps:Map.MapElements>
             <maps:Polygon StrokeColor="#FF9900"
                           StrokeWidth="8"
                           FillColor="#88FF9900">
                 <maps:Polygon.Geopath>
                     <maps:Position>
                         <x:Arguments>
                             <x:Double>47.6368678</x:Double>
                             <x:Double>-122.137305</x:Double>
                         </x:Arguments>
                     </maps:Position>
                     ...
                 </maps:Polygon.Geopath>
             </maps:Polygon>
         </maps:Map.MapElements>
     </maps:Map>
</ContentPage>

Эквивалентный код на C# выглядит так:

using Xamarin.Forms.Maps;
// ...
Map map = new Map
{
  // ...
};

// instantiate a polygon
Polygon polygon = new Polygon
{
    StrokeWidth = 8,
    StrokeColor = Color.FromHex("#1BA1E2"),
    FillColor = Color.FromHex("#881BA1E2"),
    Geopath =
    {
        new Position(47.6368678, -122.137305),
        new Position(47.6368894, -122.134655),
        new Position(47.6359424, -122.134655),
        new Position(47.6359496, -122.1325521),
        new Position(47.6424124, -122.1325199),
        new Position(47.642463,  -122.1338932),
        new Position(47.6406414, -122.1344833),
        new Position(47.6384943, -122.1361248),
        new Position(47.6372943, -122.1376912)
    }
};

// add the polygon to the map's MapElements collection
map.MapElements.Add(polygon);

StrokeWidth Свойства StrokeColor задаются для настройки структуры многоугольника. FillColor Значение свойства соответствует StrokeColor значению свойства, но имеет альфа-значение, указывающее, чтобы сделать его прозрачным, что позволяет базовой карте отображаться через фигуру. Свойство GeoPath содержит список объектов, определяющих Position географические координаты точек многоугольника. Объект Polygon отображается на карте после добавления MapElements в коллекцию Mapобъекта.

Примечание.

A Polygon — это полностью заключенная фигура. Первые и последние точки будут автоматически подключены, если они не совпадают.

Создание полилайна

Объект Polyline можно добавить на карту, создав его и добавив его в коллекцию карты MapElements . Это можно сделать в XAML следующим образом:

<ContentPage ...
             xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps">
     <maps:Map>
         <maps:Map.MapElements>
             <maps:Polyline StrokeColor="Blue"
                            StrokeWidth="12">
                 <maps:Polyline.Geopath>
                     <maps:Position>
                         <x:Arguments>
                             <x:Double>47.6381401</x:Double>
                             <x:Double>-122.1317367</x:Double>
                         </x:Arguments>
                     </maps:Position>
                     ...
                 </maps:Polyline.Geopath>
             </maps:Polyline>
         </maps:Map.MapElements>
     </maps:Map>
</ContentPage>

using Xamarin.Forms.Maps;
// ...
Map map = new Map
{
  // ...
};
// instantiate a polyline
Polyline polyline = new Polyline
{
    StrokeColor = Color.Blue,
    StrokeWidth = 12,
    Geopath =
    {
        new Position(47.6381401, -122.1317367),
        new Position(47.6381473, -122.1350841),
        new Position(47.6382847, -122.1353094),
        new Position(47.6384582, -122.1354703),
        new Position(47.6401136, -122.1360819),
        new Position(47.6403883, -122.1364681),
        new Position(47.6407426, -122.1377019),
        new Position(47.6412558, -122.1404056),
        new Position(47.6414148, -122.1418647),
        new Position(47.6414654, -122.1432702)
    }
};

// add the polyline to the map's MapElements collection
map.MapElements.Add(polyline);

StrokeWidth Для StrokeColor настройки строки указываются свойства. Свойство GeoPath содержит список объектов, определяющих Position географические координаты многолинейных точек. Объект Polyline отображается на карте после добавления MapElements в коллекцию Mapобъекта.

Создание круга

Объект Circle можно добавить на карту, создав его и добавив его в коллекцию карты MapElements . Это можно сделать в XAML следующим образом:

<ContentPage ...
             xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps">
      <maps:Map>
          <maps:Map.MapElements>
              <maps:Circle StrokeColor="#88FF0000"
                           StrokeWidth="8"
                           FillColor="#88FFC0CB">
                  <maps:Circle.Center>
                      <maps:Position>
                          <x:Arguments>
                              <x:Double>37.79752</x:Double>
                              <x:Double>-122.40183</x:Double>
                          </x:Arguments>
                      </maps:Position>
                  </maps:Circle.Center>
                  <maps:Circle.Radius>
                      <maps:Distance>
                          <x:Arguments>
                              <x:Double>250</x:Double>
                          </x:Arguments>
                      </maps:Distance>
                  </maps:Circle.Radius>
              </maps:Circle>             
          </maps:Map.MapElements>
          ...
      </maps:Map>
</ContentPage>

Эквивалентный код на C# выглядит так:

using Xamarin.Forms.Maps;
// ...
Map map = new Map();

// Instantiate a Circle
Circle circle = new Circle
{
    Center = new Position(37.79752, -122.40183),
    Radius = new Distance(250),
    StrokeColor = Color.FromHex("#88FF0000"),
    StrokeWidth = 8,
    FillColor = Color.FromHex("#88FFC0CB")
};

// Add the Circle to the map's MapElements collection
map.MapElements.Add(circle);

Расположение Circle карты определяется значением Center и Radius свойствами. Свойство Center определяет центр круга в широте и долготе, а Radius свойство определяет радиус круга в метрах. StrokeWidth Свойства StrokeColor задаются для настройки структуры круга. Значение FillColor свойства указывает цвет в периметре круга. Оба значения цвета указывают альфа-канал, что позволяет базовой карте отображаться через круг. Объект Circle отображается на карте после добавления MapElements в коллекцию Mapобъекта.

Примечание.

Класс GeographyUtils имеет ToCircumferencePositions метод расширения, который преобразует Circle объект (который определяет Center и значения свойств) в список объектов, составляющих Position координаты широты и Radius долготы периметра круга.

Поделиться через

Xamarin.Forms Сопоставление многоугольников и полилайнов

Создание многоугольника

Создание полилайна

Создание круга

Дополнительные ресурсы