React Displaying Heat Imagery

    Ignite UI for React map 컨트롤에는 를 사용하여 히트 맵 이미지를 표시할 수 있는 기능이 있습니다. ShapeFileRecord에 의해 생성됩니다. IgrShapeDataSource 모양 파일을 타일 시리즈에 로드하여 지리 공간 데이터를 로드합니다.

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

    React 열 이미지 표시 예시

    EXAMPLE
    DATA
    TSX

    이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

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

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

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

    IgrHeatTileGenerator는 로그 눈금을 사용할 수도 있습니다. 이를 사용하려면 useLogarithmicScale 속성을 true로 설정하면 됩니다.

    웹 작업자

    IgrHeatTileGenerator는 또한 웹 작업자가 별도의 스레드에서 모양 파일의 타일 이미지를 로드하는 무거운 작업을 수행할 수 있도록 지원합니다. 이는 히트맵 기능을 사용할 때 지리적 지도의 성능을 크게 향상시킬 수 있습니다. 생성기와 함께 웹 작업자를 사용하려면 useWebWorkers 속성을 true로 설정한 다음 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);
    ts
    Ignite UI for React | CTA 배너

    종속성

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

    히트맵 생성

    다음 코드 조각은 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 });
    }
    ts
    <IgrGeographicMap
        ref={this.onMapReferenced}
        height="100%"
        width="100%" >
        <IgrGeographicTileSeries
            name="heatTiles"
            tileImagery={this.state.tileImagery} />
    </IgrGeographicMap>
    tsx

    API 참조