React Associação de várias fontes de dados

No mapa Ignite UI for React, você pode adicionar vários objetos de série geográfica para sobrepor fontes de dados personalizadas com dados geoespaciais. Por exemplo, IgrGeographicSymbolSeries para plotar localizações geográficas de aeroportos, para IgrGeographicPolylineSeries plotar voos entre aeroportos e 2º IgrGeographicPolylineSeries para plotar linhas de grade das principais coordenadas geográficas.

React Binding Multiple Data Sources Example

Este tópico mostra passo a passo a exibição de várias séries geográficas que serão plotadas nos seguintes dados geoespaciais:

IgrGeographicSymbolSeries– exibe a localização dos principais aeroportos
IgrGeographicPolylineSeries– exibe voos entre aeroportos
IgrGeographicPolylineSeries– exibe linhas de grade das coordenadas principais

Você pode usar séries geográficas nesta ou em outras combinações para plotar os dados desejados.

Creating Data Sources

Crie fontes de dados para todas as séries geográficas que você deseja exibir no mapa Ignite UI for React. Por exemplo, você pode usar o 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

Crie o primeiro IgrGeographicPolylineSeries objeto com conexões de voo entre os principais aeroportos e adicione-o à coleção Série do mapa Ignite UI for React.

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

Crie um segundo IgrGeographicPolylineSeries objeto com linhas de grade geográficas e adicione-o à coleção Série do mapa Ignite UI for React.

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

Crie IgrGeographicSymbolSeries um objeto com pontos de aeroporto e adicione-o à coleção Série do mapa de Ignite UI for React geográfico.

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 sua conveniência, todos os trechos de código acima são combinados em um bloco de código abaixo que você pode copiar facilmente para seu projeto.