Xamarin.Forms 映射多边形和折线

项目
07/13/2023

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对象 (，该对象定义CenterRadius和属性值) 到构成圆周的纬度和经度坐标的对象列表Position。

地图示例

Xamarin.Forms 映射多边形和折线

创建多边形

创建折线

创建圆圈

相关链接

其他资源