Xamarin.Forms 다각형 및 다각형 매핑

샘플 다운로드

Polygon, Polyline및 Circle 요소를 사용하면 지도의 특정 영역을 강조 표시할 수 있습니다. A Polygon 는 스트로크와 채우기 색을 가질 수 있는 완전히 묶인 도형입니다. A Polyline 는 영역을 완전히 묶지 않는 선입니다. 지도 Circle 의 원형 영역을 강조 표시합니다.

, Polyline및 Circle 클래스는 Polygon다음 바인딩 가능한 속성을 노출하는 클래스에서 MapElement 파생됩니다.

• StrokeColor 는 Color 선 색을 결정하는 개체입니다.
• StrokeWidth 는 float 선 너비를 결정하는 개체입니다.

클래스는 Polygon 추가 바인딩 가능한 속성을 정의합니다.

• FillColor 는 Color 다각형의 배경색을 결정하는 개체입니다.

또한 Polygon 클래스와 Polyline 클래스는 셰이프의 Position 점을 지정하는 개체 목록인 속성을 정의 GeoPath 합니다.

클래스는 Circle 다음 바인딩 가능한 속성을 정의합니다.

• CenterPosition 는 위도 및 경도로 원의 중심을 정의하는 개체입니다.
• RadiusDistance 는 원의 반경을 미터, 킬로미터 또는 마일 단위로 정의하는 개체입니다.
• FillColor 는 Color 원 경계 내의 색을 결정하는 속성입니다.

참고 항목

StrokeColor 속성을 지정하지 않으면 스트로크는 기본적으로 검은색으로 설정됩니다. FillColor 속성을 지정하지 않으면 채우기가 기본적으로 투명합니다. 따라서 두 속성을 모두 지정하지 않으면 도형에 채우기가 없는 검은색 윤곽선이 있습니다.

다각형 만들기

Polygon 개체를 인스턴스화하고 맵의 MapElements 컬렉션에 추가하여 맵에 추가할 수 있습니다. 이렇게 하면 다음과 같이 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>

해당하는 C# 코드는 다음과 같습니다.

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 및 StrokeWidth 속성은 다각형의 윤곽선을 사용자 지정하도록 지정됩니다. 속성 값은 FillColor 속성 값과 일치 StrokeColor 하지만 알파 값을 지정하여 투명하게 만들 수 있으므로 셰이프를 통해 기본 맵을 볼 수 있습니다. 이 속성에는 GeoPath 다각형 점의 Position 지리적 좌표를 정의하는 개체 목록이 포함되어 있습니다. Polygon 개체가 컬렉션Map에 추가되면 맵에서 MapElements 렌더링됩니다.

참고 항목

A Polygon 는 완전히 묶인 도형입니다. 첫 번째 점과 마지막 지점이 일치하지 않으면 자동으로 연결됩니다.

폴리라인 만들기

Polyline 개체를 인스턴스화하고 맵의 MapElements 컬렉션에 추가하여 맵에 추가할 수 있습니다. 이렇게 하면 다음과 같이 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);

StrokeColor 및 StrokeWidth 속성은 줄을 사용자 지정하도록 지정됩니다. 이 속성에는 GeoPath 폴리라인 점의 Position 지리적 좌표를 정의하는 개체 목록이 포함되어 있습니다. Polyline 개체가 컬렉션Map에 추가되면 맵에서 MapElements 렌더링됩니다.

원 만들기

Circle 개체를 인스턴스화하고 맵의 MapElements 컬렉션에 추가하여 맵에 추가할 수 있습니다. 이렇게 하면 다음과 같이 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>

해당하는 C# 코드는 다음과 같습니다.

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

지도의 Circle 위치는 속성 및 Radius 값에 Center 따라 결정됩니다. 이 속성은 Center 원의 중심을 위도 및 경도로 정의하고 속성은 Radius 원의 반지름을 미터로 정의합니다. StrokeColor 및 StrokeWidth 속성은 원의 윤곽선을 사용자 지정하도록 지정됩니다. 속성 값은 FillColor 원 경계 내의 색을 지정합니다. 두 색 값 모두 알파 채널을 지정하여 원을 통해 기본 맵을 표시할 수 있습니다. Circle 개체가 컬렉션Map에 추가되면 맵에서 MapElements 렌더링됩니다.

참고 항목

클래스에는 GeographyUtilsToCircumferencePositions 개체(정의 Center 및 속성 값)를 원 경계의 Position 위도 및 Radius 경도 좌표를 구성하는 개체 목록으로 변환 Circle 하는 확장 메서드가 있습니다.

관련 링크

• 지도 샘플