Web Components Estilo de forma na série Geographic Shape
Este tópico explica como aplicar o IgcGeographicShapeSeriesComponent estilo personalizado ao no Web Components IgcGeographicMapComponent.
Web Components Exemplo de estilo de forma na série de formas geográficas
Importações necessárias
O estilo de forma requer que você importe as seguintes classes:
import { IgcGeographicShapeSeriesComponent } from 'igniteui-webcomponents-maps'; import { IgcStyleShapeEventArgs } from 'igniteui-webcomponents-charts'; import { IgcShapeDataSource } from 'igniteui-webcomponents-core'; import { IgcShapefileRecord } from 'igniteui-webcomponents-core';Observe que os exemplos de código a seguir estão usando o arquivo do Utilitário de Estilo de Forma que fornece quatro maneiras diferentes de estilizar formas:
Shape Random Styling
Este snippet de código cria instâncias de ShapeRandomStyling que atribuirão aleatoriamente cores de preenchimento aos países do 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; }Estilo de escala de forma
Este snippet de código cria instâncias de ShapeScaleStyling que atribuirão cores de preenchimento à forma de países com base na população dimensionada em 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
Esse snippet de código cria instâncias de ShapeRangeStyling que atribuirão cores à forma de países com base em intervalos de população.
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
Esse snippet de código cria instâncias de ShapeComparisonStyling que atribuirão cores a países com base no nome da região no 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; }