Xamarin.Forms 映射多边形和折线
Polygon
、 Polyline
和 Circle
元素允许突出显示地图上的特定区域。 是 Polygon
可以具有笔划和填充颜色的全封闭形状。 是 Polyline
未完全包围区域的线条。 突出显示 Circle
地图的圆形区域:
Polygon
、 Polyline
和 Circle
类派生自 MapElement
类,该类公开以下可绑定属性:
StrokeColor
是确定Color
线条颜色的对象。StrokeWidth
是确定float
线条宽度的对象。
类 Polygon
定义其他可绑定属性:
FillColor
是确定Color
多边形的背景色的对象。
此外, Polygon
和 Polyline
类都定义了一个 GeoPath
属性,该属性是指定形状的点的 对象的列表 Position
。
类 Circle
定义以下可绑定属性:
Center
是一个Position
对象,用于定义圆的中心(以纬度和经度表示)。Radius
是一个Distance
对象,它以米、公里或英里为单位定义圆的半径。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
但指定了一个 alpha 值以使其透明,从而允许基础地图通过形状可见。 属性 GeoPath
包含对象的列表 Position
,这些对象定义多边形点的地理坐标。 将 Polygon
对象添加到 MapElements
的 Map
集合后,将在地图上呈现该对象。
注意
是 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
对象添加到 MapElements
的 Map
集合后,将在地图上呈现该对象。
创建圆圈
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
属性值指定圆圈内的颜色。 这两个颜色值都指定一个 alpha 通道,从而允许基础地图通过圆圈可见。 将 Circle
对象添加到 MapElements
的 集合 Map
后,将在地图上呈现该对象。
注意
类GeographyUtils
具有一个ToCircumferencePositions
扩展方法,该方法将对象转换为Circle
对象 (,该对象定义Center
Radius
和属性值) 到构成圆周的纬度和经度坐标的对象列表Position
。