React Binding Geographic Data Models

    O componente de mapa Ignite UI for React foi projetado para exibir dados geoespaciais de arquivos de forma e/ou localizações geográficas de modelos de dados em mapas de imagens geográficas. A ItemsSource propriedade de série geográfica é usada com a finalidade de associação a modelos de dados. Essa propriedade pode ser associada a uma matriz de objetos personalizados.

    React Binding Geographic Data Models Example

    A tabela a seguir resumiu as estruturas de dados necessárias para cada tipo de série geográfica:

    Séries Geográficas Propriedades Descrição
    IgrGeographicSymbolSeries longitudeMemberPath, latitudeMemberPath Specifies names of 2 numeric longitude and latitude coordinates
    IgrGeographicHighDensityScatterSeries longitudeMemberPath, latitudeMemberPath Specifies names of 2 numeric longitude and latitude coordinates
    IgrGeographicProportionalSymbolSeries longitudeMemberPath, latitudeMemberPath, radiusMemberPath Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for size/radius of symbols
    IgrGeographicScatterAreaSeries longitudeMemberPath, latitudeMemberPath, colorMemberPath Especifica nomes de 2 coordenadas numéricas de longitude e latitude e 1 coluna numérica para triangulação de valores
    IgrGeographicContourLineSeries longitudeMemberPath, latitudeMemberPath, valueMemberPath Especifica nomes de 2 coordenadas numéricas de longitude e latitude e 1 coluna numérica para triangulação de valores
    IgrGeographicShapeSeries shapeMemberPath Especifica o nome da coluna de dados dosItemsSource itens que contém os pontos geográficos das formas. Essa propriedade deve ser mapeada para uma matriz de matrizes de objetos com propriedades x e y.
    IgrGeographicPolylineSeries shapeMemberPath Especifica o nome da coluna de dados dosItemsSource itens que contém as coordenadas geográficas das linhas. Essa propriedade deve ser mapeada para uma matriz de matrizes de objetos com propriedades x e y.

    Code Snippet

    O código a seguir mostra como associar o IgrGeographicSymbolSeries a um modelo de dados personalizado que contém localizações geográficas de algumas cidades do mundo armazenadas usando coordenadas de longitude e latitude. Além disso, usamos o para traçar o IgrGeographicPolylineSeries caminho geográfico mais curto entre esses locais usando o WorldUtility

    import { IgrGeographicSymbolSeries } from 'igniteui-react-maps';
import { IgrGeographicPolylineSeries } from 'igniteui-react-maps';
import WorldUtils from "./WorldUtils" ;
// ...

constructor(props: any) {
    super(props);

    const cityDAL = { lat:  32.763, lon: -96.663, country: "US", name: "Dallas" };
    const cityNZL = { lat: -36.848, lon: 174.763, country: "New Zealand", name:"Auckland" };
    const cityCHL = { lat: -33.475, lon: -70.647, country: "Chile", name:"Santiago" };
    const cityJAP = { lat:  35.683, lon: 139.809, country: "Japan", name: "Tokyo" }
    const citySNG = { lat:  1.229, lon: 104.177,  country: "Singapore", name:"Singapore" };
    const cityMOS = { lat: 55.750, lon:  37.700,  country: "Russia", name: "Moscow"};

    this.flights = [
        { origin: cityDAL, dest: citySNG, color: "Green" },
        { origin: cityMOS, dest: cityNZL, color: "Red" },
        { origin: cityCHL, dest: cityJAP, color: "Blue" },
    ];

    for (const flight of this.flights) {
        this.createPolylineSeries(flight);
        this.createSymbolSeries(flight);
    }
}

public createSymbolSeries(flight: any)
{
    const geoLocations = [flight.origin, flight.dest ];
    const symbolSeries = new IgrGeographicSymbolSeries ( { name: "symbolSeries" });
    symbolSeries.dataSource = geoLocations;
    symbolSeries.markerType = MarkerType.Circle;
    symbolSeries.latitudeMemberPath = "lat";
    symbolSeries.longitudeMemberPath = "lon";
    symbolSeries.markerBrush  = "White";
    symbolSeries.markerOutline = flight.color;
    symbolSeries.thickness = 1;
    this.geoMap.series.add(symbolSeries);
}

public createPolylineSeries(flight: any)
{
    const geoPath = WorldUtils.calcPaths(flight.origin, flight.dest);
    const geoDistance = WorldUtils.calcDistance(flight.origin, flight.dest);
    const geoRoutes = [ { points: geoPath } ];
    const lineSeries = new IgrGeographicPolylineSeries ( { name: "lineSeries" });
    lineSeries.dataSource = geoRoutes;
    lineSeries.shapeMemberPath = "points";
    lineSeries.shapeStrokeThickness = 9;
    lineSeries.shapeOpacity = 0.5;
    lineSeries.shapeStroke = flight.color;
    this.geoMap.series.add(lineSeries);
}

    API References