Web Components 히트 이미지 표시
Ignite UI for Web Components map 컨트롤에는 를 사용하여 히트 맵 이미지를 표시할 수 있는 기능이 있습니다. ShapeFileRecord
에 의해 생성됩니다. IgcShapeDataSource
모양 파일을 타일 시리즈에 로드하여 지리 공간 데이터를 로드합니다.
이 항목의 전제 조건으로 지리 공간 데이터로 모양 파일 바인딩 항목을 검토하는 것이 좋습니다.
Web Components Displaying Heat Imagery Example
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
때 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);
ts
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
);
ts
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);
}
ts