[GIS] FingerEyes, 타일맵 레이어 추가

타일맵 레이어는 수치지도나 항공영상을 이용해 만들어진 지도를 일정한 크기(격자)의 잘라 미리 만들어 놓은 그림으로 구성됩니다. 수치지도나 항공영상을 굳이 타일 이미지로 미리 가공해 사용하는 이유는 다음과 같습니다.

미리 만들어진 지도이므로 네트워크 상에서 빠르게 서비스 할 수 있음
단순한 이미지 파일이므로 쉽고 빠르게 화면상에 표시할 수 있음
단순한 이미지 파일이므로 서버와 클라이언트 단에 부하가 매우 적음
한번 만들어지면 변경할 수 없다는 문제가 있음

이러한 이유들로 타일맵은 대부분 배경 지도로 사용됩니다. 예를 들어 타일맵으로 배경도를 구성하고 이 위에 주제도나 시설물들을 올려 놓고 서비스를 제공하게 됩니다. 이 글은 바로 핑거아이즈에서 타일맵을 구성하는 API에 대해서 설명드리고자 합니다.

사용자 삽입 이미지
먼저 Package Explorer에 나타난 폴더 중 src 폴더 에서 오른쪽 버튼을 눌러 나타난 팝업 메뉴 중 MXML Application을 선택해 MXML 어플리케이션을 하나 추가합니다. 아래 처럼 Name을 원하는 이름으로 주면 되는데 편의상 아래처럼 지정한 후 Finish 버튼을 눌러 추가합니다.

사용자 삽입 이미지

새롭게 추가된 Application의 소스 코드에서 핑거아이즈의 맵 컴포넌트를 추가하기 위해 네임스페이스를 지정합니다. 아래 코드에서 5번째 코드가 해당 코드입니다. 그 외 나머지 코드는 모두 원래 있던 코드입니다. (참고로 이 글은 핑거아이즈의 동적 라이브러리(.swc) 파일을 참조 하고 있다는 가정 하에 설명됩니다. 참조 하는 방법은 핑거아이즈 사용 준비하기를 참조 하시기 바랍니다)

이제 핑거아이즈에서 제공하는 맵 컴포넌트를 어플리케이션에 추가하기 위해 바로 위에 다음과 같은 코드를 추가합니다.

...

위의 코드에서 5번째 코드가 해당 코드로써 맵 컴포넌트의 크기를 어플리케이션에 꽉 채우도록 width와 height를 모두 100%로 지정했으며 위치를 좌상단 가장 코너쪽에 위치하도록 x와 y를 0으로 지정했습니다. 그리고 이 맵 컴포넌트를 다른 코드에서 map이라는 이름으로 쉽게 참조할 수 있도록 id를 map으로 주었습니다.

이제 타일맵 레이어를 추가하는 코드를 작성해 보도록 하겠습니다. 레이어를 추가하는 코드는 어플리케이션이 초기화되는 시점에서 이루어 지는것이 가장 합당하므로 어플리케이션의 초기화 이벤트를 추가합니다. 초기화 이벤트 코드를 모두 포함해 지금까지 진행된 모든 코드를 나타내면 아래와 같습니다.

추가된 초기화 코드는 7번 코드와 9~18번 코드입니다. 이제 초기화 코드인 onInit 매서드에 타일맵을 추가하는 코드를 작성하면 됩니다. 타일맵을 추가하는 코드 전체를 나타내면 다음과 같습니다.

import mx.events.FlexEvent;
import geoservice.view.layers.XrTileMapLayer;
import geoservice.base.XrCoordinate;
   
protected function onInit(event:FlexEvent):void
{
    var lyr:XrTileMapLayer = new XrTileMapLayer("basemap", 
        "http://www.geoservice.co.kr/seoul");
    map.layers.addLayer(lyr);
    
    map.viewControls.scaleLevels = [120000, 60000, 25000, 15000, 7000, 2500, 1200];
    map.moveMap(new XrCoordinate(958581, 1945902));
    map.viewControls.scaleLevel = 5; 
}

새롭게 추가된 코드를 자세히 설명드리면….. 타일맵 레이어에 해당하는 클래스의 이름은 XrTileMapLayer로써 7번 코드에서 타일맵 레이어를 생성하고 있습니다. XrTileMapLayer 생성자는 두개의 인자를 가지며 첫번째 인자는 레이어의 이름이고 두번째 인자는 타일맵을 서비스하는 서버의 url입니다. 이 글을 위해 간단히 서울시에 대한 타일맵을 테스트 형식으로 서비스 하는 것을 이용했습니다. 그리고 이렇게 만들어진 레이어를 9번 코드를 통해 추가합니다. 그리고 11번 코드는 서비스되는 타일맵을 구성하고 있는 축척값에 대한 분모수입니다. 총 7단계의 축척 레벨로 서비스 되고 있다는 것을 알 수 있습니다. 12번 코드는 가장 처음 사용자에게 보여질 지도의 위치이며 13번 코드는 가장 처음 사용자에게 보여질 축척 레벨입니다. 축척 레벨은 0부터 시작합니다. 즉 위의 코드의 경우 5이므로 1:2500 축척 단계의 지도를 보여주게 됩니다.

이제 실행(F11)해 보면 다음 그림처럼 지도가 표시되고.. 마우스 왼쪽 버튼과 휠을 통해 지도 이동 및 확대/축소가 가능합니다.

실행 결과 및 소스코드 보기

실제 코드는 매우 간단한데 설명을 가능한 자세히 한다고 해서 그런지 복잡한듯합니다.

답글 남기기 응답 취소