React Estilo de forma en la serie de formas geográficas

    En este tema se explica cómo aplicar estilos personalizados a la IgrGeographicShapeSeries React IgrGeographicMap.

    Ejemplo de estilo de forma React en series de formas geográficas

    EXAMPLE
    MapShapeStyleUtility.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.

    Importaciones requeridas

    El estilo de forma requiere que importe las siguientes clases:

    import { IgrGeographicShapeSeries } from 'igniteui-react-maps';
    import { IgrStyleShapeEventArgs } from 'igniteui-react-charts';
    import { IgrShapeDataSource } from 'igniteui-react-core';
    import { IgrShapefileRecord } from 'igniteui-react-core';
    ts

    Tenga en cuenta que los siguientes ejemplos de código utilizan el archivo Shape Styling Utility que proporciona cuatro formas diferentes de diseñar formas:

    Ignite UI for React | CTA Banner

    Estilo aleatorio de forma

    Este fragmento de código crea instancias de ShapeRandomStyling que asignarán aleatoriamente colores de relleno a los países del mundo.

    import { ShapeRandomStyling } from './ShapeStylingUtility';
    // ...
    this.shapeRandomStyling = new ShapeRandomStyling();
    this.shapeRandomStyling.shapeStrokeColors = ['Black'];
    this.shapeRandomStyling.shapeFillColors = ['#8C23D1', '#0E9759', '#B4D336', '#F2A464', '#D74545', 'DodgerBlue'];
    
    this.geoSeries = new IgrGeographicShapeSeries();
    this.geoSeries.styleShape = this.onStylingShape;
    // ...
    public onStylingShape(s: IgrGeographicShapeSeries, args: IgrStyleShapeEventArgs) {
        const itemRecord = args.item as IgrShapefileRecord;
        const shapeStyle = this.ShapeRandomStyling.getStyle(itemRecord);
        args.shapeOpacity = shapeStyle.opacity;
        args.shapeFill = shapeStyle.fill;
        args.shapeStroke = shapeStyle.stroke;
        args.shapeStrokeThickness = shapeStyle.strokeThickness;
    }
    ts

    Estilo de escala de forma

    Este fragmento de código crea instancias de ShapeScaleStyling que asignarán colores de relleno a la forma de los países según la población escalada en escala logarítmica.

    import { ShapeScaleStyling } from './ShapeStylingUtility';
    // ...
    this.shapeScaleStyling = new ShapeScaleStyling();
    this.shapeScaleStyling.itemMinimumValue = 5000;
    this.shapeScaleStyling.itemMaximumValue = 2000000000; // 2 Billions
    this.shapeScaleStyling.itemMemberPath = 'Population';
    this.shapeScaleStyling.isLogarithmic = true;
    this.shapeScaleStyling.defaultFill = 'Gray';
    this.shapeScaleStyling.shapeStrokeColors = ['Black'];
    this.shapeScaleStyling.shapeFillColors = ['DodgerBlue', 'yellow', '#c2f542', '#e8c902', '#e8b602', '#e87902', 'brown'];
    
    this.geoSeries = new IgrGeographicShapeSeries();
    this.geoSeries.styleShape = this.onStylingShape;
    // ...
    public onStylingShape(s: IgrGeographicShapeSeries, args: IgrStyleShapeEventArgs) {
        const itemRecord = args.item as IgrShapefileRecord;
        const shapeStyle = this.shapeScaleStyling.getStyle(itemRecord);
        args.shapeOpacity = shapeStyle.opacity;
        args.shapeFill = shapeStyle.fill;
        args.shapeStroke = shapeStyle.stroke;
        args.shapeStrokeThickness = shapeStyle.strokeThickness;
    }
    ts

    Estilo de rango de formas

    Este fragmento de código crea instancias de ShapeRangeStyling que asignarán colores a la forma de los países según los rangos de población.

    import { ShapeRangeStyling } from './ShapeStylingUtility';
    // ...
    this.shapeRangeStyling = new ShapeRangeStyling();
    this.shapeRangeStyling.defaultFill = 'Gray';
    this.shapeRangeStyling.itemMemberPath = 'Population';
    this.shapeRangeStyling.ranges = [
        { fill: 'yellow', minimum: 5000, maximum: 10000000, },        // 5 K - 10 M
        { fill: 'orange', minimum: 10000000, maximum: 100000000, },   // 10 M - 100 M
        { fill: 'red',    minimum: 100000000, maximum: 500000000, },  // 100 M - 500 M
        { fill: 'brown',  minimum: 500000000, maximum: 2000000000, }, // 500 M - 2 B
    ];
    
    this.geoSeries = new IgrGeographicShapeSeries();
    this.geoSeries.styleShape = this.onStylingShape;
    // ...
    public onStylingShape(s: IgrGeographicShapeSeries, args: IgrStyleShapeEventArgs) {
        const itemRecord = args.item as IgrShapefileRecord;
        const shapeStyle = this.shapeRangeStyling.getStyle(itemRecord);
        args.shapeOpacity = shapeStyle.opacity;
        args.shapeFill = shapeStyle.fill;
        args.shapeStroke = shapeStyle.stroke;
        args.shapeStrokeThickness = shapeStyle.strokeThickness;
    }
    ts

    Estilo de comparación de formas

    Este fragmento de código crea instancias de ShapeComparisonStyling que asignarán colores a los países según el nombre de su región en el mundo.

    import { ShapeComparisonStyling } from './ShapeStylingUtility';
    this.shapeComparisonStyling = new ShapeComparisonStyling();
    this.shapeComparisonStyling.defaultFill = 'Gray';
    this.shapeComparisonStyling.itemMemberPath = 'Region';
    this.shapeComparisonStyling.itemMappings = [
        { fill: 'Red', itemValue: 'Eastern Europe' },
        { fill: 'Red', itemValue: 'Central Asia' },
        { fill: 'Red', itemValue: 'Eastern Asia' },
        { fill: 'Orange', itemValue: 'Southern Asia' },
        { fill: 'Orange', itemValue: 'Middle East' },
        { fill: 'Orange', itemValue: 'Northern Africa' },
        { fill: 'Yellow', itemValue: 'Eastern Africa' },
        { fill: 'Yellow', itemValue: 'Western Africa' },
        { fill: 'Yellow', itemValue: 'Middle Africa' },
        { fill: 'Yellow', itemValue: 'Southern Africa' },
        { fill: 'DodgerBlue', itemValue: 'Central America' },
        { fill: 'DodgerBlue', itemValue: 'Northern America' },
        { fill: 'DodgerBlue', itemValue: 'Western Europe' },
        { fill: 'DodgerBlue', itemValue: 'Southern Europe' },
        { fill: 'DodgerBlue', itemValue: 'Northern Europe' },
        { fill: '#22c928', itemValue: 'South America' },
        { fill: '#b64fff', itemValue: 'Melanesia' },
        { fill: '#b64fff', itemValue: 'Micronesia' },
        { fill: '#b64fff', itemValue: 'Polynesia' },
        { fill: '#b64fff', itemValue: 'Australia' },
    ];
    
    this.geoSeries = new IgrGeographicShapeSeries();
    this.geoSeries.styleShape = this.onStylingShape;
    // ...
    public onStylingShape(s: IgrGeographicShapeSeries, args: IgrStyleShapeEventArgs) {
        const itemRecord = args.item as IgrShapefileRecord;
        const shapeStyle = this.shapeComparisonStyling.getStyle(itemRecord);
        args.shapeOpacity = shapeStyle.opacity;
        args.shapeFill = shapeStyle.fill;
        args.shapeStroke = shapeStyle.stroke;
        args.shapeStrokeThickness = shapeStyle.strokeThickness;
    }
    ts

    Referencias de API