React Binding Geographic Data Models

    El componente de mapa Ignite UI for React está diseñado para mostrar datos geoespaciales de archivos de formas y/o ubicaciones geográficas de modelos de datos en mapas de imágenes geográficas. La ItemsSource propiedad de serie geográfica se utiliza con el fin de enlazar a modelos de datos. Esta propiedad se puede enlazar a una matriz de objetos personalizados.

    React Ejemplo de modelos de datos geográficos de enlace

    EXAMPLE
    DATA
    TSX

    ¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.

    La siguiente tabla resume las estructuras de datos necesarias para cada tipo de serie geográfica:

    Serie Geográfica Propiedades Descripción
    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 nombres de 2 coordenadas numéricas de longitud y latitud y 1 columna numérica para triangulación de valores.
    IgrGeographicContourLineSeries longitudeMemberPath, latitudeMemberPath, valueMemberPath Especifica nombres de 2 coordenadas numéricas de longitud y latitud y 1 columna numérica para triangulación de valores.
    IgrGeographicShapeSeries shapeMemberPath Especifica el nombre de la columna de datos deItemsSource elementos que contienen los puntos geográficos de las formas. Esta propiedad debe asignarse a una matriz de matrices de objetos con propiedades xey.
    IgrGeographicPolylineSeries shapeMemberPath Especifica el nombre de la columna de datos deItemsSource elementos que contienen las coordenadas geográficas de las líneas. Esta propiedad debe asignarse a una matriz de matrices de objetos con propiedades xey.

    Fragmento de código

    En el código siguiente se muestra cómo enlazar el IgrGeographicSymbolSeries a un modelo de datos personalizado que contiene ubicaciones geográficas de algunas ciudades del mundo almacenadas mediante coordenadas de longitud y latitud. Además, usamos el para trazar la IgrGeographicPolylineSeries ruta geográfica más corta entre estas ubicaciones usando 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);
    }
    ts
    Ignite UI for React | CTA Banner

    Referencias de API