React Vincular y superponer varios archivos de forma

    En el mapa Ignite UI for React, puede agregar varios objetos de series geográficas para superponer algunos shapefiles con datos geoespaciales. Por ejemplo, IgrGeographicSymbolSeries para trazar ubicaciones geográficas de puertos, para IgrGeographicPolylineSeries trazar rutas entre puertos y para IgrGeographicShapeSeries trazar formas de países.

    React Ejemplo de enlace y superposición de varios archivos de forma

    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.

    En este tema se explica paso a paso la visualización de varias series geográficas en el componente de mapa. Todas las series geográficas se trazan siguiendo los datos geoespaciales cargados desde los archivos de forma utilizando el comando IgrShapeDataSource clase. Refiérase a la Enlazar archivos de formas para obtener más información sobre IgrShapeDataSource objeto.

    Puede utilizar las series geográficas anteriores u otras combinaciones para trazar los datos deseados.

    Importación de componentes

    Primero, importemos los componentes y módulos necesarios:

    import { IgrGeographicMapModule } from 'igniteui-react-maps';
    import { IgrGeographicMap } from 'igniteui-react-maps';
    import { IgrGeographicShapeSeries } from 'igniteui-react-maps';
    import { IgrGeographicPolylineSeries } from 'igniteui-react-maps';
    import { IgrGeographicSymbolSeries } from 'igniteui-react-maps';
    import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';
    import { IgrDataContext } from 'igniteui-react-core';
    import { IgrShapeDataSource } from 'igniteui-react-core';
    
    IgrGeographicMapModule.register();
    IgrDataChartInteractivityModule.register();
    ts
    Ignite UI for React | CTA Banner

    Creando series

    A continuación, necesitamos crear un mapa con algunas series geográficas que luego cargarán diferentes tipos de archivos de forma.

    public render() {
        return (
            <IgrGeographicMap
                width="100%"
                height="100%"
                zoomable="true" >
                <IgrGeographicShapeSeries
                    name="polygonSeries"
                    dataSource={this.state.polygons}
                    shapeMemberPath="points"
                    shapeFill="rgb(150, 150, 150)"
                    shapeStroke="Black"
                    shapeStrokeThickness={1.0} />
                <IgrGeographicPolylineSeries
                    name="lineSeries"
                    dataSource={this.state.polylines}
                    shapeMemberPath="points"
                    shapeStroke="rgba(147, 15, 180, 0.5)"
                    thickness={3.0}  />
                <IgrGeographicSymbolSeries
                    name="symbolSeries"
                    dataSource={this.state.locations}
                    longitudeMemberPath="longitude"
                    latitudeMemberPath="latitude"
                    markerType="Circle"
                    markerOutline="rgb(2, 102, 196)"
                    markerBrush="White" />
            </IgrGeographicMap>
        );
    }
    tsx

    Cargando archivos de forma

    A continuación, en el constructor de la página, agregue un IgrShapeDataSource shapefile para cada shapefile que desee mostrar en el componente de mapa geográfico.

    const sdsPolygons = new IgrShapeDataSource();
    sdsPolygons.importCompleted = this.onPolygonsLoaded;
    sdsPolygons.shapefileSource = url + "/shapes/WorldCountries.shp";
    sdsPolygons.databaseSource  = url + "/shapes/WorldCountries.dbf";
    sdsPolygons.dataBind();
    const sdsPolylines = new IgrShapeDataSource();
    sdsPolylines.importCompleted = this.onPolylinesLoaded;
    sdsPolylines.shapefileSource = url + "/shapes/WorldConnections.shp";
    sdsPolylines.databaseSource  = url + "/shapes/WorldConnections.dbf";
    sdsPolylines.dataBind();
    const sdsLocations = new IgrShapeDataSource();
    sdsLocations.importCompleted = this.onPointsLoaded;
    sdsLocations.shapefileSource = url + "/Shapes/WorldCities.shp";
    sdsLocations.databaseSource  = url + "/Shapes/WorldCities.dbf";
    sdsLocations.dataBind();
    ts

    Procesamiento de polígonos

    Procese los datos de formas cargados en IgrShapeDataSource los países del mundo y asígnelos a IgrGeographicShapeSeries objetos.

    import { IgrGeographicShapeSeries } from 'igniteui-react-maps';
    import { IgrShapeDataSource } from 'igniteui-react-core';
    // ...
    public onPolygonsLoaded(sds: IgrShapeDataSource, e: any) {
        const geoPolygons: any[] = [];
        // parsing shapefile data and creating geo-polygons
        let pointData = sds.getPointData();
        for ( let i = 0; i < pointData.length; i++ ) {
            let record = pointData[i];
            // using field/column names from .DBF file
            const country = {
                points: record.points,
                name: record.fieldValues.NAME,
                gdp: record.fieldValues.GDP,
                population: record.fieldValues.POPULATION
            };
            geoPolygons.push(country);
        };
    
        const shapeSeries = this.geoMap.series[0] as IgrGeographicShapeSeries;
        shapeSeries.dataSource = geoPolygons;
    }
    ts

    Procesamiento de polilínea

    Procese los datos de formas cargados con las rutas de IgrShapeDataSource comunicación entre las principales ciudades y asígnelos a un IgrGeographicPolylineSeries objeto.

    import { IgrGeographicPolylineSeries } from 'igniteui-react-maps';
    import { IgrShapeDataSource } from 'igniteui-react-core';
    // ...
    public onPolylinesLoaded(sds: IgrShapeDataSource, e: any) {
        const geoPolylines: any[] = [];
        // parsing shapefile data and creating geo-polygons
        let pointData = sds.getPointData();
        for ( let i = 0; i < pointData.length; i++ ) {
            let record = pointData[i];
            // using field/column names from .DBF file
            const route = {
                points: record.points,
                name: record.fieldValues.Name,
                capacity: record.fieldValues.CapacityG,
                distance: record.fieldValues.DistanceKM,
                isOverLand: record.fieldValues.OverLand === 0,
                isActive: record.fieldValues.NotLive !== 0,
                service: record.fieldValues.InService
            };
            geoPolylines.push(route);
        }
        const lineSeries = this.geoMap.series[1] as IgrGeographicPolylineSeries;
        lineSeries.dataSource = geoPolylines;
    }
    ts

    Puntos de procesamiento

    Procese datos de formas cargados IgrShapeDataSource con ubicaciones de las principales ciudades y asígnelos a IgrGeographicSymbolSeries un objeto.

    import { IgrGeographicSymbolSeries } from 'igniteui-react-maps';
    import { MarkerType } from 'igniteui-react-charts';
    // ...
    public onPointsLoaded(sds: IgrShapeDataSource, e: any) {
        const geoLocations: any[] = [];
        // parsing shapefile data and creating geo-locations
        let pointData = sds.getPointData();
        for ( let i = 0; i < pointData.length; i++ ) {
            let record = pointData[i];
            const pop = record.fieldValues.POPULATION;
            if (pop > 0) {
                // each shapefile record has just one point
                const location = {
                    latitude: record.points[0][0].y,
                    longitude: record.points[0][0].x,
                    city: record.fieldValues.NAME,
                    population: pop
                };
                geoLocations.push(location);
            }
        }
        const symbolSeries = this.geoMap.series[2] as IgrGeographicSymbolSeries;
        symbolSeries.dataSource = geoLocations;
    }
    ts

    Fondo del mapa

    Además, es posible que desee ocultar imágenes geográficas del contenido de fondo del mapa si sus archivos de forma proporcionaron suficiente contexto geográfico (por ejemplo, forma de países) para su aplicación.

    public geoMap: IgrGeographicMapComponent;
    // ...
    
    this.geoMap.backgroundContent = {};
    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.

    import * as React from "react";
    import "../styles.css";
    import "./GeoMapStyles.css";
    import DataUtils from "../../utilities/DataUtils"
    import WorldUtils from "../../utilities/WorldUtils"
    
    import { IgrGeographicMapImagery } from 'igniteui-react-maps';
    import { IgrGeographicMapModule } from 'igniteui-react-maps';
    import { IgrGeographicMap } from 'igniteui-react-maps';
    import { IgrGeographicShapeSeries } from 'igniteui-react-maps';
    import { IgrGeographicPolylineSeries } from 'igniteui-react-maps';
    import { IgrGeographicSymbolSeries } from 'igniteui-react-maps';
    import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';
    import { IgrDataContext } from 'igniteui-react-core';
    import { IgrShapeDataSource } from 'igniteui-react-core';
    
    IgrGeographicMapModule.register();
    IgrDataChartInteractivityModule.register();
    
    export default class MapBindingMultipleShapes extends React.Component<any,any> {
    
        public geoMap: IgrGeographicMap;
    
        constructor(props: any) {
            super(props);
    
            this.onMapReferenced = this.onMapReferenced.bind(this);
            this.onPointsLoaded = this.onPointsLoaded.bind(this);
            this.onPolylinesLoaded = this.onPolylinesLoaded.bind(this);
            this.onPolygonsLoaded = this.onPolygonsLoaded.bind(this);
    
            this.state = { locations: [], polylines: [], polygons: []}
        }
    
        public render() {
            const mapStyle = { background: "rgb(212, 212, 212)" } as React.CSSProperties;
    
            return (
                <div className="sampleRoot">
                    <div className="map" style={mapStyle} >
                        <IgrGeographicMap
                            ref={this.onMapReferenced}
                            width="100%"
                            height="100%"
                            zoomable="true" >
                            <IgrGeographicShapeSeries
                                name="polygonSeries"
                                dataSource={this.state.polygons}
                                shapeMemberPath="points"
                                shapeFill="rgb(150, 150, 150)"
                                shapeStroke="Black"
                                shapeStrokeThickness={1.0} />
                            <IgrGeographicPolylineSeries
                                  name="lineSeries"
                                 dataSource={this.state.polylines}
                                 shapeMemberPath="points"
                                 shapeStroke="rgba(147, 15, 180, 0.5)"
                                 thickness={3.0}  />
                            <IgrGeographicSymbolSeries
                                name="symbolSeries"
                                dataSource={this.state.locations}
                                longitudeMemberPath="longitude"
                                latitudeMemberPath="latitude"
                                markerType="Circle"
                                markerOutline="rgb(2, 102, 196)"
                                markerBrush="White" />
                       </IgrGeographicMap>
                    </div>
                </div>
            );
        }
    
        public onMapReferenced(map: IgrGeographicMap) {
            this.geoMap = map;
            this.geoMap.backgroundContent = undefined;
            this.geoMap.windowRect = { left: 0.2, top: 0.1, width: 0.6, height: 0.6 };
    
            console.log("series.count " + this.geoMap.series.count);
            console.log("actualSeries.length " + this.geoMap.actualSeries.length);
    
            this.geoMap.actualSeries[0].tooltipTemplate = this.getPolygonsTooltip;
            this.geoMap.actualSeries[1].tooltipTemplate = this.getPolylinesTooltip;
            this.geoMap.actualSeries[2].tooltipTemplate = this.getPointTooltip;
    
            const url = DataUtils.getPublicURL();
            // loading a shapefile with geographic polygons
            const sdsPolygons = new IgrShapeDataSource();
            sdsPolygons.importCompleted = this.onPolygonsLoaded;
            sdsPolygons.shapefileSource = url + "/shapes/WorldCountries.shp";
            sdsPolygons.databaseSource  = url + "/shapes/WorldCountries.dbf";
            sdsPolygons.dataBind();
    
            const sdsPolylines = new IgrShapeDataSource();
            sdsPolylines.importCompleted = this.onPolylinesLoaded;
            sdsPolylines.shapefileSource = url + "/shapes/WorldCableRoutes.shp";
            sdsPolylines.databaseSource  = url + "/shapes/WorldCableRoutes.dbf";
            sdsPolylines.dataBind();
    
            // loading a shapefile with geographic points
            const sdsPoints = new IgrShapeDataSource();
            sdsPoints.importCompleted = this.onPointsLoaded;
            sdsPoints.shapefileSource = url + "/Shapes/WorldCities.shp";
            sdsPoints.databaseSource  = url + "/Shapes/WorldCities.dbf";
            sdsPoints.dataBind();
        }
    
        public onPointsLoaded(sds: IgrShapeDataSource, e: any) {
    
            const geoLocations: any[] = [];
            // parsing shapefile data and creating geo-locations
            for (const record of sds.getPointData()) {
                const pop = record.fieldValues.POPULATION;
                if (pop > 0) {
                    // each shapefile record has just one point
                    const location = {
                        latitude: record.points[0][0].y,
                        longitude: record.points[0][0].x,
                        city: record.fieldValues.NAME,
                        population: pop
                    };
                    geoLocations.push(location);
                }
            }
            this.setState({ locations: geoLocations });
        }
    
        public onPolylinesLoaded(sds: IgrShapeDataSource, e: any) {
            const geoPolylines: any[] = [];
            // parsing shapefile data and creating geo-polygons
            sds.getPointData().forEach(record => {
                // using field/column names from .DBF file
                const route = {
                    points: record.points,
                    name: record.fieldValues.Name,
                    capacity: record.fieldValues.CapacityG,
                    distance: record.fieldValues.DistanceKM,
                    isOverLand: record.fieldValues.OverLand === 0,
                    isActive: record.fieldValues.NotLive !== 0,
                    service: record.fieldValues.InService
                };
                geoPolylines.push(route);
            });
    
            this.setState({ polylines: geoPolylines });
        }
    
        public onPolygonsLoaded(sds: IgrShapeDataSource, e: any) {
            const geoPolygons: any[] = [];
            // parsing shapefile data and creating geo-polygons
            sds.getPointData().forEach(record => {
                // using field/column names from .DBF file
                const country = {
                    points: record.points,
                    name: record.fieldValues.NAME,
                    gdp: record.fieldValues.GDP,
                    population: record.fieldValues.POPULATION
                };
                geoPolygons.push(country);
            });
    
            this.setState({ polygons: geoPolygons });
        }
    }
    ts

    Referencias de API