지리적 위치를 포함한 Blazor 바인딩 CSV 파일

Ignite UI for Blazor 맵 구성 요소를 사용하면 다양한 파일 유형에서 로드된 지리적 데이터를 플로팅할 수 있습니다. 예를 들어, 쉼표로 구분된 값(CSV) 파일에서 지리적 위치를 로드할 수 있습니다.

지리적 위치를 사용한 Blazor 바인딩 CSV 파일 예제

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbGeographicMapModule),
                typeof(IgbDataChartInteractivityModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

@inject HttpClient Http

<div class="container vertical">
    <div class="container vertical">
        <IgbGeographicMap @ref="MapRef" Height="100%" Width="100%" Zoomable="true">
            <IgbGeographicHighDensityScatterSeries DataSource="Data"
                    LatitudeMemberPath="Lat"
                    LongitudeMemberPath="Lon"
                    HeatMaximumColor="Red"
                    HeatMinimumColor="Black"
                    HeatMinimum="0"
                    HeatMaximum="5"
                    PointExtent="1"
                    MouseOverEnabled="true" />
        </IgbGeographicMap>
    </div>
</div>

@code {
    

    private List<WorldPlaceCsv> Data;
    public IgbGeographicMap MapRef;

    protected override async Task OnInitializedAsync()
    {
        string url = "https://static.infragistics.com/xplatform/data/UsaCitiesPopulation.csv";
        string csv = await Http.GetStringAsync(url);
        var csvLines = csv.Split(Environment.NewLine);
        var dataItems = new List<WorldPlaceCsv>();

        for (int i = 1; i < csvLines.Length - 1; i++)
        {
            var columns = csvLines[i].Split(",");
            var 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.Data = dataItems;
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (MapRef != null && !firstRender)
        {
            var geoRegion = new Rect(-130, 15, new Size(65, 35));
            MapRef.ZoomToGeographic(geoRegion);
        }
    }

    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; }
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

데이터 예시

다음은 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
razor

코드 조각

다음 코드는 지도 구성 요소의 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; }
    }
}
razor

API 참조

• IgbGeographicHighDensityScatterSeries
• DataSource
• LatitudeMemberPath
• LongitudeMemberPath
• HeatMaximumColor
• HeatMinimumColor
• PointExtent