React Enlazar varias fuentes de datos

    En el mapa Ignite UI for React, puede agregar varios objetos de serie geográfica para superponer fuentes de datos personalizadas con datos geoespaciales. Por ejemplo, IgrGeographicSymbolSeries para trazar ubicaciones geográficas de aeropuertos, para IgrGeographicPolylineSeries trazar vuelos entre aeropuertos, y 2º IgrGeographicPolylineSeries para trazar líneas de cuadrícula de coordenadas geográficas principales.

    React Ejemplo de enlace de varias fuentes de datos

    EXAMPLE
    WorldConnections.ts
    WorldLocations.ts
    WorldUtils.ts
    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.

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

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

    Creando fuentes de datos

    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
    }
    ts
    Ignite UI for React | CTA Banner

    Vuelos superpuestos

    Cree el primer IgrGeographicPolylineSeries objeto con conexiones de vuelo entre los principales aeropuertos y agréguelo a la colección Series del 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);
    ts

    Superposición de líneas de cuadrícula

    Cree un segundo IgrGeographicPolylineSeries objeto con líneas de cuadrícula geográficas y agréguelo a la colección Series del 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);
    ts

    Aeropuertos superpuestos

    Cree IgrGeographicSymbolSeries un objeto con puntos de aeropuerto y agréguelo a la colección Series del mapa de Ignite UI for React geográfica.

    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);
    ts

    Resumen

    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.

    Referencias de API