Premium

Angular 地理シェイプシリーズのスタイル設定

このトピックでは、Angular IgxGeographicMapComponent で IgxGeographicShapeSeriesComponent にカスタムスタイリングを適用する方法を説明します。

Angular 地理シェイプシリーズのスタイル設定の例

各セクションで使用する 4 つのスタイリングクラス (ShapeRandomStyling、ShapeScaleStyling、ShapeRangeStyling、ShapeComparisonStyling) は、シェイプスタイリングユーティリティで提供されており、そのファイルをご自身のプロジェクトにコピーしてご利用ください。

必要なインポート

シェイプスタイリングでは、次のクラスをインポートする必要があります。

import { IgxGeographicMapComponent, IgxGeographicShapeSeriesComponent } from 'igniteui-angular-maps';
import { IgxShapeDataSource, IgxShapefileRecord } from 'igniteui-angular-core';
import { IgxAssigningShapeStyleEventArgs } from 'igniteui-angular-charts';

次のコード例は、シェイプスタイリングを設定する 4 つの異なる方法を提供するシェイプスタイリングユーティリティファイルを使用していることに注意してください。

シェイプ比較スタイリング
シェイプランダムスタイリング
シェイプ範囲スタイリング
シェイプスケールスタイリング

シェイプランダムスタイリング

このコードスニペットは、ShapeRandomStyling のインスタンスを作成して、塗りつぶし色をランダムに世界の国に割り当てます。

import { IgxGeographicMapComponent, IgxGeographicShapeSeriesComponent, IgxGeographicShapeSeriesBaseComponent } from 'igniteui-angular-maps';
import { IgxShapeDataSource, IgxShapefileRecord } from 'igniteui-angular-core';
import { IgxAssigningShapeStyleEventArgs } from 'igniteui-angular-charts';
// ...
public shapeRandomStyling: ShapeRandomStyling;

// Random styling: each country keeps the color it is first given.
public mapShapeRandomStyling(): Promise<void> {
    this.shapeRandomStyling = new ShapeRandomStyling();
    this.shapeRandomStyling.shapeStrokeColors = ['Black'];
    this.shapeRandomStyling.shapeFillColors = ['#8C23D1', '#0E9759', '#B4D336', '#F2A464', '#D74545', 'DodgerBlue'];

    var map = this.geoMap;

    // loading a shapefile with the geographic polygons of world countries
    var sds = new IgxShapeDataSource();
    sds.shapefileSource = "https://static.infragistics.com/xplatform/shapes/world_countries_all.shp";
    sds.databaseSource = "https://static.infragistics.com/xplatform/shapes/world_countries_all.dbf";
    return new Promise((resolve) => {
        sds.importCompleted.subscribe((s: IgxShapeDataSource, e: any) => {
            var geoSeries = new IgxGeographicShapeSeriesComponent();
            geoSeries.dataSource = s.getPointData();
            geoSeries.shapeMemberPath = "points";
            // the series asks for each shape's style as it draws it, which it only does when it is
            // allowed to take one
            geoSeries.isCustomShapeStyleAllowed = true;
            geoSeries.assigningShapeStyle.subscribe(this.onStylingShape.bind(this));
            map.series.add(geoSeries);
            resolve();
        });
        sds.dataBind();
    });
}

public onStylingShape(s: IgxGeographicShapeSeriesBaseComponent, args: IgxAssigningShapeStyleEventArgs): void {
    // the event covers a range of items rather than one, so the record is asked for by index
    var itemRecord = args.getItems(args.startIndex, args.endIndex)[0] as IgxShapefileRecord;
    var shapeStyle = this.shapeRandomStyling.generate(itemRecord);
    args.opacity = shapeStyle.opacity;
    args.fill = shapeStyle.fill;
    args.stroke = shapeStyle.stroke;
    args.strokeThickness = shapeStyle.strokeThickness;
}

シェイプスケールスタイリング

このコードスニペットは、ShapeScaleStyling のインスタンスを作成して、対数スケールでスケーリングされた母集団に基づいて塗りつぶし色を国に割り当てます。

import { IgxGeographicMapComponent, IgxGeographicShapeSeriesComponent, IgxGeographicShapeSeriesBaseComponent } from 'igniteui-angular-maps';
import { IgxShapeDataSource, IgxShapefileRecord } from 'igniteui-angular-core';
import { IgxAssigningShapeStyleEventArgs } from 'igniteui-angular-charts';
// ...
public shapeScaleStyling: ShapeScaleStyling;

// Scale styling: a color taken from a scale across a range of values.
public mapShapeScaleStyling(): void {
    this.shapeScaleStyling = new ShapeScaleStyling();
    this.shapeScaleStyling.defaultFill = 'Gray';
    this.shapeScaleStyling.shapeStrokeColors = ['Black'];
    this.shapeScaleStyling.shapeFillColors = ['DodgerBlue', 'yellow', '#c2f542', '#e8c902', '#e8b602', '#e87902', 'brown'];
    this.shapeScaleStyling.itemMemberPath = 'Population';
    this.shapeScaleStyling.itemMinimumValue = 5000;
    this.shapeScaleStyling.itemMaximumValue = 2000000000; // 2 Billions
    this.shapeScaleStyling.isLogarithmic = true;

    var map = this.geoMap;

    // loading a shapefile with the geographic polygons of world countries
    var sds = new IgxShapeDataSource();
    sds.shapefileSource = "https://static.infragistics.com/xplatform/shapes/world_countries_all.shp";
    sds.databaseSource = "https://static.infragistics.com/xplatform/shapes/world_countries_all.dbf";
    sds.importCompleted.subscribe((s: IgxShapeDataSource, e: any) => {
        var geoSeries = new IgxGeographicShapeSeriesComponent();
        geoSeries.dataSource = s.getPointData();
        geoSeries.shapeMemberPath = "points";
        // the series asks for each shape's style as it draws it, which it only does when it is
        // allowed to take one
        geoSeries.isCustomShapeStyleAllowed = true;
        geoSeries.assigningShapeStyle.subscribe(this.onStylingShape.bind(this));
        map.series.add(geoSeries);
    });
    sds.dataBind();
}

