Angular Displaying Heat Imagery

    Ignite UI for Angular 다음을 사용하여 열 지도 이미지를 표시하는 기능이 있습니다. ShapeFileRecord에 의해 생성됨 IgxShapeDataSource 타일 시리즈에 모양 파일을 로드하여 지리 공간 데이터를 로드합니다.

    이 항목의 전제 조건으로 지리 공간 데이터로 모양 파일 바인딩 항목을 검토하는 것이 좋습니다.

    Angular Displaying Heat Imagery Example

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

    때 IgxShapeDataSource 모양 파일을 로드하면 해당 데이터를 IgxShapefileRecord 개체. 이러한 객체는 GetPointData() 메서드의 IgxShapeDataSource 그런 다음 를 사용하여 히트 맵을 만드는 데 사용할 수 있습니다. IgxTileGeneratorMapImagery 객체를 IgxHeatTileGenerator에 할당됨 TileGenerator 재산. 이 IgxTileGeneratorMapImagery 그런 다음 에서 사용할 수 있습니다. IgxGeographicTileSeriesComponent 그것의 tileImagery 근원.

    ​IgxHeatTileGenerator 객체는 xValues, yValues 및 values의 세 가지 값 경로를 갖도록 작동합니다. 이를 어떻게 사용할 수 있는지에 대한 예로, 인구에 대한 정보가 있는 모양 파일의 경우 xValues 경도로, yValues 위도로, values 인구 데이터로 간주할 수 있습니다. 이러한 각 속성은 number[] 사용합니다.

    히트맵 기능을 사용할 때 지리 타일 시리즈의 표시는 다음을 설정하여 사용자 정의할 수 있습니다. minimumColor 그리고 maximumColor 속성을 컬렉션에 할당하는 컬렉션의 최소 및 최대 값에 해당하는 색상을 설명하는 "rgba" 문자열에 추가합니다. values의 재산 HeatTileGenerator. 다음을 설정하여 이를 추가로 사용자 정의할 수 있습니다. ScaleColors 색상을 설명하는 문자열 모음을 포함하는 생성기의 속성입니다. IgxHeatTileGenerator 지도에 표시된 값에 사용할 색상입니다. 색상을 사용자 정의하는 것도 가능합니다. ScaleColors 컬렉션을 사용하여 함께 흐리게 처리합니다. blurRadius, maxBlurRadius, 그리고 useBlurRadiusAdjustedForZoom 속성.

    ​IgxHeatTileGenerator는 로그 스케일을 사용할 수도 있습니다. 이를 사용하려면 useLogarithmicScale 속성을 true로 설정하면 됩니다.

    Web Worker

    ​IgxHeatTileGenerator는 또한 웹 작업자가 별도의 스레드에서 모양 파일의 타일 이미지를 로드하는 무거운 작업을 수행할 수 있도록 지원합니다. 이는 히트맵 기능을 사용할 때 지리적 지도의 성능을 크게 향상시킬 수 있습니다. 생성기와 함께 웹 작업자를 사용하려면 useWebWorkers 속성을 true로 설정한 다음 webWorkerInstance 속성을 웹 작업자의 인스턴스로 설정하면 됩니다.

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

    Dependencies

    import { IgxHeatTileGenerator } from 'igniteui-angular-core';
import { IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxTileGeneratorMapImagery } from 'igniteui-angular-maps';
ts

    Creating Heatmap

    다음 코드 조각은 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>
html
    @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();
}
ts
    App Builder | CTA Banner

    API References