사용자의 요구사항을 충분히 반영할 수 있는 GIS 시스템을 개발할 때, 대용량 데이터를 서버 측에 업로드해야 할때가 있습니다. 예를 들어, 최신 지적도를 서버측에 올려 최신 지적도 서비스를 업데이트하거나, 사용자가 보유한 빅데이터를 CSV나 Excel 형태로 서버에 올려 서버측에서 분석을 한 뒤에 그 결과를 공간상에 시각화하는 등이 있는데요. 이러한 대용량 파일을 업로드할 수 있는 기능을 웹에서 쉽게 적용할 수 있다면, 웹 환경에서 어떠한 제약없이 자연스럽게 기능을 개발하고 사용자에게 제공할 수 있습니다. 특히 네트워크 속도와 하드웨어로써의 서버의 발전으로 이러한 웹 기반의 환경은 모든 클라이언트 프로그램의 기반, 기본이 될 것입니다.
이러한 대용량 데이터를 서버에 업로드할 수 있는 기능을 GeoService-Xr과 FingerEyes-Xr을 이용해 쉽게 적용할 수 있는데요. 이러한 대용량 파일 업로드에 대한 API에 대한 정리가 이 글의 주제입니다. 대용량은 아니지만 이미지 파일을 서버측에 업로드 하는 것을 목표로 글을 정리합니다. 이미지가 대용량은 아니지만 이 글에서 설명하는 방법은 서버의 OS가 허락하는 파일 시스템의 최대 용량을 지원합니다.
먼저 아래의 JS 코드로 이미지를 업로드하기 위한 UI를 구성합니다.
위의 JS 코드는 아래와 결과 화면을 생성합니다.
위의 UI에 대한 기능은 아래와 같이 사용자의 3가지 행위를 지원합니다.
Select Image 버튼을 클릭해 사용자의 이미지 파일을 선택하면,
아래에 선택된 이미지가 표시됩니다.
그리고 Upload Image 버튼을 클릭하면 서버측에 이미지가 업로드된다.
위의 기능을 구현하기 위한 JS 코드는 아래가 전부입니다.
SelectImageFileUI.onclick = function () {
ImageFileUI.click();
};
ImageFileUI.onchange = function () {
if (ImageFileUI.files && ImageFileUI.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
ImageUI.setAttribute("src", e.target.result);
}
reader.readAsDataURL(ImageFileUI.files[0]);
}
};
UploadImageFileUI.onclick = function () {
var imageFile = ImageFileUI.files[0];
if (imageFile) {
var args = {
id: 0,
server: "http://localhost:7777",
imageFile: imageFile,
savedFileName: Date.now() + "." + imageFile.name.split('.').pop(),
uploadDir: "CCTV_IMAGES",
onCompleted: function (id) {
alert('completed');
},
onFailed: function (id) {
alert('failed');
},
onProgress: function(id, percent) {
//.
}
};
if (false == Xr.OperationHelper.uploadFile(args)) {
alert("인자가 옳바르지 않습니다.");
}
} else {
alert("업로드할 파일을 선택하세요.");
}
};
사용자의 3개의 행위에 대한 3개의 이벤트에 대한 코드로 구성되는데요. 먼저 Select Image 버튼을 클릭하면 실행되는 코든느 1-3번코드입니다. hidden으로 설정된 File Input 컨트를의 click 이벤트를 트리거(trigger, 개발자가 코드를 통해 이벤트를 발생해 주는 것)해주는게 전부입니다. 사용자가 이미지 파일을 선택하면 id가 ImageFileUI인 File Input 컨트롤에 onchange 이벤트가 발생하는데, 이 이벤트의 코드는 5-15번입니다. FileReader 객체를 이용해 파일의 내용을 읽고, 내용을 다 읽으면 10번 코드에서 이미지를 화면에 표시합니다. 그리고 Upload Image 버튼을 클릭하면 실행되는 코드는 17-47번입니다. 41번의 Xr.OperationHelper.uploadFile 함수 호출을 위한 인자(Argument)들을 준비하고 실행하고 있습니다. 이 uploadFile 함수를 호출하기 위해 전달되는 인자에는 업로드 Task에 대한 id, 서버의 주소(server), 사용자가 선택한 이미지 파일의 객체(imageFile), 서버측에 저장될 파일명(savedFileName), 파일이 저장될 서버측 디렉토리(uploadDir) 등 이고, 서버측에 업로드가 성공적으로 완료되면 호출되는 이벤트와 업로드가 실행하면 호출되는 이벤트인 onCompleted와 onFailed, 그리고 업로드 진행율에 대한 onProgress 콜백 함수이며, 이 이벤트는 필수가 아닌 옵션입니다.
덧붙여 GeoService-Xr은 서버 측에 파일을 올리기도 하는 기능 뿐만 아니라, 서버 측에서 파일을 내려 받기 위한 서비스도 제공 하는데요. 아래는 url 호출의 예는 서버측에 존재하는 2323123.pdf 파일을 myFile.pdf라는 파일로 다운로드 받습니다.
우리가 GIS를 활용해 무언가를 할 때 공간 데이터들 간의 좌표를 맞춰 레이어 단위로 중첩하여 하나의 지도를 구성한 뒤, 시각적 비교와 다양한 분석을 처리하게 됩니다. 이번에 경상북도 지역 중 내륙과 상당히 멀리 떨어져 있는 울릉도 지역에 대한 좌표계에 상당한 문제가 있다는 것을 파악했습니다. 독도는 더 심각!! -_-; 경상북도의 울릉도를 제외한 다른 지역은 그 좌표계가 매우 정확히 일치하는 것을 볼 때 울릉도 지역에 대한 좌표 불일치는 데이터 구축단계에서 원점 처리에 있어 상당한 문제가 있고, 근본적인 해결을 국가공간정보포털의 운영 주체인 정부 차원에서 조속히 해결해줘야 할 부분으로 생각합니다. 아래는 GRS80 UTM-K 좌표계로 변환하여 지적도와 행정경계를 중첩한 지도입니다.
앞서 언급하였듯이, 을릉도 이외의 다른 경상북도 지역은 GRS80 UTM-K 좌표계로 변환하여 중첩했을 경우 정확히 일치합니다. 제대로 구축된 데이터를 구할 수 있다면 좋았겠지만, 그럴 수 없는 상황에서 이처럼 구축 단계에서 근본적으로 잘못 되어진 공간 데이터의 좌표계를 일치시키는 방법으로 Georeferencing 기능을 활용하는 방법밖에 없었고, Georeferencing 기능을 수행할 수 있는 GDAL의 ogr2ogr.exe 콘솔 프로그램을 사용하고자 하였습니다. 그런데 이 프로그램은 콘솔인지라, 시각적으로 GCP를 잡을 수 없다는 문제가 있습니다. QGIS을 활용해 보려고 하였으나, 관련된 기능에 오류가 발생합니다. QGIS 역시 GDAL의 기능을 그대로 활용하면서 단지 시각적으로 GCP를 잡는 기능을 제공하는 것으로 예상됩니다. 여튼.. ogr2ogr을 통한 Georeferencing 기능을 위해 시각적으로 GCP를 효과적을 취득할 수 있는 툴을 별도로 개발하였고 아래의 화면과 같습니다.
위의 프로그램을 통해 19개의 GCP 좌표를 입력하여 Georeferencing 기능을 수행하여 얻은 결과는 아래와 같습니다.
그러나 이러한 수치지도에 대한 Georeferencing 방식을 활용하여 좌표계 일치하는 방법은 최선의 방법이 아닙니다. Georeferencing은 원래 목적은 항공영상과 같은 이미지를 수치지도에 맵핑시키기 위한 방법입니다. 결과적으로 수치지도를 또 다른 수치지도와 맵핑시키는 Georeferencing 방식은 그 결과면에서 정확도가 매우 떨어집니다. 근본적인 방법은 공간 데이터 구축을 처음부터 올바르게 해서 제공해야 한다는 것입니다. 조속히 관련 기관에서 해결해 주기를 바랄 뿐입니다.
아래의 이미지를 보면, Polyline 형태(GIS에서는 linestring이라는 용어를 사용함)의 레이어인 Link1가 있고, 빨간 포인트로 표시된 지점이 있다. 여기서.. Link1의 지오메트리 중 빨간 포인트에서 가장 가까운 녀석을 구하고, 이렇게 구한 녀석에 대해서 빨간 포인트와 가장 가까운 교차점을 구하고자 한다.
이러한 문제에 대해 해결할 수 있는 다양한 쿼리문 중 하나는 다음과 같다.
SELECT
fid,
st_astext(
st_closestpoint(
the_geom,
st_geomfromtext('POINT(149761 265625)')
)
),
st_distance(
st_closestpoint(
the_geom,
st_geomfromtext('POINT(149761 265625)')
),
st_geomfromtext('POINT(149761 265625)')
) as dist
FROM
network_link
ORDER BY
dist
LIMIT 1;
