Blazor 地理記号マップ
Blazor マップ コンポーネントでは、IgbGeographicSymbolSeries
を使用して、地理的コンテキストでポイントまたはマーカーを使用して地理空間データを表示できます。地理的シリーズのこのタイプは、都市、空港、地震または興味のあるポイントなどの地理的位置のコレクションを描画するためにしばしば使用されます。
Blazor 地理記号マップの例
データ要件
マップコンポーネントの他の種類の地理的シリーズと同様に、IgbGeographicSymbolSeries
には、オブジェクトの配列にバインドできる DataSource
プロパティがあります。さらに、このオブジェクトの各データ項目は、地理的位置 (経度と緯度) を保存する 2 つの数値データ列を持つ必要があります。これらのデータ列は、LatitudeMemberPath
および LongitudeMemberPath
プロパティにマップされます。IgbGeographicSymbolSeries
は、これらのマップされたデータ列の値を使用して、地理マップコンポーネントにシンボル要素をプロットします。
コード スニペット
以下のコードは、IgbShapeDataSource
を使用してシェイプ ファイルからロードした都市の場所に IgbGeographicSymbolSeries
をバインドする方法を示します。
@using IgniteUI.Blazor.Controls
<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
<IgbGeographicSymbolSeries DataSource="Cities"
MarkerType="MarkerType.Circle"
LatitudeMemberPath="Lat"
LongitudeMemberPath="Lon"
MarkerBrush="White"
MarkerOutline="Gray" />
<IgbGeographicSymbolSeries DataSource="Capitals"
MarkerType="MarkerType.Circle"
LatitudeMemberPath="Lat"
LongitudeMemberPath="Lon"
MarkerBrush="White"
MarkerOutline="rgb(32, 146, 252)" />
</IgbGeographicMap>
@code {
private List<WorldCity> Cities;
private List<WorldCity> Capitals;
protected override void OnInitialized()
{
this.Cities = WorldLocations.GetCities();
this.Capitals = WorldLocations.GetCapitals();
}
}