Angular Displaying Heat Imagery

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

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

Angular 열 이미지 표시 예

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

// import { HeatTileGeneratorWebWorker } from "igniteui-angular-core/esm5/lib/HeatTileGeneratorWebWorker";
import { HeatTileGeneratorWebWorker } from "igniteui-angular-core/esm2015/lib/HeatTileGeneratorWebWorker";

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コピー

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";

import { IgxGeographicMapModule } from "igniteui-angular-maps";
import { IgxDataChartInteractivityModule } from "igniteui-angular-charts";


@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,

],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxGeographicMapModule,
    IgxDataChartInteractivityModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { AfterViewInit, Component, ChangeDetectionStrategy, ViewChild } from "@angular/core";
import { IgxHeatTileGenerator } from "igniteui-angular-core";
import { IgxShapeDataSource } from "igniteui-angular-core";
import { IgxGeographicMapComponent } from "igniteui-angular-maps";
import { IgxGeographicTileSeriesComponent } from "igniteui-angular-maps";
import { IgxTileGeneratorMapImagery } from "igniteui-angular-maps";

@Component({
    standalone: false,
    selector: "app-root",
    styleUrls: ["./app.component.scss"],
    templateUrl: "./app.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit {

    @ViewChild("map", { static: true })
    public map: IgxGeographicMapComponent;
    public tileImagery: IgxTileGeneratorMapImagery;

    constructor() {
        this.tileImagery = new IgxTileGeneratorMapImagery();

        const sds: IgxShapeDataSource = new IgxShapeDataSource();
        sds.importCompleted.subscribe((s, e) => {
            const data = sds.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 = parseInt(item.fieldValues["POP2010"], 10);
                if (value >= 0) {
                    val.push(value);
                } else {
                    val.push(0);
                }
            }

            // generating heat map imagery tiles
            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.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.webWorkerInstance = new Worker("./HeatmapWorker", { type: "module" });
            gen.webWorkerInstance = new Worker(new URL('./HeatmapWorker', import.meta.url), { type: "module" });

            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 IgxGeographicTileSeriesComponent();
            series.name = "heatMapSeries";
            series.tileImagery = this.tileImagery;

            // add heat map series to the map
            this.map.series.add(series);
        });

        sds.shapefileSource = "https://static.infragistics.com/xplatform/shapes/AmericanCities.shp";
        sds.databaseSource  = "https://static.infragistics.com/xplatform/shapes/AmericanCities.dbf";
        sds.dataBind();
    }

    public ngAfterViewInit(): void {
        this.map.zoomToGeographic({ left: -134.5, top: 16.0, width: 70.0, height: 37.0 });
    }
}
tsコピー

<div class="container vertical">
    <igx-geographic-map #map width="100%" height="100%">
    </igx-geographic-map>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

때 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로 설정하면 됩니다.

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

웹 작업자

​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

종속성

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

히트맵 생성

다음 코드 조각은 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

API 참조

• IgxGeographicTileSeriesComponent
• IgxHeatTileGenerator
• maximumColor
• minimumColor
• IgxShapefileRecord
• IgxShapeDataSource
• IgxTileGeneratorMapImagery
• tileGenerator
• tileImagery
• useBlurRadiusAdjustedForZoom
• useLogarithmicScale