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 렌더링됩니다.
참고 항목
클래스에는 GeographyUtils ToCircumferencePositions 개체(정의 Center 및 속성 값)를 원 경계의 Position 위도 및 Radius 경도 좌표를 구성하는 개체 목록으로 변환 Circle 하는 확장 메서드가 있습니다.