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 プロパティです。

Note

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

Note

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 コレクションに追加されるとマップ上にレンダリングされます。

Note

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