작성일자

FingerEyes-Xr을 이용한 HeatMap 시각화

웹 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에 대한 실제 활용예는 아래의 글을 참고하기 바랍니다.

NexGen, 공간 데이터의 분포경향 분석을 위한 밀도맵 기능

작성일자

Javascript의 async, await 정리

이 글을 이해하기 위해서는 먼저 Promise API에 대해 알고 있어야 하며 아래의 글을 참고하시기 바랍니다.

Javascript의 Promise API 요약

async와 awit의 사용은 비동기 처리에 대한 혼란스러운 코드의 가독성을 향상 시켜줌으로써 코드의 유지보수 및 견고한 코드를 작성할 수 있습니다.

먼저 아래의 코드는 Promise API를 이용한 비동기처리입니다.

function getItem() {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            let result = { name: 'Dip2K', age: 44 };
            resolve(result);
        }, 2000);
    });
}

function callback(result) {
    console.log(result);
}

console.log('1');
getItem().then(callback);
console.log('2');

위의 코드를 async와 await를 이용해 동일하게 작동하도록 코드를 작성하면 다음과 같습니다.

function getItem() {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            let result = { name: 'Dip2K', age: 44 };
            resolve(result);
        }, 2000);
    });
}

async function get() {
    let result = await getItem();
    console.log(result);
}

console.log('1');
get();
console.log('2');

콜백함수 없이 비동기처리가 된 경우로, 순차적인 흐름의 코드로 작성되었습니다.

아래의 코드는 Promise의 예외의 처리를 async 및 await 구분에서 어떻게 처리 하는지를 보여주는 코드입니다.

function getItem() {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            let bOK = false;

            if(bOK) {
                let result = { name: 'Dip2K', age: 44 };
                resolve(result);
            } else {
                reject(null);
            }
        }, 2000);
    });
}

async function get() {
    try {
        let result = await getItem();
        console.log(result);
    } catch(e) {
        console.log(e);
    }
}

console.log('1');
get();
console.log('2');