[GIS] 오픈소스, 자바스크립트 좌표계 변환 라이브러리, proj4js

C언어 기반의 좌표계 변환을 자바스크립트(Javascript) 언어로 그대로 포팅한 proj4js에 대한 사용에 있어 간단한 예를 통해 정리해 보려고 합니다. 아직 다양한 좌표계 간의 상호 변환에 적용해 보지는 않았으나 OpenLayers와 같은 오픈소스에서 사용하는 좌표계 변환 API이므로 이미 검증은 되었다고 판단할 수 있습니다.

먼저 proj4js는 http://trac.osgeo.org/proj4js/ 에서 다운로드 받을 수 있고.. 저는 여기서 WGS84 경위도를 Bessel 타원체 경위도로 변환하는 것과.. WGS84 타원체 경위도를 카텍(Katec) TM 직각 좌표계로 변환하는 것에 대한 2가지 예를 정리해 봅니다. 먼저 WGS84 경위도를 Bessel 경위도로 변환하는 코드입니다.




코드를 설명하면.. 1번 코드는 proj4s 라이브러리를 사용할 수 있도록 가져오는 것입니다. 그리고 4번 코드는 proj4js를 사용함에 있어서 오류가 있다면 오류에 대한 메세지를 표시합니다. 여기서는 alert 함수를 사용하여 메세지 창으로 표시하도록 하였습니다. 그리고 5번과 6번이 proj4의 좌표를 정의하는 문자열입니다. 그리고 9번과 10번은 변환을 위한 Proj 객체를 생성합니다. 12번 코드는 변환할 좌표입니다.

13번이 실제로 좌표계를 변환하는 transfrom 함수입니다. 이 함수의 첫번째 인자는 원본 좌표계이고 두번째는 변환되어질 좌표계입니다. 세번째는 변환할 좌표인데.. 변환이 성공하면 다시 이 인자에 결과가 저장됩니다. 주의할 점은 서로 다른 타원체 간의 변환이므로 5번과 같이 towgs84 파라메터를 반드시 지정해야 합니다. 또한 동일한 타원체 간의 변환에서는 towgs84를 지정해서는 않됩니다. 여기서는 3개의 파라메터를 사용하였으나 보다 정확한 변환을 위해 다른 파라메터를 사용하셔도 됩니다. 다음으로 WGS84 경위도를 카텍으로 변환하는 코드입니다.




중요한 부분은 6번에서 카텍에 대한 좌표계 정보에 대한 문자열 값입니다. 또한 towgs84 값을 반드시 지정하였는데.. 이유는 서로 다른 타원체 간의 변환이기 때문입니다. 즉, WGS84 타원체에서 카텍이 사용하는 타원체인 Bessel의 변환이기 때문입니다. 만약 서로 동일한 타원체 간의 변환이라면 towgs84 파라메터를 지정해서는 않됩니다.

(주)지오서비스에서 론니플래닛(Lonely planet) KOREA 버전에 지도엔진 제공

작년에 세계적인 여행가이드 모바일 앱인 론니플래닛에 사용되는 지도 엔진 개발을 의뢰 받아 개발을 진행 했었습니다. 지도 데이터는 오픈스트리트맵(OpenStreet Map)을 사용하기로 하였고 이 지도를 표시하고 론니플래닛에 사용할 맵뷰(지도 엔진) 형태로 제공해 달라는 요청이였습니다. 참으로 힘들게 작업했던 기억이 납니다만…. 저희 (주)지오서비스에서 개발하여 제공한 맵엔진이 적용되어 실제로 구글의 앱장터인 Play 스토어에 등록되어 출시가 되었습니다.

실제로 출시된 버전들중 제가 가장 좋아하는 ‘파리’에 대한 앱의 화면을 몇가지 올려봅니다. 이 앱에서 지도 기능에 대한 화면은 아래와 같습니다.

지도와 정보를 함께 제공하고 있는 화면인데요.. 지도 부분에 대한 내용만을 표시하고 있는 화면은 아래와 같습니다.

개발을 의뢰한 업체는 이미 오픈소스를 검토한 상태였고.. 지도 표출 속도 등의 문제와 라이선스로 인해 오픈소스를 사용하지 않기로 결정하였던 터였습니다. 하지만 지도 데이터는 오픈된 오픈스트리트 맵을 사용하였습니다. 오픈스트리트맵은 공간 데이터를 SHP 형태로 제공하고 있습니다. 이를 받아 지도를 원하는 스타일로 디자인하고 가공하여 타일맵으로 만들어 활용을 하였습니다.

[GIS] DuraMap-Xr, 타일맵 레이어

듀라맵은 3.8 버전부터 타일맵 형태의 배경지도를 인터넷을 통해 받아 사용자에게 제공할 수 있습니다. 아래는 듀라맵을 이용해 타일맵 레이어를 추가하여 실행한 화면입니다.

사용자 삽입 이미지
위 화면에 대한 예를 통해 듀라맵에서 타일맵 레이어를 추가하는 API를 살펴보도록 하겠습니다. 저는 여기서 VB를 이용하였습니다. 듀라맵은 COM 기반의 ActiveX 컴포넌트로 ActiveX 개발시 디버깅에 VB가 적합하여 사용하였습니다. 듀라맵은 C#과 델파이와 같은 COM을 지원하는 개발언어에서도 사용할 수 있습니다.

