Web Components Estilo de forma en la serie de formas geográficas

This topic explains how to apply custom styling to the IgcGeographicShapeSeriesComponent in the Web Components IgcGeographicMapComponent.

Web Components Shape Styling on Geographic Shape Series Example

Required Imports

El estilo de forma requiere que importe las siguientes clases:

import { IgcGeographicShapeSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcStyleShapeEventArgs } from 'igniteui-webcomponents-charts';
import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
import { IgcShapefileRecord } from 'igniteui-webcomponents-core';

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:

• Shape Comparison Styling
• Shape Random Styling
• Shape Range Styling
• Estilo de escala de forma

Shape Random Styling

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 IgcGeographicShapeSeriesComponent();
this.geoSeries.styleShape = this.onStylingShape;
// ...
public onStylingShape(s: IgcGeographicShapeSeriesComponent, args: IgcStyleShapeEventArgs) {
    const itemRecord = args.item as IgcShapefileRecord;
    const shapeStyle = this.ShapeRandomStyling.getStyle(itemRecord);
    args.shapeOpacity = shapeStyle.opacity;
    args.shapeFill = shapeStyle.fill;
    args.shapeStroke = shapeStyle.stroke;
    args.shapeStrokeThickness = shapeStyle.strokeThickness;
}

Shape Scale Styling

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 IgcGeographicShapeSeriesComponent();
this.geoSeries.styleShape = this.onStylingShape;
// ...
public onStylingShape(s: IgcGeographicShapeSeriesComponent, args: IgcStyleShapeEventArgs) {
    const itemRecord = args.item as IgcShapefileRecord;
    const shapeStyle = this.shapeScaleStyling.getStyle(itemRecord);
    args.shapeOpacity = shapeStyle.opacity;
    args.shapeFill = shapeStyle.fill;
    args.shapeStroke = shapeStyle.stroke;
    args.shapeStrokeThickness = shapeStyle.strokeThickness;
}

Shape Range Styling

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 IgcGeographicShapeSeriesComponent();
this.geoSeries.styleShape = this.onStylingShape;
// ...
public onStylingShape(s: IgcGeographicShapeSeriesComponent, args: IgcStyleShapeEventArgs) {
    const itemRecord = args.item as IgcShapefileRecord;
    const shapeStyle = this.shapeRangeStyling.getStyle(itemRecord);
    args.shapeOpacity = shapeStyle.opacity;
    args.shapeFill = shapeStyle.fill;
    args.shapeStroke = shapeStyle.stroke;
    args.shapeStrokeThickness = shapeStyle.strokeThickness;
}

Shape Comparison Styling

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 IgcGeographicShapeSeriesComponent();
this.geoSeries.styleShape = this.onStylingShape;
// ...
public onStylingShape(s: IgcGeographicShapeSeriesComponent, args: IgcStyleShapeEventArgs) {
    const itemRecord = args.item as IgcShapefileRecord;
    const shapeStyle = this.shapeComparisonStyling.getStyle(itemRecord);
    args.shapeOpacity = shapeStyle.opacity;
    args.shapeFill = shapeStyle.fill;
    args.shapeStroke = shapeStyle.stroke;
    args.shapeStrokeThickness = shapeStyle.strokeThickness;
}

API References

• IgcGeographicShapeSeriesComponent
• IgcGeographicMapComponent