Web Components 히트 이미지 표시
Ignite UI for Web Components map 컨트롤에는 를 사용하여 히트 맵 이미지를 표시할 수 있는 기능이 있습니다. ShapeFileRecord에 의해 생성됩니다. IgcShapeDataSource 모양 파일을 타일 시리즈에 로드하여 지리 공간 데이터를 로드합니다.
이 항목의 전제 조건으로 지리 공간 데이터로 모양 파일 바인딩 항목을 검토하는 것이 좋습니다.
Web Components Displaying Heat Imagery Example
때 IgcShapeDataSource 모양 파일을 로드하면 해당 데이터를 IgcShapefileRecord 개체. 이러한 객체는 GetPointData() 메서드의 IgcShapeDataSource 그런 다음 를 사용하여 히트 맵을 만드는 데 사용할 수 있습니다. IgcTileGeneratorMapImagery 객체를 IgcHeatTileGenerator에 할당됨 TileGenerator 재산. 이 IgcTileGeneratorMapImagery 그런 다음 에서 사용할 수 있습니다. IgcGeographicTileSeriesComponent 그것의 tileImagery 근원.
IgcHeatTileGenerator 객체는 xValues, yValues 및 values의 세 가지 값 경로를 갖도록 작동합니다. 이를 어떻게 사용할 수 있는지에 대한 예로, 인구에 대한 정보가 있는 모양 파일의 경우 xValues 경도로, yValues 위도로, values 인구 데이터로 간주할 수 있습니다. 이러한 각 속성은 number[] 사용합니다.
히트맵 기능을 사용할 때 지리 타일 시리즈의 표시는 다음을 설정하여 사용자 정의할 수 있습니다. minimumColor 그리고 maximumColor 속성을 컬렉션에 할당하는 컬렉션의 최소 및 최대 값에 해당하는 색상을 설명하는 "rgba" 문자열에 추가합니다. values의 재산 HeatTileGenerator. 다음을 설정하여 이를 추가로 사용자 정의할 수 있습니다. ScaleColors 색상을 설명하는 문자열 모음을 포함하는 생성기의 속성입니다. IgcHeatTileGenerator 지도에 표시된 값에 사용할 색상입니다. 색상을 사용자 정의하는 것도 가능합니다. ScaleColors 컬렉션을 사용하여 함께 흐리게 처리 blurRadius, maxBlurRadius, 그리고 useBlurRadiusAdjustedForZoom 속성.
IgcHeatTileGenerator는 로그 눈금을 사용할 수도 있습니다. 이를 사용하려면 useLogarithmicScale 속성을 true로 설정하면 됩니다.
Web Worker
IgcHeatTileGenerator는 또한 웹 작업자가 별도의 스레드에서 모양 파일의 타일 이미지를 로드하는 무거운 작업을 수행할 수 있도록 지원합니다. 이는 히트맵 기능을 사용할 때 지리적 지도의 성능을 크게 향상시킬 수 있습니다. 생성기와 함께 웹 작업자를 사용하려면 useWebWorkers 속성을 true로 설정한 다음 webWorkerInstance 속성을 웹 작업자의 인스턴스로 설정하면 됩니다.
// heatworker.worker.ts
import { HeatTileGeneratorWebWorker } from 'igniteui-webcomponents-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 { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps';
import { IgcGeographicTileSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcHeatTileGenerator } from 'igniteui-webcomponents-core';
import { IgcTileGeneratorMapImagery } from 'igniteui-webcomponents-maps';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcDataChartInteractivityModule,
IgcGeographicMapModule
);
Creating Heatmap
다음 코드 스니펫은 Ignite UI for Web Components 맵 구성 요소에서 인구 기반 히트 맵을 표시하는 방법을 보여줍니다.
private geoMap: IgcGeographicMapComponent;
public tileImagery: IgcTileGeneratorMapImagery;
constructor() {
super();
this.tileImagery = new IgcTileGeneratorMapImagery();
this.onDataLoaded = this.onDataLoaded.bind(this);
}
connectedCallback() {
this.innerHTML = templateHTML;
this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
this.geoMap.zoomToGeographic({ left: -134.5, top: 16.0, width: 70.0, height: 37.0 });
const url = AssetsUtils.getAssetsPath() + "/data/UsaCitiesPopulation.csv";
console.log("SB loading " + url);
fetch(url)
.then((response) => response.text())
.then(data => this.onDataLoaded(data));
}
public onDataLoaded(csvData: string) {
const csvLines = csvData.split("\n");
console.log("loaded UsaCitiesPopulation.csv " + csvLines.length);
const latitudes: number[] = [];
const longitudes: number[] = [];
const populations: number[] = [];
// parsing CSV data and creating geographic locations
for (let i = 1; i < csvLines.length; i++) {
const columns = csvLines[i].split(",");
latitudes.push(Number(columns[1]));
longitudes.push(Number(columns[2]));
populations.push(Number(columns[3]));
}
// generating heat map imagery tiles
const gen = new IgcHeatTileGenerator();
gen.xValues = longitudes;
gen.yValues = latitudes;
gen.values = populations;
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.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 IgcGeographicTileSeriesComponent();
series.tileImagery = this.tileImagery;
// add heat map series to the map
this.geoMap.series.add(series);
}