Angular ヒート画像の表示

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

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

Angular ヒート画像の表示の例

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

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

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 { IgxHeatTileGenerator } from 'igniteui-angular-core';
import { IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxTileGeneratorMapImagery } from 'igniteui-angular-maps';

ヒートマップの作成

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

<igx-geographic-map #map width="100%" height="calc(100% - 60px)">
    <igx-geographic-tile-series name="heatTiles" [tileImagery]="tileImagery"></igx-geographic-tile-series>
</igx-geographic-map>

@ViewChild("map", { static: true })
public map: IgxGeographicMapComponent;
public data: any[];
public tileImagery: IgxTileGeneratorMapImagery;
// ...
constructor() {
    this.data = this.initData();

    this.tileImagery = new IgxTileGeneratorMapImagery();

    const con: IgxShapeDataSource = new IgxShapeDataSource();
    con.importCompleted.subscribe((s, e) => {
        const data = con.getPointData();
        const lat: number[] = [];
        const lon: number[] = [];
        const val: number[] = [];
        for (let i = 0; i < data.length; i++) {
            const item = data[i];
            for (let j = 0; j < item.points.length; j++) {
                const pointsList = item.points[j];
                for (let k = 0; k < pointsList.length; k++) {
                    lat.push(pointsList[k].y);
                    lon.push(pointsList[k].x);
                }
            }
            const value = item.fieldValues["POP_2010"];
            if (value >= 0) {
                val.push(value);
            } else {
                val.push(0);
            }
        }

        const gen = new IgxHeatTileGenerator();
        gen.xValues = lon;
        gen.yValues = lat;
        gen.values = val;
        gen.blurRadius = 6;
        gen.maxBlurRadius = 20;
        gen.useBlurRadiusAdjustedForZoom = true;
        gen.minimumColor = "rgba(100,255, 0, 0.3922)";
        gen.maximumColor = "rgba(255, 255, 0, 0.9412)";
        gen.useGlobalMinMax = true;
        gen.useGlobalMinMaxAdjustedForZoom = true;
        gen.useLogarithmicScale = true;
        gen.useWebWorkers = true;
        gen.webWorkerInstance = new Worker("../heatworker.worker", { type: "module" });
        gen.scaleColors = [
            "rgba(0, 0, 255, 64)",
            "rgba(0, 255, 255, 96)",
            "rgba(0, 255, 0, 160)",
            "rgba(255, 255, 0, 180)",
            "rgba(255, 0, 0, 200)"
        ];

        this.tileImagery.tileGenerator = gen;
    });
    con.shapefileSource = "assets/Shapes/AmericanCities.shp";
    con.databaseSource  = "assets/Shapes/AmericanCities.dbf";
    con.dataBind();
}

API リファレンス