Vinculación Angular de archivos CSV con ubicaciones geográficas
Con el componente de mapa Ignite UI for Angular, puede trazar datos geográficos cargados desde varios tipos de archivos. Por ejemplo, puede cargar ubicaciones geográficas desde un archivo de valores separados por comas (CSV).
Ejemplo de vinculación Angular de archivos CSV con ubicaciones geográficas
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Ejemplo de datos
Aquí hay un ejemplo de datos del archivo 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
ts
Fragmento de código
El siguiente código carga y vincula IgxGeographicHighDensityScatterSeriesComponent
en el componente de mapa a una matriz de objetos creados a partir de un archivo CSV cargado con ubicaciones geográficas.
<div className="sampleRoot" >
<igx-geographic-map #map
width="700px"
height="500px"
zoomable="true" >
</igx-geographic-map>
</div>
<ng-template let-series="series" let-item="item" #template>
<div>
<span>
County: {{item.county}}
</span>
<br/>
<span>
Population: {{item.density}} K
</span>
</div>
</ng-template>
html
import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
import { IgxGeographicHighDensityScatterSeriesComponent } from "igniteui-angular-maps";
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
@Component({
selector: "app-map-binding-geographic-csv_files",
styleUrls: ["./map-binding-geographic-csv_files.component.scss"],
templateUrl: "./map-binding-geographic-csv_files.component.html"
})
export class MapBindingDataCsvComponent implements AfterViewInit {
@ViewChild ("map")
public map: IgxGeographicMapComponent;
@ViewChild("template")
public tooltip: TemplateRef<object>;
constructor() {
}
public ngAfterViewInit(): void {
this.componentDidMount();
}
public componentDidMount() {
// fetching JSON data with geographic locations from public folder
fetch("assets/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(",");
const location = {
code: columns[4],
county: columns[5],
density: Number(columns[6]),
latitude: Number(columns[1]),
longitude: Number(columns[2]),
name: columns[0],
population: Number(columns[7]),
state: columns[3]
};
geoLocations.push(location);
}
// creating HD series with loaded data
const geoSeries = new IgxGeographicHighDensityScatterSeriesComponent();
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.tooltipTemplate = this.tooltip;
geoSeries.mouseOverEnabled = true;
// adding symbol series to the geographic amp
this.map.series.add(geoSeries);
}
}
ts
Referencias de API
IgxGeographicHighDensityScatterSeriesComponent
DataSource
latitudeMemberPath
longitudeMemberPath
heatMaximumColor
heatMinimumColor
pointExtent
Ver página en
GitHub