Xamarin。窗体映射多边形和折线Xamarin.Forms Map Polygons and Polylines

下载示例 下载示例Download Sample Download the sample

"iOS 和 Android 上的多边形和折线演示""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 类派生自 MapElement,这会公开以下BindableProperty属性: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.

备注

如果未指定 StrokeColor 属性,则笔划将默认为黑色。If the StrokeColor property is not specified the stroke will default to black. 如果未指定 FillColor 属性,则填充将默认为透明。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

通过实例化对象并将其添加到地图的 MapElements 集合,可以将 Polygon 对象添加到地图中。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 属性值相匹配,但指定了 alpha 值以使其透明,从而使基础地图可以通过形状可见。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. Polygon 对象添加到 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

通过实例化对象并将其添加到地图的 MapElements 集合,可以将 Polyline 对象添加到地图中。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);

指定 StrokeColorStrokeWidth 属性以自定义该行。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. Polyline 对象添加到 MapMapElements 集合后,该对象将呈现在该映射上。A Polyline object is rendered on the map once it has been added to the MapElements collection of the Map.