Aracılığıyla paylaş

Xamarin.Forms ÇokGenleri ve Çok Çizgilileri Eşleme

  • Makale

Polygon, Polylineve Circle öğeleri, haritadaki belirli alanları vurgulamanıza olanak sağlar. A Polygon , kontur ve dolgu rengine sahip olabilecek tamamen kapalı bir şekildir. A Polyline , bir alanı tamamen kapatmayan bir çizgidir. A Circle , haritanın dairesel bir alanını vurgular:

Polygon, Polylineve Circle sınıfları, aşağıdaki bağlanabilir özellikleri kullanıma sunan sınıfından türetilirMapElement:

  • StrokeColor , çizgi rengini belirleyen bir Color nesnedir.
  • StrokeWidth , çizgi genişliğini belirleyen bir float nesnedir.

Polygon sınıfı ek bir bağlanabilir özellik tanımlar:

  • FillColor , çokgenin arka plan rengini belirleyen bir Color nesnedir.

Buna ek olarak, Polygon ve Polyline sınıfları da şeklin noktalarını belirten nesnelerin listesi Position olan bir özelliği tanımlarGeoPath.

Circle sınıfı aşağıdaki bağlanabilir özellikleri tanımlar:

  • Center , dairenin merkezini enlem ve boylam olarak tanımlayan bir Position nesnedir.
  • Radius , dairenin yarıçapını metre, kilometre veya mil cinsinden tanımlayan bir Distance nesnedir.
  • FillColor , daire çevresi içindeki rengi belirleyen bir Color özelliktir.

Not

StrokeColor Özellik belirtilmezse, vuruş varsayılan olarak siyah olur. FillColor Özellik belirtilmezse, dolgu varsayılan olarak saydam olur. Bu nedenle, herhangi bir özellik belirtilmezse, şeklin dolgusu olmayan siyah bir ana hattı olur.

Çokgen oluşturma

Bir Polygon nesne örneği oluşturularak ve haritanın koleksiyonuna eklenerek haritaya MapElements eklenebilir. Bu, XAML'de aşağıdaki gibi gerçekleştirilebilir:

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

Eşdeğer C# kodu:

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

StrokeColor ve StrokeWidth özellikleri, çokgenin ana hattını özelleştirmek için belirtilir. Özellik FillColor değeri özellik değeriyle StrokeColor eşleşir, ancak saydam hale getirmek için belirtilen bir alfa değerine sahiptir ve temel alınan eşlemenin şekil üzerinden görünür olmasını sağlar. özelliği, GeoPath çokgen noktaların Position coğrafi koordinatlarını tanımlayan nesnelerin listesini içerir. NesnesiPolygon, koleksiyonuna Mapeklendikten MapElements sonra haritada işlenir.

Not

A Polygon , tamamen kapalı bir şekildir. eşleşmeyen ilk ve son puanlar otomatik olarak bağlanır.

Çok çizgi oluşturma

Bir Polyline nesne örneği oluşturularak ve haritanın koleksiyonuna eklenerek haritaya MapElements eklenebilir. Bu, XAML'de aşağıdaki gibi gerçekleştirilebilir:

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

StrokeColor satırı özelleştirmek için ve StrokeWidth özellikleri belirtilir. özelliği, GeoPath çok çizgili noktaların Position coğrafi koordinatlarını tanımlayan nesnelerin listesini içerir. NesnesiPolyline, koleksiyonuna Mapeklendikten MapElements sonra haritada işlenir.

Daire oluşturma

Bir Circle nesne örneği oluşturularak ve haritanın koleksiyonuna eklenerek haritaya MapElements eklenebilir. Bu, XAML'de aşağıdaki gibi gerçekleştirilebilir:

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

Eşdeğer C# kodu:

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

Öğesinin Circle Harita üzerindeki konumu ve Radius özelliklerinin değerine Center göre belirlenir. Center özelliği dairenin merkezini enlem ve boylam olarak tanımlarkenRadius, özelliği dairenin yarıçapını metre olarak tanımlar. StrokeColor ve StrokeWidth özellikleri, dairenin ana hattını özelleştirmek için belirtilir. FillColor Özellik değeri, daire çevresi içindeki rengi belirtir. Renk değerlerinin her ikisi de bir alfa kanalı belirterek temel haritanın daire boyunca görünür olmasını sağlar. Circle nesnesi, koleksiyonuna Mapeklendikten MapElements sonra haritada işlenir.

Not

sınıfı, GeographyUtils bir ToCircumferencePositionsCircle nesneyi (ve özellik değerlerini tanımlayanCenter) daire çevresinin Position enlem ve Radius boylam koordinatlarını oluşturan nesnelerin listesine dönüştüren bir uzantı yöntemine sahiptir.