Xamarin.Forms Mapper des polygones et des polylignes

Article
03/10/2020

Les éléments Polygon, Polyline et Circle vous permettent de mettre en évidence des zones spécifiques sur une carte. Un Polygon est une forme entièrement fermée qui peut avoir une couleur de trait et de remplissage. Un Polyline est une ligne qui n’entoure pas entièrement une zone. Un Circle met en évidence une zone circulaire de la carte :

Les classes Polygon, Polyline et Circle dérivent de la classe MapElement, qui expose les propriétés pouvant être liées suivantes :

StrokeColor est un objet Color qui détermine la couleur de ligne.
StrokeWidth est un objet float qui détermine la largeur de ligne.

La classe Polygon définit une propriété pouvant être liée supplémentaire :

FillColor est un objet Color qui détermine la couleur d’arrière-plan du polygone.

En outre, les classes Polygon et Polyline définissent une propriété GeoPath, qui est une liste d’objets Position qui spécifient les points de la forme.

La classe Circle définit les propriétés pouvant être liées suivantes :

Center est un objet Position qui définit le centre du cercle, en latitude et longitude.
Radius est un objet Distance qui définit le rayon du cercle en mètres, kilomètres ou miles.
FillColor est une Color propriété qui détermine la couleur à l’intérieur du périmètre du cercle.

Remarque

Si la propriété n’est pas spécifiée, le StrokeColor trait est défini par défaut sur noir. Si la FillColor propriété n’est pas spécifiée, le remplissage est par défaut transparent. Par conséquent, si aucune propriété n’est spécifiée, la forme aura un contour noir sans remplissage.

Créer un polygone

Un Polygon objet peut être ajouté à une carte en l’instanciant et en l’ajoutant à la collection de MapElements la carte. Cela peut être accompli en XAML de la façon suivante :

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

Le code C# équivalent est :

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

Les StrokeColor propriétés et StrokeWidth les propriétés sont spécifiées pour personnaliser le contour du polygone. La FillColor valeur de propriété correspond à la StrokeColor valeur de la propriété, mais elle a une valeur alpha spécifiée pour la rendre transparente, ce qui permet à la carte sous-jacente d’être visible par le biais de la forme. La propriété GeoPath contient une liste d’objets Position définissant les coordonnées géographiques des points du polygone. Un objet Polygon est affiché sur la carte une fois qu’il a été ajouté à la collection MapElements du Map.

Remarque

Un Polygon est une forme entièrement fermée. Les premier et dernier points sont automatiquement connectés s’ils ne correspondent pas.

Créer une polyligne

Un Polyline objet peut être ajouté à une carte en l’instanciant et en l’ajoutant à la collection de MapElements la carte. Cela peut être accompli en XAML de la façon suivante :

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

Les StrokeColor propriétés et StrokeWidth les propriétés sont spécifiées pour personnaliser la ligne. La propriété GeoPath contient une liste d’objets Position définissant les coordonnées géographiques des points de la polyligne. Un objet Polyline est affiché sur la carte une fois qu’il a été ajouté à la collection MapElements du Map.

Créer un cercle

Un Circle objet peut être ajouté à une carte en l’instanciant et en l’ajoutant à la collection de MapElements la carte. Cela peut être accompli en XAML de la façon suivante :

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

Le code C# équivalent est :

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

La localisation du Circle sur la carte est déterminée par la valeur des propriétés Center et Radius. La propriété Center définit le centre du cercle, en latitude et longitude, tandis que la propriété Radius définit le rayon du cercle en mètres. Les StrokeColor propriétés et StrokeWidth les propriétés sont spécifiées pour personnaliser le contour du cercle. La valeur de propriété FillColor spécifie la couleur à l’intérieur du périmètre du cercle. Les deux valeurs de couleur spécifient un canal alpha, ce qui permet à la carte sous-jacente d’être visible par le cercle. L’objet Circle est affiché sur la carte une fois qu’il a été ajouté à la collection MapElements du Map.

Remarque

La classe GeographyUtils a une méthode d’extension ToCircumferencePositions qui convertit un objet Circle (qui définit des valeurs de propriétés Center et Radius) en liste d’objets Position qui composent les coordonnées de latitude et de longitude du périmètre du cercle.

Partager via

Xamarin.Forms Mapper des polygones et des polylignes

Créer un polygone

Créer une polyligne

Créer un cercle

Ressources supplémentaires