먼저 위의 화면에 보이는 것처럼 4개의 버튼과 듀라맵 컴포넌트를 화면상에 배치합니다. 4개의 버튼에 대한 Caption은 각각 Connect, Zoom In, Zoom Out, Pan Mode로 합니다. Connect 버튼은 인터넷을 통해 타일맵을 서비스 받을 수 있도록 연결하는 기능이며 Zoom In과 Zoom Out은 각각 지도 확대 레벨을 변경하여 지도를 확대하고 축소하는 기능입니다. 끝으로 Pan Mode는 지도를 마우스를 이용해 이동하는 기능입니다.

화면 UI 구성이 끝났으면 다음으로 코드를 작성합니다. 먼저 폼의 크기가 변경되면 듀라맵 컴포넌트의 크기도 폼의 크기에 맞춰 조절되도록 폼의 Resize 이벤트를 다음처럼 작성합니다.

Private Sub Form_Resize()
    Xr1.Height = Me.Height
    Xr1.Width = Me.Width
End Sub

다음으로 Connect 버튼의 Click 이벤트를 다음처럼 작성합니다.

Private Sub Command1_Click()
    Dim OK As Boolean
    OK = Xr1.Layers.AddTileMapLayer("basemap", 
        "XrTileMap://geoservice.co.kr/tilemap")
    If OK Then
        Xr1.WaitForAllConnections
        Xr1.ZoomFullExtent
        Xr1.MapScale = Scales(Current)
        Xr1.MouseMode = XrPanMode
    Else
        MsgBox "Error AddTileMapLayer"
    End If
End Sub

다음으로 Zoom In과 Zoom Out 버튼에 대한 Click 이벤트를 작성해야 하는데요. 그전에 다음과 같은 사용할 전역 변수를 선언해야 합니다.

Dim Scales(1 To 12) As Long
Dim Current As Integer

1번 코드는 타일맵의 12단계 축척을 저장할 배열이고 2번은 현재 화면상에 표시하고 있는 축척 단계를 저장하고 있는 변수입니다. 이 변수에 값을 초기화 하는 코드를 폼의 Load 이벤트에 아래와 같이 작성합니다.

Private Sub Form_Load()
    Scales(1) = 3000000
    Scales(2) = 1800000
    Scales(3) = 800000
    Scales(4) = 460000
    Scales(5) = 250000
    Scales(6) = 110000
    Scales(7) = 50000
    Scales(8) = 25000
    Scales(9) = 14000
    Scales(10) = 7500
    Scales(11) = 3500
    Scales(12) = 2000
    
    Current = 1
End Sub

이제 지도 확대와 축소를 위한 버튼의 기능을 작성합니다. 먼저 지도를 확대하는 Zoom In 버튼의 클릭 이벤트를 아래와 같이 작성합니다.

Private Sub Command2_Click()
    Current = Current + 1
    If Current > 12 Then Current = 12
    Xr1.MapScale = Scales(Current)
    Xr1.Update
End Sub

그리고 지도를 축소하는 Zoom Out 버튼의 클릭 이벤트를 아래와 같이 작성합니다.

Private Sub Command3_Click()
    Current = Current - 1
    If Current < 1 Then Current = 1
    Xr1.MapScale = Scales(Current)
    Xr1.Update
End Sub

마지막으로 지도를 마우스 드레깅을 통해 이동하는 Pan Mode 버튼의 클릭 이벤트를 아래와 같이 작성합니다.

Private Sub Command4_Click()
    Xr1.MouseMode = XrPanMode
End Sub

코드에 대한 설명은 거의 하지 않았으나 코드의 구성이 단순하고 명확하여 이해하기 어렵지 않을것으로 생각합니다.

HTML5/CSS3를 준수하는 크롬의 사용자

사용자 삽입 이미지

2012년 어느때부터를 시작으로 2013년 현재 크롬의 점유률이 IE를 앞질렀습니다. 위의 그래프는 gs.startcounter.com에서 가져온 통계자료입니다. 위의 그래프는 분석 대상 분위를 전세계로 했을때이구요. 그렇다면 한국을 대상으로만 한다면 어떨지 파악해 보니 아래와 같은 결과가 나왔습니다.
사용자 삽입 이미지
IE가 여전히 절대적으로 앞섭니다. 대상을 전세계로 했을때와 완전히 반대 상황인데요.. 언제가 될지 모르겠지만 조만간에 IE가 HTML5/CSS3를 완전하게 지원하게 될테고.. 아니면 한국에서도 전세계의 흐름처럼 크롬이 IE보다 더 많이 활용될 것으로 생각됩니다만.. 국내에서는 Windows의 사용자가 많고 기본 웹브라우져인 IE의 점유률이 높은거야 쉽게 쉽게 이해할 수 있겠는데.. 왜 세계적으로 봤을때는 크롬 사용자가 더 많을까 그 이유가 궁금해집니다.. Linux 계열의 사용자가 Windows 사용자만큼이나 많은가? 아니면 웹브라우져에 대해서 IE가 아닌 크롬을 설치하는 수고를 감내하고 사용하는가….. 참으로 그 이유가 궁금하네요..