Angular ヒート画像の表示

Ignite UI for Angular マップ コントロールには、Shape ファイルをタイル シリーズにロードして地理空間データをロードすることにより、IgxShapeDataSource によって生成される IgxShapefileRecord を使用して、ヒートマップ画像を表示する機能があります。

このトピックを読み進めるための前提条件として、シェープ ファイルを地理的データにバインディングをお読みください。

Angular ヒート画像の表示の例

IgxShapeDataSource がそのシェイプ ファイルを読み込むと、そのデータを IgxShapefileRecord オブジェクトに変換します。これらのオブジェクトは、IgxShapeDataSource の GetPointData() メソッドから取得でき、

プロパティに割り当てられた IgxHeatTileGenerator で IgxTileGeneratorMapImagery オブジェクトを使用してヒートマップを作成するために使用できます。この IgxTileGeneratorMapImagery は、tileImagery ソースとして IgxGeographicTileSeriesComponent で使用できます。

IgxHeatTileGenerator オブジェクトは、xValues、yValues、values の 3 つの値パスを持つように機能します。これらの使用方法の例として、人口に関する情報を持つ形状ファイルの場合、xValues を経度、yValues を緯度、values を人口データとみなすことができます。これらの各プロパティは、number[] を取得します。

ヒートマップ機能を使用する際の地理的タイルシリーズの表示は、minimumColor プロパティと maximumColor プロパティを IgxHeatTileGenerator の values プロパティに割り当てるコレクションの最小値と最大値に対応する色を記述する「rgba」文字列に設定することでカスタマイズできます。これをさらにカスタマイズするには、ジェネレーターの scaleColors プロパティを設定して、色を説明する文字列のコレクションを含めます。これにより、IgxHeatTileGenerator に、マップに表示される値に使用する色がわかります。blurRadius、maxBlurRadius、useBlurRadiusAdjustedForZoom プロパティを使用して、scaleColors コレクション内の色が一緒にぼやける方法をカスタマイズすることもできます。

IgxHeatTileGenerator は対数スケールも使用できます。これを使用する場合は、useLogarithmicScale プロパティを true に設定できます。

Web Worker

また、IgxHeatTileGenerator は、Web Worker が、別のスレッドでシェイプ ファイルからタイル イメージをロードする際の重いリフティングをサポートしています。これにより、ヒートマップ機能を使用する際に地理マップのパフォーマンスが大幅に向上します。ジェネレーターでWebワーカーを使用するには、useWebWorkers プロパティを true に設定し、webWorkerInstance プロパティを Web Worker のインスタンスに設定できます。

// heatworker.worker.ts
import { HeatTileGeneratorWebWorker } from 'igniteui-angular-core';

const worker: Worker = self as any;
worker.onmessage = HeatTileGeneratorWebWorker.onmessage;
HeatTileGeneratorWebWorker.postmessage = heatWorkerPostMessage;
function heatWorkerPostMessage() {
  (self as any).postMessage.apply(self, Array.prototype.slice.call(arguments));
}
HeatTileGeneratorWebWorker.start();
export default {} as typeof Worker & (new () => Worker);

依存関係

import { IgxGeographicMapComponent, IgxGeographicTileSeriesComponent, IgxTileGeneratorMapImagery } from 'igniteui-angular-maps';
import { IgxHeatTileGenerator, IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxGeographicMapModule } from 'igniteui-angular-maps';
import { IgxDataChartInteractivityModule } from 'igniteui-angular-charts';
// ...
// app.module.ts
@NgModule({
    imports: [
    IgxGeographicMapModule,
    IgxDataChartInteractivityModule
    ]
})
export class AppModule { }

ヒートマップの作成

以下のコード スニペットは、人口ベースのヒートマップを Ignite UI for Angular マップ コンポーネントに表示する方法を示しています。

<igx-geographic-map
    #map
    height="100%"
    width="100%"
    zoomable="true">
</igx-geographic-map>

import { IgxGeographicMapComponent, IgxGeographicTileSeriesComponent, IgxTileGeneratorMapImagery } from 'igniteui-angular-maps';
import { IgxHeatTileGenerator, IgxShapeDataSource } from 'igniteui-angular-core';
@ViewChild("map", { static: true } )
private map: IgxGeographicMapComponent
// ...
var map = this.map;
map.zoomToGeographic({ left: -134.5, top: 16.0, width: 70.0, height: 37.0 });

var root = "https://static.infragistics.com/xplatform/shapes/";

var sds = new IgxShapeDataSource();
sds.importCompleted.subscribe(() => {
    var latitudes: number[] = [];
    var longitudes: number[] = [];
    var populations: number[] = [];
    // parsing shapefile data and creating geographic locations
    var pointData = sds.getPointData();
    for (var i = 0; i < pointData.length; i++) {
        var record = pointData[i];
        for (var j = 0; j < record.points.length; j++) {
            var pointsList = record.points[j];
            for (var k = 0; k < pointsList.length; k++) {
                latitudes.push(pointsList[k].y);
                longitudes.push(pointsList[k].x);
            }
        }
        // using field/column names from .DBF file
        var value = record.fieldValues["POP_2010"];
        populations.push(value >= 0 ? value : 0);
    }

    // the heat map's tiles are generated from the three parallel arrays: where each
    // reading is, and how large it is
    // generating heat map imagery tiles
    var gen = new IgxHeatTileGenerator();
    gen.xValues = longitudes;
    gen.yValues = latitudes;
    gen.values = populations;
    gen.blurRadius = 6;
    gen.maxBlurRadius = 20;
    gen.useBlurRadiusAdjustedForZoom = true;
    gen.minimumColor = "rgba(100, 255, 0, 0.5)";
    gen.maximumColor = "rgba(255, 255, 0, 0.5)";
    gen.useGlobalMinMax = true;
    gen.useGlobalMinMaxAdjustedForZoom = true;
    gen.useLogarithmicScale = true;
    gen.scaleColors = [
        "rgba(0, 0, 255, .251)",
        "rgba(0, 255, 255, .3765)",
        "rgba(50, 205, 50, .2675)",
        "rgba(255, 255, 0, .7059)",
        "rgba(255, 0, 0, .7843)"
    ];
    // Generating the tiles on a worker keeps them off the thread the map draws on, which
    // is worth doing for a heat map of any size. Wiring one up is not the same on every
    // bundler, so the topic shows it separately — and workers are turned off here to
    // match, since the generator asks for one by default and throws when neither a script
    // path nor an instance was given.
    gen.useWebWorkers = false;

    var tileImagery = new IgxTileGeneratorMapImagery();
    tileImagery.tileGenerator = gen;

    // generating heat map series
    var series = new IgxGeographicTileSeriesComponent();
    series.tileImagery = tileImagery;
    // adding the heat map series to the map
    map.series.add(series);
});
sds.shapefileSource = root + "AmericanCities.shp";
sds.databaseSource = root + "AmericanCities.dbf";
sds.dataBind();

API リファレンス