Web Components ヒート画像の表示

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

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

Web Components ヒート画像の表示の例

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

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

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

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

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

Web Worker

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

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

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

依存関係

import Worker from "./heatworker.worker"

import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps';
import { IgcGeographicTileSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcHeatTileGenerator } from 'igniteui-webcomponents-core';
import { IgcTileGeneratorMapImagery } from 'igniteui-webcomponents-maps';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(
    IgcDataChartInteractivityModule,
    IgcGeographicMapModule
);

ヒートマップの作成

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

private geoMap: IgcGeographicMapComponent;
public tileImagery: IgcTileGeneratorMapImagery;

constructor() {
    super();
    this.tileImagery = new IgcTileGeneratorMapImagery();
    this.onDataLoaded = this.onDataLoaded.bind(this);
}

connectedCallback() {
    this.innerHTML = templateHTML;
    this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
    this.geoMap.zoomToGeographic({ left: -134.5, top: 16.0, width: 70.0, height: 37.0 });

    const url = AssetsUtils.getAssetsPath() + "/data/UsaCitiesPopulation.csv";
    console.log("SB loading " + url);
    fetch(url)
        .then((response) => response.text())
        .then(data => this.onDataLoaded(data));
}

public onDataLoaded(csvData: string) {
    const csvLines = csvData.split("\n");
    console.log("loaded UsaCitiesPopulation.csv " + csvLines.length);
    const latitudes: number[] = [];
    const longitudes: number[] = [];
    const populations: number[] = [];
    // parsing CSV data and creating geographic locations
    for (let i = 1; i < csvLines.length; i++) {
        const columns = csvLines[i].split(",");
        latitudes.push(Number(columns[1]));
        longitudes.push(Number(columns[2]));
        populations.push(Number(columns[3]));
    }
    // generating heat map imagery tiles
    const gen = new IgcHeatTileGenerator();
    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.useWebWorkers = true;
    gen.webWorkerInstance = new Worker();
    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)"
    ];
    this.tileImagery.tileGenerator = gen;
    // generating heat map series
    const series = new IgcGeographicTileSeriesComponent();
    series.tileImagery = this.tileImagery;
    // add heat map series to the map
    this.geoMap.series.add(series);
}

API リファレンス