Xamarin.Forms Memetakan Poligon dan Poliline

Artikel
03/10/2020

Polygonelemen , Polyline, dan Circle memungkinkan Anda untuk menyoroti area tertentu di peta. adalah Polygon bentuk tertutup penuh yang dapat memiliki goresan dan warna isian. adalah Polyline garis yang tidak sepenuhnya mengapit area. Menyoroti Circle area melingkar peta:

Kelas Polygon, Polyline, dan Circle berasal dari MapElement kelas , yang mengekspos properti yang dapat diikat berikut:

StrokeColor adalah Color objek yang menentukan warna garis.
StrokeWidth adalah float objek yang menentukan lebar garis.

Kelas Polygon menentukan properti tambahan yang dapat diikat:

FillColor adalah Color objek yang menentukan warna latar belakang poligon.

Selain itu, Polygon kelas dan Polyline keduanya menentukan GeoPath properti, yang merupakan daftar Position objek yang menentukan titik bentuk.

Kelas Circle menentukan properti yang dapat diikat berikut:

Center adalah Position objek yang mendefinisikan pusat lingkaran, dalam garis lintang dan bujur.
Radius adalah Distance objek yang mendefinisikan radius lingkaran dalam meter, kilometer, atau mil.
FillColor adalah Color properti yang menentukan warna dalam perimeter lingkaran.

Catatan

StrokeColor Jika properti tidak ditentukan, goresan akan default menjadi hitam. FillColor Jika properti tidak ditentukan, isi akan default menjadi transparan. Oleh karena itu, jika tidak ada properti yang ditentukan, bentuk akan memiliki kerangka hitam tanpa isian.

Membuat poligon

Objek Polygon dapat ditambahkan ke peta dengan membuat instans dan menambahkannya ke koleksi peta MapElements . Ini dapat dicapai dalam XAML sebagai berikut:

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

Kode C# yang setara adalah:

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

Properti StrokeColor dan StrokeWidth ditentukan untuk menyesuaikan kerangka poligon. Nilai FillColor properti cocok dengan StrokeColor nilai properti tetapi memiliki nilai alfa yang ditentukan untuk membuatnya transparan, memungkinkan peta yang mendasar terlihat melalui bentuk. Properti GeoPath berisi daftar Position objek yang menentukan koordinat geografis titik poligon. Objek Polygon dirender pada peta setelah ditambahkan ke MapElements koleksi Map.

Catatan

A Polygon adalah bentuk yang sepenuhnya tertutup. Poin pertama dan terakhir akan secara otomatis terhubung jika tidak cocok.

Membuat poliline

Objek Polyline dapat ditambahkan ke peta dengan membuat instans dan menambahkannya ke koleksi peta MapElements . Ini dapat dicapai dalam XAML sebagai berikut:

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

Properti StrokeColor dan StrokeWidth ditentukan untuk menyesuaikan baris. Properti GeoPath berisi daftar Position objek yang menentukan koordinat geografis titik poliline. Objek Polyline dirender pada peta setelah ditambahkan ke MapElements koleksi Map.

Membuat lingkaran

Objek Circle dapat ditambahkan ke peta dengan membuat instans dan menambahkannya ke koleksi peta MapElements . Ini dapat dicapai dalam XAML sebagai berikut:

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

Kode C# yang setara adalah:

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

Lokasi Circle pada Peta ditentukan oleh nilai Center properti dan Radius . Properti Center mendefinisikan pusat lingkaran, dalam garis lintang dan bujur, sementara Radius properti menentukan radius lingkaran dalam meter. Properti StrokeColor dan StrokeWidth ditentukan untuk menyesuaikan kerangka lingkaran. Nilai FillColor properti menentukan warna dalam perimeter lingkaran. Kedua nilai warna menentukan saluran alfa, memungkinkan peta yang mendasarinya terlihat melalui lingkaran. Objek Circle dirender pada peta setelah ditambahkan ke MapElements koleksi Map.

Catatan

Kelas GeographyUtils memiliki ToCircumferencePositions metode ekstensi yang mengonversi Circle objek (yang menentukan Center nilai Radius properti) ke daftar Position objek yang membentuk koordinat garis lintang dan bujur dari perimeter lingkaran.

Bagikan melalui

Xamarin.Forms Memetakan Poligon dan Poliline

Membuat poligon

Membuat poliline

Membuat lingkaran

Sumber Daya Tambahan: