지리적 위치를 사용하여 CSV 파일 바인딩 React
Ignite UI for React 사용하면 다양한 파일 형식에서 로드된 지리 데이터를 그릴 수 있습니다. 예를 들어 CSV(쉼표로 구분된 값) 파일에서 지리적 위치를 로드할 수 있습니다.
React 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
다음 코드는 지도 구성 요소의 IgrGeographicHighDensityScatterSeries
지리적 위치가 포함된 로드된 CSV 파일에서 생성된 개체 배열에 로드하고 바인딩합니다.
import { IgrGeographicHighDensityScatterSeries } from 'igniteui-react-maps';
// ...
public componentDidMount() {
// fetching CSV data with geographic locations from public folder
fetch(url + "/Data/UsaCities.csv")
.then((response) => response.text())
.then(data => this.onDataLoaded(data));
}
public onDataLoaded(csvData: string) {
const csvLines = csvData.split("\n");
// parsing CSV data and creating geographic locations
const geoLocations: any[] = [];
for (let i = 1; i < csvLines.length; i++) {
const columns = csvLines[i].split(",");
// using CSV columns: City,Lat,Lon,State,Code,County,Density,Population
const location = {
name: columns[0],
latitude: Number(columns[1]),
longitude: Number(columns[2]),
state: columns[3],
code: columns[4],
county: columns[5],
density: Number(columns[6]),
population: Number(columns[7])
};
geoLocations.push(location);
}
// creating HD series with loaded data
const geoSeries = new IgrGeographicHighDensityScatterSeries( { name: "hdSeries" });
geoSeries.dataSource = geoLocations;
geoSeries.latitudeMemberPath = "latitude";
geoSeries.longitudeMemberPath = "longitude";
geoSeries.heatMaximumColor = "Red";
geoSeries.heatMinimumColor = "Black";
geoSeries.heatMinimum = 0;
geoSeries.heatMaximum = 5;
geoSeries.pointExtent = 1;
geoSeries.mouseOverEnabled = true;
// adding symbol series to the geographic amp
this.geoMap.series.add(geoSeries);
}