글

작성일자

FingerEyes-Xr에서 코드를 통한 지도 이동시 깜빡거리는 현상 제거

FingerEyes-Xr은 웹 기반에서 공간 데이터를 편집할 수 있도록 도형 데이터를 클라이언트에서 직접 렌더링하여 표시합니다. 즉 배경지도는 Image로 표시하고 그외 수치지도 레이어는 SVG와 같은 그래픽 요소로 표시됩니다.

이러한 구조로 인해 마우스 등을 통한 지도 이동 시에는 문제가 없으나, 코드를 통한 지도 이동시에 수치지도 레이어가 깜빡 거리는 현상이 발생할 수 있습니다. 그러나 움직이는 물체를 지도에서 추적하거나 GPS 등을 이용해 내 위치를 중심으로 지도를 이동시키는 등의 기능을 개발할때 이러한 깜빡거리는 현상은 사용자에게 좋지 않은 경험을 제공합니다.

그러나 FingerEyes-Xr에서도 움직이는 물체나 GPS 등을 통한 지도 이동 등과 같은 기능에서 자연스럽게 지도를 깜빡임없이 이동시키는 기능의 구현이 가능합니다. 이럴때 사용할 수 있는 코드는 아래와 같습니다.

function smoothMapMoveByPixel(map, px, py) {
    var cm = map.coordMapper();

    cm.moveMapByViewOffset(px, py);
    map.update(Xr.MouseActionEnum.MOUSE_DRAG_END, px, py);
}
                        
function smoothMapMove(map, newX, newY) {
    var cm = map.coordMapper();
    var prePt = cm.currentCenter();

    cm.moveTo(newX, newY);

    var deltaX = cm.viewLength(newX - prePt.x);
    var deltaY = cm.viewLength(newY - prePt.y);

    if (newX > prePt.x) deltaX = -deltaX;
    if (newY < prePt.y) deltaY = -deltaY;

    map.update(Xr.MouseActionEnum.MOUSE_DRAG_END, deltaX, deltaY);
}

함수가 2개인데요. 먼저 smoothMapMoveByPixel는 픽셀 단위값 만큼 지도를 자연스럽게 이동시키는 함수이고, smoothMapMove는 이동하고자 하는 위치를 지도의 절대좌표값으로 해서 자연스럽게 이동하는 함수입니다. 이중 smoothMapMove 함수의 사용예는 아래와 같습니다.

setInterval(function () {
    var map = ...;
    var cm = map.coordMapper();
    var prePt = cm.currentCenter();
    var newX = prePt.x + 2; 
    var newY = prePt.y - 2;

    smoothMapMove(map, newX, newY);
}, 100);

위의 코드는 0.1초마다 지도를 우측하단으로 x와 y축 모두에 대해 2미터만큼 이동시키는 것으로, 실제 시스템에 적용한 결과 화면은 아래와 같습니다.

보시는 것처럼 깜빡거림없이 자연스럽게 지도가 이동하는 것을 볼 수 있는데요. 만약, 구성 레이어가 많거나 해서 깜빡거림이 여전이 발생한다면 지도 이동 반복 주기에 대한 시간을 늘려 테스트 해보기 바랍니다.

작성일자

jQuery UI의 draggable 기능에서 Scroll 오류 해결 방법

jQuery UI에서는 dom 요소에 대해 마우스로 쉽게 이동할 수 있도록 draggable 기능을 제공합니다. Windows 10에서는 문제가 없는데, Windows 7 등과 같은 버전에서는 이 draggable 기능 적용시 Scroll 기능에 오류가 있습니다. 즉, Scroll 기능이 작동하면 해당 dom이 계속 마우스에 붙어 따라다니는 기이한 현상이 발생합니다. 이에 대한 해결책은 아래의 코드와 같습니다.

var containerDiv = $("#layerManager");
containerDiv.draggable({ handle: "#layerManagerTitle" });

위의 코드가 적용된 dom 요소의 구성은 아래 이미지와 같습니다.

즉, ID가 layerManager인 DIV에 draggable 기능을 적용어 이동시키되, ID가 layerManagerTitle인 DIV에 대해서만 draggable 적용을 받도록 하는 것입니다.

작성일자

GeoService-Xr의 SQL 실행 서비스 호출 코드

GeoService-Xr에서 DBMS를 대상으로 Query 문을 호출하는 코드를 정리해 둡니다. GET 방식과 POST 방식 모두 적용할 수 있는데요. 먼저 POST 방식에 대한 예는 다음과 같습니다.

sql = "SELECT USER_ID, SEC_NUM, NAM, EMAIL from web_user_man";
url = "http://168.192.76.103:8080/Xr?sql|BzSewage|1";
                        
$.ajax({
    url: url,
    type: "POST",
    crossDomain: true,
    data: sql,
    dataType: "text",
    
    success: function (response) {
        response = response.substr(0, response.length - 1); // data 문자열 끝에 \0 문자를 제거
        response = JSON.parse(response);

        // ...
    },

    error: function (xhr, status) {
        alert("ajax error");
    }
});

아래는 위와 동일한 SQL 문에 대해 GET 방식으로 호출한 예입니다.

sql = "SELECT USER_ID, SEC_NUM, NAM, EMAIL from web_user_man";
url = "http://168.192.76.103:8080/Xr?sql|" + encodeURIComponent(sql) + "|BzSewage|1";

$.ajax({
    url: url,
    type: "GET",
    crossDomain: true,
    dataType: "text",

    success: function (response) {
        response = response.substr(0, response.length - 1); // data 문자열 끝에 \0 문자를 제거
        response = JSON.parse(response);

        // ...
    },

    error: function (xhr, status) {
        alert("ajax error");
    }
});

이런 방식은 개발 단계에서 별도의 서버설정없이 바로 SQL 문을 실행할 수 있는데요. 최종적으로는 SQL 문을 이처럼 코드 단에 담기 보다는 GeoService-Xr의 SQL 실행 서비스의 방식으로 변경해 소스코드를 배포해야 합니다.

작성일자

[FingerEyes-Xr] 이미지를 레이어로 추가하기

간단히 하나의 이미지를 지도를 구성하는 레이어로 추가하기 위한 코드에 대한 설명입니다. 예를 들어 아래처럼 TMS 등과 같은 방식으로 추가된 배경지도 위에 하나의 이미지를 중첩하고자 할때 사용할 수 있는 기능입니다.

코드의 예는 아래와 같습니다. url을 통해 중첩하고자 하는 이미지의 웹 url을 지정하고, 이미지에 대한 MBR을 minX, minY, maxX, maxY로 지정해 레이어를 생성해 추가해 주면 됩니다.

var lyr = new Xr.layers.ImageLayer(
    "imageLyr",
    {
        url: "http://www.gisdeveloper.co.kr:8080/download/map.jpg",
        minX: 150613,
        minY: 246114,
        maxX: 151129,
        maxY: 246633,
    }
);

map.layers().add(lyr);
map.update();

결과는 아래와 같습니다. 지정된 위치에 지도가 표시됩니다.

이 기능은 드론등과 같은 장치를 이용해 특정 지역에 대한 지도를 변경할때 간단히 사용할 수 있는 기능입니다.