웹 GIS 엔진인 FingerEyes-Xr은 밀도도를 시각화하기 위한 방법 중의 하나인 HeatMap 기능을 제공합니다. 바로 Xr.layers.HeatMapLayer 클래스를 통해 수행이 가능합니다. HeatMap이 아닌 또 다른 밀도도에 대한 시각화 방법은 Xr.layers.GridLayer 클래스를 사용하는 것인데, Xr.layers.GridLayer는 셀 기반의 연산을 이용해 밀도도 분석을 수행합니다. 좀더 정밀한 밀도도 분석은 Xr.layers.GridLayer이 Xr.layers.HeatMapLayer보다 우수하지만 연산 시간은 Xr.layers.HeatMapLayer가 훨씬 빨라 실시간으로 밀도도를 시각화할 수 있다는 장점을 갖습니다.
아래의 영상은 FingerEyes-Xr의 Xr.layers.HeatMapLayer를 사용하여 생성된 밀도도입니다.
이에 대한 코드는 다음처럼 간단 명료합니다.
let heatMapLayer = map.layers('heatmap'); if (!heatMapLayer) { heatMapLayer = new Xr.layers.HeatMapLayer('heatmap'); map.layers().add(heatMapLayer); } heatMapLayer.generateByLayer(lyr);
밀도도 분석을 위한 입력 데이터로 공간상에 분포된 포인트 좌표들이 필요하며, 이 포인트 좌표는 7번 코드의 lyr 변수명의 레이어를 통해 입력됩니다.
Xr.layers.HeatMapLayer는 밀도도 분석이 매우 빨라 실시간으로 밀도도를 생성할 수 있습니다. 아래의 코드는 입력 데이터가 변경되는 즉시 밀도도를 새롭게 생성해 표시합니다.
map.addEventListener(Xr.Events.LayerUpdateCompleted, function (e) { if (e.layerName === lyr.name()) { let heatMapLayer = map.layers('heatmap'); if (heatMapLayer) { heatMapLayer.generateByLayer(lyr); } } });
끝으로 보다 정밀한 밀도도를 생성하기 위한 또다른 방식인 Xr.layers.GridLayer에 대한 실제 활용예는 아래의 글을 참고하기 바랍니다.