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
사용하여 WorldUtility를 사용하여 이러한 위치 사이의 최단 지리적 경로를 표시합니다.
@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; }
}
}