public onStylingShape(s: IgxGeographicShapeSeriesBaseComponent, args: IgxAssigningShapeStyleEventArgs): void {
    // the event covers a range of items rather than one, so the record is asked for by index
    var itemRecord = args.getItems(args.startIndex, args.endIndex)[0] as IgxShapefileRecord;
    var shapeStyle = this.shapeScaleStyling.generate(itemRecord);
    args.opacity = shapeStyle.opacity;
    args.fill = shapeStyle.fill;
    args.stroke = shapeStyle.stroke;
    args.strokeThickness = shapeStyle.strokeThickness;
}

シェイプ範囲スタイリング

このコードスニペットは、ShapeRangeStyling のインスタンスを作成して、人口の範囲に基づいて国に色を割り当てます。

import { IgxGeographicMapComponent, IgxGeographicShapeSeriesComponent, IgxGeographicShapeSeriesBaseComponent } from 'igniteui-angular-maps';
import { IgxShapeDataSource, IgxShapefileRecord } from 'igniteui-angular-core';
import { IgxAssigningShapeStyleEventArgs } from 'igniteui-angular-charts';
// ...
public shapeRangeStyling: ShapeRangeStyling;

// Range styling: a color per band of values.
public mapShapeRangeStyling(): void {
    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
    ];

    var map = this.geoMap;

    // loading a shapefile with the geographic polygons of world countries
    var sds = new IgxShapeDataSource();
    sds.shapefileSource = "https://static.infragistics.com/xplatform/shapes/world_countries_all.shp";
    sds.databaseSource = "https://static.infragistics.com/xplatform/shapes/world_countries_all.dbf";
    sds.importCompleted.subscribe((s: IgxShapeDataSource, e: any) => {
        var geoSeries = new IgxGeographicShapeSeriesComponent();
        geoSeries.dataSource = s.getPointData();
        geoSeries.shapeMemberPath = "points";
        // the series asks for each shape's style as it draws it, which it only does when it is
        // allowed to take one
        geoSeries.isCustomShapeStyleAllowed = true;
        geoSeries.assigningShapeStyle.subscribe(this.onStylingShape.bind(this));
        map.series.add(geoSeries);
    });
    sds.dataBind();
}

public onStylingShape(s: IgxGeographicShapeSeriesBaseComponent, args: IgxAssigningShapeStyleEventArgs): void {
    // the event covers a range of items rather than one, so the record is asked for by index
    var itemRecord = args.getItems(args.startIndex, args.endIndex)[0] as IgxShapefileRecord;
    var shapeStyle = this.shapeRangeStyling.generate(itemRecord);
    args.opacity = shapeStyle.opacity;
    args.fill = shapeStyle.fill;
    args.stroke = shapeStyle.stroke;
    args.strokeThickness = shapeStyle.strokeThickness;
}

シェイプ比較スタイリング

このコードスニペットは、ShapeComparisonStyling のインスタンスを作成して、世界の地域名に基づいて国に色を割り当てます。

import { IgxGeographicMapComponent, IgxGeographicShapeSeriesComponent, IgxGeographicShapeSeriesBaseComponent } from 'igniteui-angular-maps';
import { IgxShapeDataSource, IgxShapefileRecord } from 'igniteui-angular-core';
import { IgxAssigningShapeStyleEventArgs } from 'igniteui-angular-charts';
// ...
public shapeComparisonStyling: ShapeComparisonStyling;

// Comparison styling: a color per named value.
public mapShapeComparisonStyling(): Promise<void> {
    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' },
    ];

    var map = this.geoMap;

    // loading a shapefile with the geographic polygons of world countries
    var sds = new IgxShapeDataSource();
    sds.shapefileSource = "https://static.infragistics.com/xplatform/shapes/world_countries_all.shp";
    sds.databaseSource = "https://static.infragistics.com/xplatform/shapes/world_countries_all.dbf";
    return new Promise((resolve) => {
        sds.importCompleted.subscribe((s: IgxShapeDataSource, e: any) => {
            var geoSeries = new IgxGeographicShapeSeriesComponent();
            geoSeries.dataSource = s.getPointData();
            geoSeries.shapeMemberPath = "points";
            // the series asks for each shape's style as it draws it, which it only does when it is
            // allowed to take one
            geoSeries.isCustomShapeStyleAllowed = true;
            geoSeries.assigningShapeStyle.subscribe(this.onStylingShape.bind(this));
            map.series.add(geoSeries);
            resolve();
        });
        sds.dataBind();
    });
}

public onStylingShape(s: IgxGeographicShapeSeriesBaseComponent, args: IgxAssigningShapeStyleEventArgs): void {
    // the event covers a range of items rather than one, so the record is asked for by index
    var itemRecord = args.getItems(args.startIndex, args.endIndex)[0] as IgxShapefileRecord;
    var shapeStyle = this.shapeComparisonStyling.generate(itemRecord);
    args.opacity = shapeStyle.opacity;
    args.fill = shapeStyle.fill;
    args.stroke = shapeStyle.stroke;
    args.strokeThickness = shapeStyle.strokeThickness;
}

API リファレンス

IgxGeographicShapeSeriesComponent
IgxGeographicMapComponent

Angular 地理シェイプ シリーズのスタイル設定