React Enlazar varias fuentes de datos

In the Ignite UI for React map, you can add multiple geographic series objects to overlay custom data sources with geo-spacial data. For example, IgrGeographicSymbolSeries for plotting geographic locations of airports, the IgrGeographicPolylineSeries for plotting flights between airports, and 2nd IgrGeographicPolylineSeries for plotting gridlines of major geographic coordinates.

React Binding Multiple Data Sources Example

Este tema lo lleva paso a paso para mostrar múltiples series geográficas que trazarán los siguientes datos geoespaciales:

IgrGeographicSymbolSeries– muestra la ubicación de los principales aeropuertos
IgrGeographicPolylineSeries– muestra vuelos entre aeropuertos
IgrGeographicPolylineSeries– muestra las líneas de cuadrícula de coordenadas principales

Puede utilizar series geográficas en esta u otras combinaciones para trazar los datos deseados.

Creating Data Sources

Cree fuentes de datos para todas las series geográficas que desee mostrar en el mapa Ignite UI for React. Por ejemplo, puede usar el script 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

Create first IgrGeographicPolylineSeries object with flight connections between major airports and add it to the Series collection of the Ignite UI for React map.

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

Create second IgrGeographicPolylineSeries object with geographic gridlines and add it to the Series collection of the Ignite UI for React map.

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

Create IgrGeographicSymbolSeries object with airport points and add it to the Series collection of the geographic Ignite UI for React map.

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

Para su comodidad, todos los fragmentos de código anteriores se combinan en un bloque de código a continuación que puede copiar fácilmente a su proyecto.