Xamarin.Forms Mappa poligoni e polilinee

Articolo
03/10/2020

PolygonGli elementi , Polylinee Circle consentono di evidenziare aree specifiche su una mappa. Un Polygon oggetto è una forma completamente racchiusa che può avere un tratto e un colore di riempimento. È Polyline una linea che non racchiude completamente un'area. Un Circle oggetto evidenzia un'area circolare della mappa:

Le Polygonclassi , Polylinee Circle derivano dalla MapElement classe , che espone le proprietà associabili seguenti:

StrokeColor è un Color oggetto che determina il colore della linea.
StrokeWidth è un float oggetto che determina la larghezza della linea.

La Polygon classe definisce una proprietà associabile aggiuntiva:

FillColor è un Color oggetto che determina il colore di sfondo del poligono.

Inoltre, le Polygon classi e Polyline definiscono entrambe una GeoPath proprietà , ovvero un elenco di Position oggetti che specificano i punti della forma.

La Circle classe definisce le proprietà associabili seguenti:

Center è un Position oggetto che definisce il centro del cerchio, in latitudine e longitudine.
Radius è un Distance oggetto che definisce il raggio del cerchio in metri, chilometri o miglia.
FillColor è una Color proprietà che determina il colore all'interno del perimetro del cerchio.

Nota

Se la StrokeColor proprietà non è specificata, per impostazione predefinita il tratto sarà nero. Se la FillColor proprietà non è specificata, per impostazione predefinita il riempimento sarà trasparente. Pertanto, se non viene specificata alcuna proprietà, la forma avrà un contorno nero senza riempimento.

Creare un poligono

Un Polygon oggetto può essere aggiunto a una mappa creando un'istanza e aggiungendolo alla raccolta della MapElements mappa. Per ottenere questo risultato, è possibile procedere come segue in 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>

Il codice C# equivalente è il seguente:

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

Le StrokeColor proprietà e StrokeWidth vengono specificate per personalizzare il contorno del poligono. Il valore della FillColor proprietà corrisponde al valore della StrokeColor proprietà, ma ha un valore alfa specificato per renderlo trasparente, consentendo alla mappa sottostante di essere visibile attraverso la forma. La GeoPath proprietà contiene un elenco di Position oggetti che definiscono le coordinate geografiche dei punti poligoni. Viene eseguito il rendering di un Polygon oggetto sulla mappa dopo che è stato aggiunto all'insieme MapElements dell'oggetto Map.

Nota

Un Polygon oggetto è una forma completamente racchiusa. I primi e gli ultimi punti verranno collegati automaticamente se non corrispondono.

Creare una polilinea

Un Polyline oggetto può essere aggiunto a una mappa creando un'istanza e aggiungendolo alla raccolta della MapElements mappa. Per ottenere questo risultato, è possibile procedere come segue in 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);

Le StrokeColor proprietà e StrokeWidth vengono specificate per personalizzare la riga. La GeoPath proprietà contiene un elenco di Position oggetti che definiscono le coordinate geografiche dei punti polilinei. Viene eseguito il rendering di un Polyline oggetto sulla mappa dopo che è stato aggiunto all'insieme MapElements dell'oggetto Map.

Creare un cerchio

Un Circle oggetto può essere aggiunto a una mappa creando un'istanza e aggiungendolo alla raccolta della MapElements mappa. Per ottenere questo risultato, è possibile procedere come segue in 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>

Il codice C# equivalente è il seguente:

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 posizione dell'oggetto Circle sulla mappa è determinata dal valore delle Center proprietà e Radius . La Center proprietà definisce il centro del cerchio, in latitudine e longitudine, mentre la Radius proprietà definisce il raggio del cerchio in metri. Le StrokeColor proprietà e StrokeWidth vengono specificate per personalizzare il contorno del cerchio. Il valore della FillColor proprietà specifica il colore all'interno del perimetro del cerchio. Entrambi i valori di colore specificano un canale alfa, consentendo la visualizzazione della mappa sottostante attraverso il cerchio. Il rendering dell'oggetto Circle viene eseguito sulla mappa dopo che è stato aggiunto all'insieme MapElements dell'oggetto Map.

Nota

La GeographyUtils classe ha un ToCircumferencePositions metodo di estensione che converte un Circle oggetto (che definisce Center i valori delle proprietà e Radius ) in un elenco di Position oggetti che costituiscono le coordinate di latitudine e longitudine del perimetro del cerchio.

Condividi tramite

Xamarin.Forms Mappa poligoni e polilinee

Creare un poligono

Creare una polilinea

Creare un cerchio

Risorse aggiuntive