React Displaying Heat Imagery

The Ignite UI for React map control has the ability to show heat-map imagery through the use of the ShapeFileRecord that are generated by a IgrShapeDataSource by loading geo-spatial data by loading shape files to a tile series.

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

React Displaying Heat Imagery Example

그때IgrShapeDataSource 셰이프 파일을 로드하고, 그 데이터를 다음과 같이 변환합니다.IgrShapefileRecord 물건들. 이 객체들은 다음GetPointData() 그 방법IgrShapeDataSource 그리고 다음 다음을 사용하여 히트맵을 생성할 수 있습니다.IgrTileGeneratorMapImagery 객체가IgrHeatTileGenerator 그TileGenerator 재산. 이거IgrTileGeneratorMapImagery 그 후 에 사용될 수 있습니다.IgrGeographicTileSeries 그것이tileImagery 출처.

객체는IgrHeatTileGenerator 세 개의 값 경로,xValues,yValues,values로 가득하도록 작동합니다. 예를 들어, 인구 정보가 담긴 도형 파일의 경우, 를xValues 경도,yValues를 위도,values를 인구 데이터를 고려할 수 있습니다. 이 각 속성은 를 가져갑니다number[].

히트맵 기능을 사용할 때 지리적 타일 시리즈의 표시는 다음 설정을 통해 커스터마이즈할 수 있습니다.minimumColor 그리고maximumColor "RGBA" 문자열에 속성이 있으며, 이는 할당한 컬렉션의 최소값과 최대 값에 대응하고자 하는 색상을 설명합니다valuesHeatTileGenerator.이 기능을 추가로 설정하여 맞춤 설정할 수 있습니다.ScaleColors 생성기는 색상을 설명하는 문자열들의 집합을 포함하도록 하여 다음과 같은 정보를 제공합니다.IgrHeatTileGenerator 지도에 표시되는 수치에 어떤 색을 사용할지에 대해서요. 또한 색상 설정을 커스터마이징할 수도 있습니다ScaleColors 컬렉션을 모으려면 다음을 사용하여blurRadius,maxBlurRadius 그리고useBlurRadiusAdjustedForZoom 부동산.

그IgrHeatTileGenerator 로그 스케일도 사용할 수 있습니다. 이 기능을 사용하고 싶다면, 다음 설정을 할 수 있습니다.useLogarithmicScale property를 참.

Web Worker

IgrHeatTileGenerator또한 웹 워커가 셰이프 파일에서 타일 이미지를 별도의 스레드에 불러오는 작업을 처리할 수 있는 지원도 있습니다. 이렇게 하면 히트맵 기능을 사용할 때 지리적 지도의 성능을 크게 향상시킬 수 있습니다. 생성기와 함께 웹 워커를 사용하려면 속성을 true로 설정useWebWorkers 한 후 웹 워커의 인스턴스로 설정할webWorkerInstance 수 있습니다.

// heatworker.worker.ts
import { HeatTileGeneratorWebWorker } from 'igniteui-react-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);

Dependencies

import Worker from "./heatworker.worker"

import { IgrGeographicMapImagery } from 'igniteui-react-maps';
import { IgrHeatTileGenerator } from 'igniteui-react-core';
import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrGeographicTileSeries } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';
import { IgrTileGeneratorMapImagery } from 'igniteui-react-maps';
import { IgrShapeDataSource } from 'igniteui-react-core';
// ...
IgrDataChartInteractivityModule.register();
IgrGeographicMapModule.register();

Creating Heatmap

다음 코드 조각은 Ignite UI for React에서 인구 기반 히트 맵을 표시하는 방법을 보여줍니다.

public map: IgrGeographicMap;
public tileImagery: IgrTileGeneratorMapImagery = null;
// ...
constructor(props: any) {
    super(props);
    this.onMapReferenced = this.onMapReferenced.bind(this);
    this.onDataLoaded = this.onDataLoaded.bind(this);
    this.tileImagery = new IgrTileGeneratorMapImagery();
    this.state = { tileImagery: null }
}

public onMapReferenced(map: IgrGeographicMap) {
    this.map = map;

    const url = process.env.PUBLIC_URL;
    const sds: IgrShapeDataSource = new IgrShapeDataSource();
    sds.importCompleted = this.onDataLoaded;
    sds.shapefileSource = url + "/Shapes/AmericanCities.shp";
    sds.databaseSource  = url + "/Shapes/AmericanCities.dbf";
    sds.dataBind();
}

public onDataLoaded(sds: IgrShapeDataSource, e: any) {
    let records = sds.getPointData();
    let latArray: number[] = [];
    let lonArray: number[] = [];
    let popArray: number[] = [];

    for (let r = 0; r < records.length; r++) {
      let record = records[r];
        for (let j = 0; j < record.points.length; j++) {
            let points = record.points[j];
            for (let k = 0; k < points.length; k++) {
                latArray.push(points[k].y);
                lonArray.push(points[k].x);
            }
        }
        let value = parseInt(record.fieldValues["POP2010"], 10);
        if (value >= 0) {
            popArray.push(value);
        } else {
            popArray.push(0);
      }
    }

    const gen = new IgrHeatTileGenerator();
    gen.xValues = lonArray;
    gen.yValues = latArray;
    gen.values = popArray;
    gen.blurRadius = 6;
    gen.maxBlurRadius = 20;
    gen.useBlurRadiusAdjustedForZoom = true;
    gen.minimumColor = "rgba(100, 255, 0, 0.4)";
    gen.maximumColor = "rgba(255, 255, 0, 0.95)";
    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)"];
    gen.useGlobalMinMax = true;
    gen.useGlobalMinMaxAdjustedForZoom = true;
    gen.useLogarithmicScale = true;
    gen.useWebWorkers = true;
    gen.webWorkerInstance = new Worker();

    this.tileImagery.tileGenerator = gen;
    this.setState({ tileImagery: this.tileImagery });
}

<IgrGeographicMap
    ref={this.onMapReferenced}
    height="100%"
    width="100%" >
    <IgrGeographicTileSeries
        name="heatTiles"
        tileImagery={this.state.tileImagery} />
</IgrGeographicMap>

React Displaying Heat Imagery