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 Binding and Overlaying Multiple Shape Files Example

    EXAMPLE
    DATA
    TSX

    Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.

    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.

    Importing Components

    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

    Creating 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

    Loading Shapefiles

    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

    Processing Polygons

    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

    Processing Polyline

    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

    Processing Points

    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

    Map Background

    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

    Summary

    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

    API References