Xamarin.ios 지도 다각형 및 다중선Xamarin.Forms Map Polygons and Polylines

샘플 다운로드 샘플 다운로드Download Sample Download the sample

"iOS 및 Android에서 Polygon 및 다중선 데모"를합니다."Polygon and Polyline demo on iOS and Android"

PolygonPolyline 요소를 사용 하면 지도의 특정 영역을 강조 표시할 수 있습니다.Polygon and Polyline elements allow you to highlight specific areas on a map. @No__t_0는 스트로크 및 채우기 색을 가질 수 있는 완전히 둘러싸인 도형입니다.A Polygon is a fully enclosed shape that can have a stroke and fill color. @No__t_0는 영역을 완전히 묶지 않는 줄입니다.A Polyline is a line that does not fully enclose an area.

참고

@No__t_0 및 Polyline의 예제는 샘플 프로젝트의 PolygonsPage 에 있습니다.Examples of Polygon and Polyline are found on the PolygonsPage in the sample project.

@No__t_0 및 Polyline 클래스는 다음 BindableProperty 속성을 노출 하는 MapElement에서 파생 됩니다.The Polygon and Polyline classes derive from MapElement, which exposes the following BindableProperty properties:

  • StrokeColor는 선 색을 결정 하는 Color 속성입니다.StrokeColor is a Color property that determines the line color.
  • StrokeWidth는 선 두께를 결정 하는 float 속성입니다.StrokeWidth is a float property that determines the line width.
  • GeopathPolygonPolyline 모두에 대해 정의 되며,는 도형의 요소를 지정 하는 Position 개체의 목록입니다.Geopath is defined on both Polygon and Polyline, and is a list of Position objects that specify the points of the shape.

@No__t_0 클래스는 추가 속성을 정의 합니다.The Polygon class defines an additional property:

  • FillColor은 다각형의 배경색을 결정 하는 Color 속성입니다.FillColor is a Color property that determines the polygon's background color.

참고

@No__t_0 속성이 지정 되지 않은 경우 스트로크가 기본적으로 black이 됩니다.If the StrokeColor property is not specified the stroke will default to black. @No__t_0 속성을 지정 하지 않으면 채우기가 기본적으로 투명 합니다.If the FillColor property is not specified, the fill will default to transparent. 따라서 두 속성을 모두 지정 하지 않으면 도형은 채우기가 없는 검정 윤곽선을 갖게 됩니다.Therefore, if neither property is specified the shape will have a black outline with no fill.

다각형 만들기Create a polygon

Polygon 개체를 인스턴스화하고 맵의 MapElements 컬렉션에 추가 하 여 맵에 추가할 수 있습니다.A Polygon object can be added to a map by instantiating it and adding it to the map's MapElements collection. 이렇게 하면 다음과 같이 XAML로 수행할 수 있습니다.This can be accomplished in XAML as follows:

<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# 코드는 다음과 같습니다.The equivalent C# code is:

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

다각형의 윤곽선을 사용자 지정 하기 위해 StrokeColorStrokeWidth 속성이 지정 됩니다.The StrokeColor and StrokeWidth properties are specified to customize the polygon's outline. @No__t_0 속성 값은 StrokeColor 속성 값과 일치 하지만 투명 하 게 만들기 위해 지정 된 알파 값이 있으므로 셰이프를 통해 기본 지도를 볼 수 있습니다.The FillColor property value matches the StrokeColor property value but has an alpha value specified to make it transparent, allowing the underlying map to be visible through the shape. @No__t_0 속성에는 다각형 지점의 지리적 좌표를 정의 하는 Position 개체의 목록이 포함 되어 있습니다.The GeoPath property contains a list of Position objects defining the geographic coordinates of the polygon points. @No__t_0 개체는 MapMapElements 컬렉션에 추가 된 경우 맵에 렌더링 됩니다.A Polygon object is rendered on the map once it has been added to the MapElements collection of the Map.

참고

@No__t_0은 완전히 포함 된 도형입니다.A Polygon is a fully enclosed shape. 첫 번째 및 마지막 점이 일치 하지 않으면 자동으로 연결 됩니다.The first and last points will automatically be connected if they do not match.

다중선 만들기Create a polyline

Polyline 개체를 인스턴스화하고 맵의 MapElements 컬렉션에 추가 하 여 맵에 추가할 수 있습니다.A Polyline object can be added to a map by instantiating it and adding it to the map's MapElements collection. 이렇게 하면 다음과 같이 XAML로 수행할 수 있습니다.This can be accomplished in XAML as follows:

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

@No__t_0 및 StrokeWidth 속성을 지정 하 여 줄을 사용자 지정 합니다.The StrokeColor and StrokeWidth properties are specified to customize the line. @No__t_0 속성에는 다중선 점의 지리적 좌표를 정의 하는 Position 개체의 목록이 포함 되어 있습니다.The GeoPath property contains a list of Position objects defining the geographic coordinates of the polyline points. @No__t_0 개체는 MapMapElements 컬렉션에 추가 된 경우 맵에 렌더링 됩니다.A Polyline object is rendered on the map once it has been added to the MapElements collection of the Map.