FingerEyes-Xr for HTML5와 GeoService-Xr를 활용한 설비 공간정보시스템

특화된 GIS 시스템 개발을 견고하고 빠르게 개발할 수 있는 GIS 엔진으로써, FingerEyes-Xr과 GeoService-Xr을 활용해 설비를 관리하는 GIS 시스템을 개발하고 있습니다.

다양한 기능 중 웹에서 공간 데이터를 SHP 파일로 바로 내보내기하여 저장할 수 있는 기능에 대해 소개합니다.

공간서버인 GeoService-Xr이 접근(Access)하는 공간 데이터가 저장된 DBMS로부터 SHP 파일을 다운로드할 수 있는 방법은 단지 URL의 호출만으로 이루어집니다. 즉, 공간 데이터에 대한 레이어의 고유 식별자가 ecl_alts_main이라고 하고, SHP 파일로 저장할 영역의 범위를 MBR로써, 각각 MinX, MinY, MaxX, Max라고 한다면 아래의 URL을 호출하면 SHP 파일을 압축 파일로 바로 다운로드 받을 수 있습니다.

http://localhost/Xr?gdownload|ecl_alts_main|MinX|MinY|MaxX|MaxY

아래의 화면은 SHP 파일을 저장하는 기능에 대한 실제 화면입니다. 레이어를 관리하는 UI에서 바로 원하는 레이어를 SHP 파일이나 KML로 저장할 수 있도록 하였습니다.

위의 UI 중 SHP 파일로 저장하기 원하는 레이어 명 옆의 SHP 버튼을 클릭하면 아래와 같이 웹브라우저에서 흔히 볼 수 있는 다운로드가 시작됩니다.

다운로드를 위한 URL 호출을 통해 클라이언트 측에 다운로드를 받기 위해 JavaScript 코드를 간단히 설명하겠습니다. 먼저 주요 줄기를 언급하면 iframe의 src 속성에 url을 지정하면 되는데요. 이를 위해서 해당 웹 페이지에 다음과 같이 숨겨진 iframe을 추가합니다.

그리고 SHP 파일을 저장하는 버튼에 대한 클릭 이벤트에 다음과 같은 코드가 필요합니다.

위의 코드 중 실제 의미 있는 부분은 5~8번 코드입니다.

이상으로 FingerEyes-Xr과 GeoService-Xr을 이용하여 GIS 시스템에서 공간 데이터를 바로 SHP 파일로 저장할 수 있는 기능과 JavaScript 코드에 대해 살펴 보았습니다.

[GIS] FingerEyes-Xr for HTML5 ㅡ Code로 GraphicLayer에 마커 추가하기

FingerEyes-Xr은 그래픽 레이어를 통해 지도 상의 원하는 위치에 다양한 그래픽 요소를 추가해 표현할 수 있는데요. 이와 관련된 API를 정리해 봅니다. 그래픽 요소를 추가하기 위해서 그래픽 레이어가 하나 필요합니다. 아래의 코드를 통해 그래픽 레이어를 추가합니다.

그래픽 레이어의 이름을 ‘g’로 하여 이 이름을 통해 그래픽 레이어 객체를 얻을 수 있습니다. 이 그래픽 레이어에 마커를 3개 추가할 것인데요. 아래의 코드처럼 마커를 추가하는 함수를 만들어 사용하겠습니다.

위의 addPoint 함수는 총 5개의 인자를 받습니다. 첫번째 gl은 그래픽 레이어 객체이고, id는 추가할 마커 그래픽 요소의 id값이며, x와 y는 마커가 위치할 좌표.. 끝으로 imgUrl은 마커를 지도 상에 표시할때 어떤 이미지로 표시할지에 대한 이미지 URL에 대한 문자열입니다. 이제 다음 코드처럼 3개의 마커 그래픽 요소를 추가할 수 있습니다. 아래의 코드는 버튼의 이벤트 함수 안이나.. DB 서버로부터 어떤 조회가 완료되었을 때 호출되는 함수에 위치하면 될 것입니다.

이제 실행하면 다음 화면처럼 이미지 마커가 3개 표시된 것을 볼 수 있습니다.

여기서 좀더 진행해.. 이제 위의 3개의 마커를 클릭했을 때 정보창을 표시하도록 하겠습니다. 지도의 클릭 이벤트를 아래처럼 등록하는데요. 지도에 대한 map 객체를 얻어 온 코드 다음에 아래의 코드가 있으면 됩니다.

이제 지도를 클릭할 때 onMapClick 함수가 호출되는데요. onMapClick 함수는 아래와 같습니다.

3번 코드에서 IdByMousePoint 함수의 3번째 인자는 클릭 지점에 여러개의 그래픽 요소를 발견했다고 해도, 단 하나만을 얻겠다는 의미입니다. 이제 실행하고 지도 상에 표시된 마커 그래픽을 클릭하면 다음과 같은 결과를 볼 수 있습니다.

사용자 삽입 이미지