Xamarin.Forms ポリゴンとポリラインのマップ

[アーティクル]
07/13/2023

Polygon、 Polyline、および Circle 要素を使用すると、マップ上の特定の領域を強調表示できます。は Polygon 、ストロークと塗りつぶしの色を持つ完全に囲まれた図形です。は Polyline 、領域を完全に囲まない行です。では Circle 、マップの円形領域が強調表示されます。

、、および Circle クラスはPolygon、クラスからMapElement派生し、次のバインド可能なプロパティを公開Polylineします。

StrokeColor は、線の Color 色を決定するオブジェクトです。
StrokeWidth は、 float 線の幅を決定するオブジェクトです。

クラスは Polygon 、追加のバインド可能なプロパティを定義します。

FillColor は、 Color 多角形の背景色を決定するオブジェクトです。

さらに、クラスとクラスはPolygonどちらも、図形のポイントをGeoPath指定するオブジェクトのPositionリストであるプロパティを定義Polylineします。

クラスは 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 一致しますが、透明にするためにアルファ値が指定されているため、基になるマップを図形を通じて表示できます。プロパティには GeoPath 、ポリゴンポイントの Position 地理的座標を定義するオブジェクトのリストが含まれています。 Polygonオブジェクトは、のコレクションに追加されると、マップ上にMapElementsMapレンダリングされます。

注意

は 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オブジェクトは、のコレクションに追加されると、マップ上にMapElementsMapレンダリングされます。

円を作成する

オブジェクトを 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、のコレクションに追加されると、マップ上にMapElementsMapレンダリングされます。

注意

GeographyUtilsクラスには、ToCircumferencePositionsオブジェクト (および Radius プロパティ値をCircle定義Centerする) を円周の緯度と経度の座標を構成するオブジェクトのPositionリストに変換する拡張メソッドがあります。

マップのサンプル

Xamarin.Forms ポリゴンとポリラインのマップ

多角形を作成する

ポリラインを作成する

円を作成する

関連リンク

その他のリソース