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();

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

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

GeoService-Xr의 SQL 실행 서비스

GeoService-Xr은 연결된 DBMS에 대해 SQL문 실행을 대신해 주고 그 결과를 클라이언트에게 JSON 형식으로 전송해 주는 기능을 제공합니다. 이를 위해서 실행할 SQL 문이 정의된 파일이 서버측에 필요한데요. 아래는 그 한가지 예입니다.

{
    "metadata": {
        "startToken": "{$",
        "endToken": "}"
    },
	
    "sql": {
        "getLayers": "SELECT layers FROM core_users LIMIT 1",
        "getBuildingsByRoadCode": "SELECT ST_AsText(the_geom) FROM buld_a WHERE rn_cd ='{$road_cd}' LIMIT 1",
        "addUseLog": "INSERT INTO core_uselog (systemname, username) VALUES('{$systemName}', '{$userName}')" 	
    }
}

위의 내용에 규칙이 존재하는데요. sql 문의 id가 get으로 시작하는 getLayers나 getBuildingsByRoadCode는 반드시 SELECT 문이여야 하고, add로 시작한다면 INSERT 문, del로 시작하면 DELETE 문, set으로 시작하면 UPDATE 문이어야 합니다. 위의 SQL 정의 파일의 이름이 SQL.json이라고 한다면, GeoService-Xr의 환경설정 파일인 XrConfig.xml에 다음처럼 기술되어져야 GeoService-Xr이 실행될때 SQL 문이 로딩되어 실행할 준비가 완료됩니다..


    ....

    d:/config/SQL.json

위와 같은 준비가 되면, 클라이언트 측에서 SQL 문을 호출할 수 있는데요. 아래는 javascript 문을 통해 실행한 내용의 예입니다.

var road_cd = this._CodeMap_Road[name];

$.ajax({
    url: url = ConfigValues.GIS_SERVER + "/Xr?rsql|getBuildingsByRoadCode|" + ConfigValues.DB_NAME,
    type: "POST",
    crossDomain: true,
    data: "road_cd:=" + road_cd + "\nparam2:=param2", // 파라메터의 구분은 \n 문자로 함
    dataType: "text",
    success: function (response) {
        // Java, C/C++ 등과 같은 언어의 편의성을 위해 결과의 끝에 \0이 붙음
        // javascript에서 json으로 파싱하기 위해 response 문자열 끝에 \0 문자를 제거해야 함
        response = response.substr(0, response.length - 1); 
        response = JSON.parse(response);
        
        ...
    },

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

GeoService-Xr에서 MIME Type 설정하기

MIME 타입은 서버측에서 클라이언트로 전송한 리소스(문서)의 종류가 무엇인지를 나타내는 방법입니다. 클라이언트는 대부분 IE, Chrome 등과 같은 웹브라우저인데요. 서버측으로 받는 리소스가 어떤 종류인지를 정확히 파악해야만 이 리소스를 어떻게 처리할지 판단할 수 있고, 이런 경우에 MIME Type을 사용합니다.

참고로 MIME 타입을 사용하지 않고 해당 리소스의 종류를 파악하기 위한 방법은 리소스 이름의 접미사나 리소스의 실제 내용의 헤더 부분에 그 종류를 파악할 수 있는 정보가 있습니다면, 모든 리소스가 이런 규칙을 사용하지도 않으므로 결국 MIME 타입이 가장 표준이 되는 리소스의 종류를 파악할 수 있는 수단이 됩니다.

GeoService-Xr에서는 공간 데이터를 포함하여 다양한 리소스를 클라이언트로 서비스해주는데요. 서버가 가지고 있는 파일에 대한 MIME Type을 지정하기 위한 방식을 정리해 봅니다.

아래는 서비스하고자 하는 파일의 확장자를 통해 MIME Type을 지정하는 하나의 예로 hwp와 pptx를 확장자로 갖는 파일에 대한 MimeType을 지정하고 있습니다.


    
        
            hwp
            application/octet-stream
         
        
            pptx
            application/octet-stream
        
    

위의 경우라면 hwp와 pptx에 대한 클라이언트 측의 행동은 일반적인 다운로드로써 해당 리소스를 파일로 저장하도록 유도합니다. 위의 정보는 GeoService-Xr의 Web 디렉토리에 XrConfig.xml 파일로 존재해야 합니다.