React 여러 데이터 소스 바인딩

Ignite UI for React 맵에서 여러 지리적 시리즈 객체를 추가하여 사용자 지정 데이터 소스를 지리 공간 데이터와 오버레이할 수 있습니다. 예를 들어, 공항의 지리적 위치를 플로팅하기 위한 IgrGeographicSymbolSeries, 공항 간 항공편을 플로팅하기 위한 IgrGeographicPolylineSeries, 주요 지리적 좌표의 격자선을 플로팅하기 위한 2nd IgrGeographicPolylineSeries 있습니다.

React Binding Multiple Data Sources Example

이 항목에서는 다음과 같은 지리 공간 데이터를 표시하는 여러 지리 계열을 표시하는 방법을 단계별로 설명합니다.

• IgrGeographicSymbolSeries– 주요 공항의 위치 표시
• IgrGeographicPolylineSeries– 공항 간 항공편 표시
• IgrGeographicPolylineSeries– 주요 좌표의 격자 선을 표시합니다.

이 조합이나 다른 조합으로 지리적 계열을 사용하여 원하는 데이터를 표시할 수 있습니다.

Creating Data Sources

Ignite UI for React에 표시하려는 모든 지리적 시리즈에 대한 데이터 소스를 만듭니다. 예를 들어, WorldConnections 스크립트를 사용할 수 있습니다.

import WorldConnections from "./WorldConnections";
// ..

public onMapReferenced(map: IgrGeographicMap) {
    this.geoMap = map;

    const worldFlights: any[] = WorldConnections.getFlights();
    const worldAirports: any[] = WorldConnections.getAirports();
    const worldGridlines: any[] = WorldConnections.getGridlines();

    // create and overlay geographic series here
}

Overlaying Flights

주요 공항 간 항공편 연결을 포함하는 첫 번째 IgrGeographicPolylineSeries 객체를 만들고 이를 Ignite UI for React Series 컬렉션에 추가합니다.

const lineSeries = new IgrGeographicPolylineSeries ( { name: "lineSeries" });
lineSeries.dataSource = worldFlights;
lineSeries.shapeMemberPath = "points";
lineSeries.shapeStroke = "rgba(196, 14, 14,0.05)";
lineSeries.shapeStrokeThickness = 4;
this.geoMap.series.add(lineSeries);

Overlaying Gridlines

지리적 격자선이 있는 두 번째 IgrGeographicPolylineSeries 객체를 만들고 이를 Ignite UI for React의 Series 컬렉션에 추가합니다.

const gridSeries = new IgrGeographicPolylineSeries( { name: "gridSeries" });
gridSeries.dataSource = worldGridlines;
gridSeries.shapeMemberPath = "points";
gridSeries.shapeStroke = "Gray";
gridSeries.shapeStrokeThickness = 1;
this.geoMap.series.add(gridSeries);

Overlaying Airports

공항 지점을 사용하여 IgrGeographicSymbolSeries 객체를 만들고 이를 Ignite UI for React 지리적 맵의 Series 컬렉션에 추가합니다.

const symbolSeries = new IgrGeographicSymbolSeries ( { name: "symbolSeries" });
symbolSeries.dataSource = worldAirports;
symbolSeries.markerType = MarkerType.Circle;
symbolSeries.latitudeMemberPath = "lat";
symbolSeries.longitudeMemberPath = "lon";
symbolSeries.markerBrush = "#aad3df";
symbolSeries.markerOutline = "rgb(73, 73, 73)";
this.geoMap.series.add(symbolSeries);

Summary

귀하의 편의를 위해 위의 모든 코드 조각은 아래의 하나의 코드 블록으로 결합되어 프로젝트에 쉽게 복사할 수 있습니다.

API References

• IgrGeographicPolylineSeries
• IgrGeographicSymbolSeries