공간정보시스템 / 3차원 시각화 / 딥러닝 기반 기술 연구소 @지오서비스(GEOSERVICE)
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에서 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 실행 서비스의 방식으로 변경해 소스코드를 배포해야 합니다.
간단히 하나의 이미지를 지도를 구성하는 레이어로 추가하기 위한 코드에 대한 설명입니다. 예를 들어 아래처럼 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은 연결된 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");
}
});