Blazor Binding Geographic Data Models

    Ignite UI for Blazor 지도 구성 요소는 지리 이미지 지도 위의 데이터 모델에서 얻은 지리 공간 데이터 또는 지리 공간을 표시하도록 설계되었습니다. 지리적 수열의 속성은DataSource 데이터 모델에 결합하는 목적으로 사용됩니다. 이 속성은 커스텀 객체 배열을 묶을 수 있습니다.

    Blazor Binding Geographic Data Models Example

    다음 표에는 각 지역 시리즈 유형에 필요한 데이터 구조가 요약되어 있습니다.

    지리적 시리즈 속성 설명
    IgbGeographicSymbolSeries LongitudeMemberPath, LatitudeMemberPath Specifies names of 2 numeric longitude and latitude coordinates
    IgbGeographicHighDensityScatterSeries LongitudeMemberPath, LatitudeMemberPath Specifies names of 2 numeric longitude and latitude coordinates
    IgbGeographicProportionalSymbolSeries LongitudeMemberPath, LatitudeMemberPath, RadiusMemberPath Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for size/radius of symbols
    IgbGeographicScatterAreaSeries LongitudeMemberPath, LatitudeMemberPath, ColorMemberPath 값의 삼각측량을 위한 2개의 숫자 경도 및 위도 좌표와 1개의 숫자 열의 이름을 지정합니다.
    IgbGeographicContourLineSeries LongitudeMemberPath, LatitudeMemberPath, ValueMemberPath 값의 삼각측량을 위한 2개의 숫자 경도 및 위도 좌표와 1개의 숫자 열의 이름을 지정합니다.
    IgbGeographicShapeSeries ShapeMemberPath 데이터 열의 이름을 지정합니다.DataSource 모양의 지리적 지점을 포함하는 항목입니다. 이 속성은 x 및 y 속성이 있는 객체 배열의 배열에 매핑되어야 합니다.
    IgbGeographicPolylineSeries ShapeMemberPath 데이터 열의 이름을 지정합니다.DataSource 선의 지리적 좌표를 포함하는 항목입니다. 이 속성은 x 및 y 속성이 있는 객체 배열의 배열에 매핑되어야 합니다.

    Code Snippet

    다음 코드는 다음 파일을 어떻게 결합하는지 보여줍니다.IgbGeographicSymbolSeries 전 세계 일부 도시의 지리적 위치를 경도와 위도 좌표로 저장한 맞춤형 데이터 모델로 변환합니다. 또한, 우리는IgbGeographicPolylineSeries이 위치 간 최단 지리적 경로를 다음과 같이 그려 월드유틸리티

    @using IgniteUI.Blazor.Controls


<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
    @for (int i = 0; i < this.DataSource.Count; i++)
    {
        FlightInfo info = this.DataSource[i];
        List<WorldCity> symbolData = new List<WorldCity>() { info.Origin, info.Dest };

        GeoLocation geoOrigin = new GeoLocation() { Lat = info.Origin.Lat, Lon = info.Origin.Lon };
        GeoLocation geoDest = new GeoLocation() { Lat = info.Dest.Lat, Lon = info.Dest.Lon };

        List<List<Point>> geoPath = WorldUtils.CalcPaths(geoOrigin, geoDest);
        double geoDistance = WorldUtils.CalcDistance(geoOrigin, geoDest);

        FlightInfo route = new FlightInfo()
        {
            Points =  geoPath,
            Origin = info.Origin,
            Dest = info.Dest,
            Distance = geoDistance,
            Time = geoDistance / 850
        };

        List<FlightInfo> geoRoute = new List<FlightInfo>() { route };

        <IgbGeographicSymbolSeries DataSource="@symbolData" MarkerType="MarkerType.Circle"
                                LatitudeMemberPath="Lat" LongitudeMemberPath="Lon"
                                MarkerBrush="White" MarkerOutline="@info.Color"
                                Thickness="1">
        </IgbGeographicSymbolSeries>
        <IgbGeographicPolylineSeries DataSource="@geoRoute" ShapeMemberPath="Points"
                                  ShapeStrokeThickness="9" ShapeOpacity="0.5"
                                  ShapeStroke="@info.Color">
        </IgbGeographicPolylineSeries>
    }
</IgbGeographicMap>

@code {

    private List<FlightInfo> DataSource;

    protected override void OnInitialized()
    {
        WorldCity cityDAL = new WorldCity() { Lat = 32.763, Lon = -96.663, Country = "US", Name = "Dallas" };
        WorldCity citySYD = new WorldCity() { Lat = -33.889, Lon = 151.028, Country = "Australia", Name = "Sydney" };
        WorldCity cityNZL = new WorldCity() { Lat = -36.848, Lon = 174.763, Country = "New Zealand", Name = "Auckland" };
        WorldCity cityQTR = new WorldCity() { Lat = 25.285, Lon = 51.531, Country = "Qatar", Name = "Doha" };
        WorldCity cityPAN = new WorldCity() { Lat = 8.949, Lon = -79.400, Country = "Panama", Name = "Panama" };
        WorldCity cityCHL = new WorldCity() { Lat = -33.475, Lon = -70.647, Country = "Chile", Name = "Santiago" };
        WorldCity cityJAP = new WorldCity() { Lat = 35.683, Lon = 139.809, Country = "Japan", Name = "Tokyo" };
        WorldCity cityALT = new WorldCity() { Lat = 33.795, Lon = -84.349, Country = "US", Name = "Atlanta" };
        WorldCity cityJOH = new WorldCity() { Lat = -26.178, Lon = 28.004, Country = "South Africa", Name = "Johannesburg" };
        WorldCity cityNYC = new WorldCity() { Lat = 40.750, Lon = -74.0999, Country = "US", Name = "New York" };
        WorldCity citySNG = new WorldCity() { Lat = 1.229, Lon = 104.177, Country = "Singapore", Name = "Singapore" };
        WorldCity cityMOS = new WorldCity() { Lat = 55.750, Lon = 37.700, Country = "Russia", Name = "Moscow" };
        WorldCity cityROM = new WorldCity() { Lat = 41.880, Lon = 12.520, Country = "Italy", Name = "Roma" };
        WorldCity cityLAX = new WorldCity() { Lat = 34.000, Lon = -118.25, Country = "US", Name = "Los Angeles" };

        this.DataSource = new List<FlightInfo>() {
            new FlightInfo() { Origin = cityDAL, Dest = citySNG, Color = "Green" },
            new FlightInfo() { Origin = cityMOS, Dest = cityNZL, Color = "Red" },
            new FlightInfo() { Origin = cityCHL, Dest = cityJAP, Color = "Blue" },
            new FlightInfo() { Origin = cityPAN, Dest = cityROM, Color = "Orange" },
            new FlightInfo() { Origin = cityALT, Dest = cityJOH, Color = "Black" },
            new FlightInfo() { Origin = cityNYC, Dest = cityQTR, Color = "Purple" },
            new FlightInfo() { Origin = cityLAX, Dest = citySYD, Color = "Gray" },
        };
    }

    public class WorldCity
    {
        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; }
    }

    public class FlightInfo
    {
        public string ID { get; set; }
        public WorldCity Origin { get; set; }
        public WorldCity Dest { get; set; }
        public double Time { get; set; }
        public double Passengers { get; set; }
        public double Distance { get; set; }
        public List<List<Point>> Points { get; set; }
        public string Color { get; set; }
    }
}

    API References