지리적 위치가 포함된 Blazor 바인딩 CSV 파일
Ignite UI for Blazor 사용하면 다양한 파일 형식에서 로드된 지리 데이터를 그릴 수 있습니다. 예를 들어 CSV(쉼표로 구분된 값) 파일에서 지리적 위치를 로드할 수 있습니다.
Blazor Binding CSV Files with Geographic Locations Example
Data Example
다음은 CSV 파일의 데이터 예입니다.
City,Lat,Lon,State,Code,County,Density,Population
New York,40.7856,-74.0093,New Jersey,NJ,Hudson,21057,54227
Dundee,42.5236,-76.9775,New York,NY,Yates,579,1650
Code Snippet
다음 코드는 지도 구성 요소의 IgbGeographicHighDensityScatterSeries
지리적 위치가 포함된 로드된 CSV 파일에서 생성된 개체 배열에 로드하고 바인딩합니다.
@using IgniteUI.Blazor.Controls
@inject HttpClient Http
<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
<IgbGeographicHighDensityScatterSeries DataSource="DataSource"
LatitudeMemberPath="Lat"
LongitudeMemberPath="Lon"
HeatMaximumColor="Red"
HeatMinimumColor="Black"
HeatMinimum="0"
HeatMaximum="5"
PointExtent="1"
MouseOverEnabled="true" />
</IgbGeographicMap>
@code {
private List<WorldPlaceCsv> DataSource;
protected override async Task OnInitializedAsync()
{
string url = "https://static.infragistics.com/xplatform/data/UsaCitiesPopulation.csv";
string csv = await Http.GetStringAsync(url);
string[] csvLines = csv.Split(Environment.NewLine);
List<WorldPlaceCsv> dataItems = new List<WorldPlaceCsv>();
for (int i = 1; i < csvLines.Length - 1; i++)
{
string[] columns = csvLines[i].Split(",");
WorldPlaceCsv location = new WorldPlaceCsv() {
Lat= double.Parse(columns[1]),
Lon= double.Parse(columns[2]),
Name= columns[0],
Pop= double.Parse(columns[3])
};
dataItems.Add(location);
}
this.DataSource = dataItems;
await Task.Delay(1);
}
public class WorldPlaceCsv {
public string Name { get; set; }
public double Lat { get; set; }
public double Lon { get; set; }
public double Pop { get; set; }
public string Country { get; set; }
public bool Cap { get; set; }
}
}