Xamarin.Forms Mapear polígonos e polilinhas

Artigo
03/10/2020

Os elementos Polygon, Polyline e Circle permitem realçar áreas específicas em um mapa. Uma Polygon é uma forma totalmente fechada que pode ter um traçado e uma cor de preenchimento. Uma Polyline é uma linha que não abrange totalmente uma área. Uma Circle destaca uma área circular do mapa:

As classes Polygon, Polyline e Circle derivam da classe MapElement, que expõe as seguintes propriedades associáveis:

StrokeColor é um objeto Color que determina a cor da linha.
StrokeWidth é um objeto float que determina a largura da linha.

A classe Polygon define uma propriedade associável adicional:

FillColor é um objeto Color que determina a cor da tela de fundo do polígono.

Além disso, as classes Polygon e Polyline definem uma propriedade GeoPath, que é uma lista de objetos Position que especificam os pontos da forma.

A classe Circle define as seguintes propriedades associáveis:

Center é um objeto Position que define o centro do círculo, em latitude e longitude.
Radius é um objeto Distance que define o raio do círculo em metros, quilômetros ou milhas.
FillColor é uma propriedade Color que determina a cor dentro do perímetro do círculo.

Observação

Se a StrokeColor propriedade não for especificada, o traçado será padronizado para preto. Se a FillColor propriedade não for especificada, o preenchimento será padronizado para transparente. Portanto, se nenhuma das propriedades for especificada, a forma terá um contorno preto sem preenchimento.

Criar um polígono

Um Polygon objeto pode ser adicionado a um mapa instanciando-o e adicionando-o à coleção do MapElements mapa. Isso pode ser feito no XAML da seguinte maneira:

<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>

Este é o código C# equivalente:

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);

As StrokeColor propriedades and StrokeWidth são especificadas para personalizar o contorno do polígono. O FillColor valor da propriedade corresponde ao valor da StrokeColor propriedade, mas tem um valor alfa especificado para torná-lo transparente, permitindo que o mapa subjacente fique visível por meio da forma. A propriedade GeoPath contém uma lista de objetos Position que definem as coordenadas geográficas dos pontos de polígono. Um objeto Polygon é renderizado no mapa depois de ter sido adicionado à coleção MapElements do Map.

Observação

Um Polygon é uma forma totalmente fechada. O primeiro e o último pontos serão automaticamente conectados se não corresponderem.

Criar uma polilinha

Um Polyline objeto pode ser adicionado a um mapa instanciando-o e adicionando-o à coleção do MapElements mapa. Isso pode ser feito no XAML da seguinte maneira:

<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);

As StrokeColor propriedades e StrokeWidth são especificadas para personalizar a linha. A propriedade GeoPath contém uma lista de objetos Position que definem as coordenadas geográficas dos pontos de polilinha. Um objeto Polyline é renderizado no mapa depois de ter sido adicionado à coleção MapElements do Map.

Criar um círculo

Um Circle objeto pode ser adicionado a um mapa instanciando-o e adicionando-o à coleção do MapElements mapa. Isso pode ser feito no XAML da seguinte maneira:

<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>

Este é o código C# equivalente:

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);

A localização do Circle no Mapa é determinada pelo valor das propriedades Center e Radius. A propriedade Center define o centro do círculo em latitude e longitude, enquanto a propriedade Radius define o raio do círculo em metros. As StrokeColor propriedades e StrokeWidth são especificadas para personalizar o contorno do círculo. O valor da propriedade FillColor especifica a cor dentro do perímetro do círculo. Ambos os valores de cor especificam um canal alfa, permitindo que o mapa subjacente seja visível através do círculo. O objeto Circle é renderizado no mapa depois de ter sido adicionado à coleção MapElements do Map.

Observação

A classe GeographyUtils tem um método de extensão ToCircumferencePositions que converte um objeto Circle (que define os valores de propriedade Center e Radius) em uma lista de objetos Position que compõem as coordenadas de latitude e longitude do perímetro do círculo.

Compartilhar via

Xamarin.Forms Mapear polígonos e polilinhas

Criar um polígono

Criar uma polilinha

Criar um círculo

Recursos adicionais