Geographic Shape Series의 Web Components Shape 스타일링

이 항목에서는 사용자 지정 스타일을 IgcGeographicShapeSeriesComponent Web Components IgcGeographicMapComponent에 적용하는 방법에 대해 설명합니다.

Web Components Shape Styling on Geographic Shape Series Example

Required Imports

모양 스타일을 지정하려면 다음 클래스를 가져와야 합니다.

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

다음 코드 예제에서는 모양 스타일을 지정하는 네 가지 방법을 제공하는 모양 스타일링 유틸리티 파일을 사용하고 있습니다.

• Shape Comparison Styling
• Shape Random Styling
• Shape Range Styling
• 모양 스케일 스타일링

Shape Random Styling

이 코드 조각은 세계 국가에 채우기 색상을 무작위로 할당하는 ShapeRandomStyling 인스턴스를 생성합니다.

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

이 코드 조각은 로그 척도로 조정된 인구를 기준으로 국가 모양에 채우기 색상을 할당하는 ShapeScaleStyling 인스턴스를 생성합니다.

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

이 코드 조각은 인구 범위에 따라 국가 모양에 색상을 할당하는 ShapeRangeStyling 인스턴스를 생성합니다.

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

이 코드 조각은 세계의 지역 이름을 기반으로 국가에 색상을 할당하는 ShapeComparisonStyling 인스턴스를 생성합니다.

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