Web Components Enlazar archivos JSON con ubicaciones geográficas
Con el mapa Ignite UI for Web Components, puede trazar datos geográficos cargados desde varios tipos de archivos. Por ejemplo, puede cargar ubicaciones geográficas desde un archivo JSON (JavaScript Object Notation).
Web Components Ejemplo de enlace de archivos JSON con ubicaciones geográficas
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Ejemplo de datos
Aquí hay un ejemplo de datos del archivo JSON:
[
{ "name": "Sydney Island", "lat": -16.68972, "lon": 139.45917 },
{ "name": "Sydney Creek", "lat": -16.3, "lon": 128.95 },
{ "name": "Mount Sydney", "lat": -21.39864, "lon": 121.193 },
// ...
]
json
Fragmento de código
El siguiente código carga y vincula IgcGeographicHighDensityScatterSeriesComponent
en el componente de mapa a una matriz de objetos creados a partir de un archivo JSON cargado con ubicaciones geográficas:
<igc-geographic-map id="geoMap" width="100%" height="100%">
</igc-geographic-map>
html
connectedCallback() {
const url = "../data/WorldCities.json";
fetch(url)
.then((response) => response.json())
.then(data => this.onDataLoaded(data));
}
onDataLoaded(jsonData: any[]) {
const geoLocations: any[] = [];
for (const jsonItem of jsonData) {
if (jsonItem.cap) {
const location = {
latitude: jsonItem.lat,
longitude: jsonItem.lon,
population: jsonItem.pop,
city: jsonItem.name,
country: jsonItem.country
};
geoLocations.push(location);
}
}
let geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
let geoSeries : IgcGeographicSymbolSeriesComponent = new IgcGeographicSymbolSeriesComponent();
geoSeries.dataSource = geoLocations;
geoSeries.markerType = MarkerType.Circle;
geoSeries.latitudeMemberPath = "latitude";
geoSeries.longitudeMemberPath = "longitude";
geoSeries.markerBrush = "LightGray";
geoSeries.markerOutline = "Black";
geoMap.series.add(geoSeries);
}
ts