글

작성일자

[GIS] FingerEyes-Xr, 선형에 대해 자동으로 회전하는 라벨링

핑거아이즈 최신 버전에서는 선형 레이어에 대한 라벨이 선의 기울기에 따라 회전하도록 개선되었습니다. 아래는 도로명 주소에 대한 라벨이 도로의 방향에 따라 회전하는 핑거아이즈 실행화면입니다.

사용자 삽입 이미지

라벨의 텍스트에 기본적으로 외곽선을 표시함으로써 다른 그래픽 요소와 분명히 구별되어 깔끔하게 표시가 되는 것을 볼 수 있습니다.

핑거아이즈에서 이러한 라벨의 회전을 위해서는 폰트를 내장(embed)해야 합니다. 이는 핑거아이즈의 기반 기술인 Flex SDK에서 텍스트를 회전하기 위해서는 폰트를 내장해야 하기 때문입니다.

사용할 폰트는 제가 요즘 그 매력에 푹 빠져 있는 네이버 나눔명조입니다. 보시는 것처럼 플래시빌더에서 assets 폴더에 해당 폰트를 Copy & Paste 합니다.

사용자 삽입 이미지

이처럼 내장한 폰트를 코드에서 사용하기 위해서는 타입화를 해야 하며 다음의 코드를 통해 가능합니다.

[Embed(source="assets/NANUMMYEONGJOEXTRABOLD.OTF", 
    fontFamily="NANUMMYEONGJO", 
    mimeType="application/x-font-opentype", 
    fontWeight="bold", 
    embedAsCFF="false")]
private var NANUMMYEONGJO:Class;

이제 마지막으로 다음 코드를 통해 핑거아이즈에서 기본적으로 사용할 폰트를 지정해 줌으로써 폴리라인에 대한 라벨을 회전할 수 있습니다.

XrMap.optionEmbedFontName = "NANUMMYEONGJO";

참~ 쉽습니다. ^^ 끝으로 핑거아이즈는 웹 기반의 GIS 엔진입니다. Flex 버전과 JavaScript 버전이 있습니다. Flex 버전은 빠른 퍼포먼스를 자랑하는 반면 JavaScript는 순수한 웹표준을 지원합니다. 그 활용 목적에 맞는 버전을 선택할 수 있는 유연함을 자랑합니다.

작성일자

