Xamarin.Forms Zuordnen von Polygonen und Polylinien

Das Beispiel herunterladen

PolygonMit den PolylineElementen , und Circle können Sie bestimmte Bereiche auf einer Karte hervorheben. Ein Polygon ist eine vollständig eingeschlossene Form, die eine Strich- und Füllfarbe aufweisen kann. Ein Polyline ist eine Linie, die einen Bereich nicht vollständig umschließt. Ein Circle hebt einen kreisförmigen Bereich der Karte hervor:

Die PolygonKlassen , Polylineund Circle leiten sich von der MapElement -Klasse ab, die die folgenden bindbaren Eigenschaften verfügbar macht:

• StrokeColor ist ein Color -Objekt, das die Linienfarbe bestimmt.
• StrokeWidth ist ein float -Objekt, das die Linienbreite bestimmt.

Die Polygon -Klasse definiert eine zusätzliche bindbare Eigenschaft:

• FillColor ist ein Color -Objekt, das die Hintergrundfarbe des Polygons bestimmt.

Darüber hinaus definieren die Polygon Klassen und Polyline beide eine GeoPath Eigenschaft, bei der es sich um eine Liste von Position Objekten handelt, die die Punkte der Form angeben.

Die Circle -Klasse definiert die folgenden bindbaren Eigenschaften:

• Center ist ein Position -Objekt, das den Mittelpunkt des Kreises in Breiten- und Längengrad definiert.
• Radius ist ein Distance -Objekt, das den Radius des Kreises in Metern, Kilometern oder Meilen definiert.
• FillColor ist eine Color Eigenschaft, die die Farbe innerhalb des Kreisumrands bestimmt.

Hinweis

Wenn die StrokeColor -Eigenschaft nicht angegeben ist, wird der Strich standardmäßig auf schwarz festgelegt. Wenn die FillColor -Eigenschaft nicht angegeben ist, wird die Füllung standardmäßig auf transparent festgelegt. Wenn also keine eigenschaft angegeben ist, weist die Form eine schwarze Kontur ohne Füllung auf.

Erstellen eines Polygons

Ein Polygon -Objekt kann einer Karte hinzugefügt werden, indem es instanziiert und der Auflistung der MapElements Karte hinzugefügt wird. Dies kann in XAML folgendermaßen erfüllt werden:

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

Der entsprechende C#-Code lautet:

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

Die StrokeColor Eigenschaften und StrokeWidth werden angegeben, um die Kontur des Polygons anzupassen. Der FillColor Eigenschaftswert stimmt mit dem StrokeColor Eigenschaftswert überein, hat jedoch einen Alphawert, der angegeben ist, um ihn transparent zu machen, sodass die zugrunde liegende Zuordnung durch die Form sichtbar ist. Die GeoPath -Eigenschaft enthält eine Liste von Position Objekten, die die geografischen Koordinaten der Polygonpunkte definieren. Ein Polygon -Objekt wird auf der Karte gerendert, nachdem es der MapElements Auflistung von Maphinzugefügt wurde.

Hinweis

Ein Polygon ist eine vollständig eingeschlossene Form. Der erste und der letzte Punkt werden automatisch verbunden, wenn sie nicht übereinstimmen.

Erstellen einer Polylinie

Ein Polyline -Objekt kann einer Karte hinzugefügt werden, indem es instanziiert und der Auflistung der MapElements Karte hinzugefügt wird. Dies kann in XAML folgendermaßen erfüllt werden:

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

Die StrokeColor Eigenschaften und StrokeWidth werden angegeben, um die Zeile anzupassen. Die GeoPath -Eigenschaft enthält eine Liste von Position Objekten, die die geografischen Koordinaten der Polylinienpunkte definieren. Ein Polyline -Objekt wird auf der Karte gerendert, nachdem es der MapElements Auflistung von Maphinzugefügt wurde.

Erstellen eines Kreises

Ein Circle -Objekt kann einer Karte hinzugefügt werden, indem es instanziiert und der Auflistung der MapElements Karte hinzugefügt wird. Dies kann in XAML folgendermaßen erfüllt werden:

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

Der entsprechende C#-Code lautet:

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

Die Position von auf Circle der Karte wird durch den Wert der Center Eigenschaften und Radius bestimmt. Die Center -Eigenschaft definiert den Mittelpunkt des Kreises in Breiten- und Längengrad, während die Radius -Eigenschaft den Radius des Kreises in Metern definiert. Die StrokeColor Eigenschaften und StrokeWidth werden angegeben, um die Gliederung des Kreises anzupassen. Der FillColor -Eigenschaftswert gibt die Farbe innerhalb des Kreisumrands an. Beide Farbwerte geben einen Alphakanal an, sodass die zugrunde liegende Karte durch den Kreis sichtbar ist. Das Circle -Objekt wird auf der Karte gerendert, nachdem es der MapElements Auflistung von Maphinzugefügt wurde.

Hinweis

Die GeographyUtils -Klasse verfügt über eine ToCircumferencePositions Erweiterungsmethode, die ein Circle -Objekt (das - und Radius -Eigenschaftswerte Center definiert) in eine Liste von Position Objekten konvertiert, die die Breiten- und Längengradkoordinaten des Kreisumkreises bilden.

Verwandte Links

• Kartenbeispiel