Xamarin.Forms Mapovat mnohoúhelníky a lomené čáry

Článek
03/10/2020

Polygon, Polylinea Circle prvky umožňují zvýraznit konkrétní oblasti na mapě. A Polygon je plně uzavřený obrazec, který může mít tah a barvu výplně. A Polyline je čára, která zcela neohraničuje oblast. Zvýrazní Circle kruhovou oblast mapy:

Třídy Polygon, Polylinea Circle třídy odvozeny od MapElement třídy, která zveřejňuje následující bindable vlastnosti:

StrokeColorColor je objekt, který určuje barvu čáry.
StrokeWidthfloat je objekt, který určuje šířku čáry.

Třída Polygon definuje další vlastnost bindable:

FillColorColor je objekt, který určuje barvu pozadí mnohoúhelníku.

Kromě toho obě Polygon Polyline třídy definují GeoPath vlastnost, což je seznam Position objektů, které určují body obrazce.

Třída Circle definuje následující vlastnosti s možností vytvoření vazby:

CenterPosition je objekt, který definuje střed kruhu v zeměpisné šířce a délce.
RadiusDistance je objekt, který definuje poloměr kruhu v metrech, kilometrech nebo mílích.
FillColorColor je vlastnost, která určuje barvu v obvodu kruhu.

Poznámka:

StrokeColor Pokud vlastnost není zadána, bude tah ve výchozím nastavení černý. FillColor Pokud vlastnost není zadána, výplň bude ve výchozím nastavení průhledná. Pokud tedy není zadána žádná vlastnost, obrazec bude mít černý obrys bez výplně.

Vytvoření mnohoúhelníku

Objekt Polygon lze přidat do mapy tak, že ho vytvoříte instanci a přidáte ho do kolekce mapy MapElements . To lze provést v XAML následujícím způsobem:

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

Ekvivalentní kód jazyka C# je:

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

Jsou zadány StrokeColor a StrokeWidth vlastnosti pro přizpůsobení obrysu mnohoúhelníku. Hodnota FillColor vlastnosti odpovídá hodnotě StrokeColor vlastnosti, ale má zadanou alfa hodnotu, aby byla průhledná, což umožňuje, aby podkladová mapa byla viditelná přes obrazec. Vlastnost GeoPath obsahuje seznam Position objektů definujících geografické souřadnice mnohoúhelníku. Objekt Polygon se vykreslí na mapě po jeho přidání do MapElements kolekce objektu Map.

Poznámka:

A Polygon je plně uzavřený obrazec. První a poslední body se automaticky připojí, pokud se neshodují.

Vytvoření čáry

Objekt Polyline lze přidat do mapy tak, že ho vytvoříte instanci a přidáte ho do kolekce mapy MapElements . To lze provést v XAML následujícím způsobem:

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

Pro StrokeColor přizpůsobení řádku jsou zadány vlastnosti StrokeWidth . Vlastnost GeoPath obsahuje seznam Position objektů definujících zeměpisné souřadnice čar. Objekt Polyline se vykreslí na mapě po jeho přidání do MapElements kolekce objektu Map.

Vytvoření kruhu

Objekt Circle lze přidat do mapy tak, že ho vytvoříte instanci a přidáte ho do kolekce mapy MapElements . To lze provést v XAML následujícím způsobem:

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

Ekvivalentní kód jazyka C# je:

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

Umístění na Circle mapě je určeno hodnotou Center a Radius vlastnostmi. Vlastnost Center definuje střed kruhu v zeměpisné šířce a délce, zatímco Radius vlastnost definuje poloměr kruhu v metrech. Jsou zadány StrokeColor a StrokeWidth vlastnosti pro přizpůsobení obrysu kruhu. Hodnota FillColor vlastnosti určuje barvu v obvodu kruhu. Obě hodnoty barev určují alfa kanál, který umožňuje, aby podkladová mapa byla viditelná prostřednictvím kruhu. Objekt Circle se vykreslí na mapě po jeho přidání do MapElements kolekce objektu Map.

Poznámka:

GeographyUtils Třída má rozšiřující metoduToCircumferencePositions, která převádí Circle objekt (který definuje Center a Radius hodnoty vlastností) na seznam Position objektů, které tvoří souřadnice zeměpisné šířky a délky obvodu kruhu.

Sdílet prostřednictvím

Xamarin.Forms Mapovat mnohoúhelníky a lomené čáry

Vytvoření mnohoúhelníku

Vytvoření čáry

Vytvoření kruhu

Další materiály