[C#] 하위 폴더 내부의 파일 목록 얻는 함수

특정 폴더에 대해서 그 하위 폴더까지 확장자가 .shp 인 파일 목록을 얻어는 함수입니다. 확장자의 지정은 함수 내부에 마법의 상수값으로 박혀 있습니다.

private void GetShpFileNames(string folderName, ArrayList fileNamesList)
{
    System.IO.DirectoryInfo di = new System.IO.DirectoryInfo(folderName);
    foreach (System.IO.FileInfo f in di.GetFiles())
    {
        if (f.Extension.ToLower().CompareTo(".shp") == 0)
        {
            String strInFileName = di.FullName + "\\" + f.Name;
            fileNamesList.Add(strInFileName);
        }
    }

    foreach (System.IO.DirectoryInfo sd in di.GetDirectories())
    {
        GetShpFileNames(sd.FullName, fileNamesList);
    }
}

최근에 C# 5.0에 대한 책을 3일에 걸쳐 대충 설렁 설렁 봤더랬습니다. 비록 위의 코드는 C#의 고전 문법만 존재하지만.. 여하튼, 클라이언트 단의 개발 언어로써 C#은 정말 단연 최고가 아닌가 할 정도였습니다. 자바스크립트의 비슷한 개념도 가져오고, 특히나 클래스 타입 자체를 동적으로 생성하는 기능에서는 ‘미친거아냐?’라는 생각마저 들었습니다. 마치 프로그램이 프로그램을 만들 수 있다라는 개념도 가능하다는 것이죠. 이런 미친…. -_-;

작성일자

[FingerEyes-Xr] 멀티 정보창 표시 기능

Flex SDK 기반의 FingerEyes-Xr에서 멀티 정보창을 표시하는 API가 추가되었습니다. 참고로 FingerEyes-Xr은 오픈소스 GIS 엔진으로써 Flex SDK 버전과 HTML5 버전이 있습니다. 아울러 Flex SDK는 Adobe에서 Apache.org를 통해 오픈소스로 개발되고 있으며, PC(Windows, Linux, Mac), 웹, 모바일(Android, iOS)에서 실행되는 앱을 개발할 수 있는 매우 안정적이며 퍼포먼스가 매우 뛰어난 개발 환경입니다.

사실 오래전부터  지도 위에 피쳐(Feature)에 대한 속성 정보를 표시할때 정보창을 사용했습니다. 그러나 여러가지 이유로 이러한 정보창으로 하나가 아닌 여러개를 표시해 달라는 요구사항에 대해 검토만을 하다가 이제서야 해당 기능에 대한 API를 추가하였습니다. 아래의 화면은 멀티 정보창에 대한 실행 화면입니다.

사용자 삽입 이미지
멀티 정보창의 내용은 HTML 테그를 사용할 수 있어 다양한 폰트 스타일이나 이미지를 첨부할 수 있습니다. 또한 정보창의 배경색을 변경할 수 있음으로 속성값에 따라 알맞은 색상을 적용하여 표시할 수 있습니다. 관련 API는 간단합니다.

var html:String = " .... ";
var hotSpot:XrCoordinate = new XrCoordinate(event.mapX, event.mapY);
var id:String = "id:" + fid;
var backClr:uint = 0xfafafa;
						
map.infoWindows.addInfo(id, hotSpot, html, backClr);

1번 코드는 정보표시창에 나타낼 내용이며 HTML 구문입니다. 그리고 2번 코드는 표시창이 위치할 지도 좌표이고 3번은 표시창의 ID로 고유해야 하며 추후 이 ID 값을 통해 정보표시창을 참조할 수 있습니다. 4번 코드는 표시창의 배경색입니다. 끝으로 6번은 정보표시창을 생성하여 지도에 추가하는 코드입니다.

작성일자

기본에 충실하고자 하는 GIS 엔진

어제 대전의 모기관에서 GIS 솔루션 소개를 해달라는 요청을 받아 가서 소개를 해주었습니다. 최근 몇몇 업체에서 GIS 솔루션 문의를 해오고, 뭔가 차별화된 무엇이 없을까 고민하고.. 저희 제품이 오픈소스 제품군과 타업체의 제품과의 차이점이 무엇일까를 고민했더랬습니다. 아직 결론은 내리지 못했지만 일단 차별화 이전에 먼저 ‘기본’을 갖춰야 한다는 생각이 들었습니다. 제대로된 기본 바탕 위에 차별화된 무엇이 올라가야 제대로된 차별화가 아니겠느냐는 생각말입니다.

기반의 다른 말은 기본이라고 생각합니다. 이런 생각이 옳다고 한다면, 기반 기술이 뛰어 나다는 말은 기본에 충실하다는 말일 것 입니다. 기본 기술은 뛰어나거나 화려하지는 않은 것 같습니다. 그러나 정말 뛰어나다거나 화려함 속 깊숙이에는 충실한 기본 기술들이 모인 것입니다. 아직은 뛰어나다거나, 화려하지는 않지만 늘 기본에 충실한 기술을 갖추기 위해 노력하고 싶습니다.

좌표와 속성을 갖는 데이터를 통해 최대한 사용자가 쉽게 인지할 수 있도록 지도(Map)로 표현하는 작업을 합니다. 수년전이나 지금이나 크게 달라진 것은 없고, 단지 소소한 개선만이 있을 뿐이지만.. 그 소소함에 온통 많은 신경을 쏟아 부었다는 이유로.. 다른 누구보다도 이 작은 것을 이뤄 나가는 노력과 결실의 합에서 기쁨을 느낍니다. 이러한 노력과 작은 결실들이 모여 만들어진 시너지로 제대로된, 멋진 차별화된 솔루션으로 발전하기를 바랍니다.

작성일자

[JavaScript] UTF-8 코드값으로부터 String 구성하기

UTF-8은 ASCII 코드값은 1바이트로, 유럽권 문자는 2바이트로, 아시아권 문자는 3바이트로 구성함으로써 전세계 모든 언어를 처리할 수 있는 유니코드 중 하나입니다. 저는 기존에 편의상 EUC-KR을 사용했으나 이제부터는 UTF-8을 먼저 고려하고 사용해야한다고 생각하게 되었습니다.

아래의 코드는 DataView 객체에 저장된 UTF-8 코드값으로부터 String으로 구성하는 코드입니다. 변환 속도를 위해 다소 코드가 난해 합니다. 제가 개발한 서버에서 문자열 데이터를 UTF8로 인코딩된 바이너리 데이터로 웹브러우저로 보내게 되는데 이때 사용한 코드입니다.

function getStringUTF8(dataview, offset, length) {
    var s = '';

    for (var i = 0, c; i < length;) {
        c = dataview.getUint8(offset + i++);
        s += String.fromCharCode(
            c > 0xdf && c < 0xf0 && i < length - 1
            ? (c & 0xf) << 12 | (dataview.getUint8(offset + i++) & 0x3f) << 6 
            | dataview.getUint8(offset + i++) & 0x3f
            : c > 0x7f && i < length
            ? (c & 0x1f) << 6 | dataview.getUint8(offset + i++) & 0x3f
            : c
        );
    }
    
    return s;
}

짧은 코드이지만 몇일 동안 고민하고 고민하던 차에 만난... 저에게는 매우 의미있고 값진 코드입니다. ^^;