React Displaying Heat Imagery
Ignite UI for React map 컨트롤에는 를 사용하여 히트 맵 이미지를 표시할 수 있는 기능이 있습니다. ShapeFileRecord
에 의해 생성됩니다. IgrShapeDataSource
모양 파일을 타일 시리즈에 로드하여 지리 공간 데이터를 로드합니다.
이 항목의 전제 조건으로 지리 공간 데이터로 모양 파일 바인딩 항목을 검토하는 것이 좋습니다.
React 열 이미지 표시 예시
이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.
때 IgrShapeDataSource
모양 파일을 로드하면 해당 데이터를 IgrShapefileRecord
개체. 이러한 객체는 GetPointData()
메서드의 IgrShapeDataSource
그런 다음 를 사용하여 히트 맵을 만드는 데 사용할 수 있습니다. IgrTileGeneratorMapImagery
객체를 IgrHeatTileGenerator
에 할당됨 TileGenerator
재산. 이 IgrTileGeneratorMapImagery
그런 다음 에서 사용할 수 있습니다. IgrGeographicTileSeries
그것의 tileImagery
근원.
IgrHeatTileGenerator
객체는 xValues
, yValues
및 values
의 세 가지 값 경로를 갖도록 작동합니다. 이를 어떻게 사용할 수 있는지에 대한 예로, 인구에 대한 정보가 있는 모양 파일의 경우 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
종속성
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