Web Components ヒート画像の表示

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

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

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

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    IgcShapeDataSource がそのシェイプ ファイルを読み込むと、そのデータを IgcShapefileRecord オブジェクトに変換します。これらのオブジェクトは、IgcShapeDataSource の GetPointData() メソッドから取得でき、TileGenerator プロパティに割り当てられた IgcHeatTileGenerator で IgcTileGeneratorMapImagery オブジェクトを使用してヒートマップを作成するために使用できます。この IgcTileGeneratorMapImagery は、tileImagery ソースとして IgcGeographicTileSeriesComponent で使用できます。

    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);
ts
    Ignite UI for Web Components | CTA Banner

    依存関係

    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
);
ts

    ヒートマップの作成

    以下のコード スニペットは、人口ベースのヒートマップを 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);
}
ts

    API リファレンス