[카테고리:] FingerEyes-Xr

로컬 파일이나 URL Request를 통해, 또는 문자열 그대로.. 여튼, 아래와 같이 문자열로 구성된 데이터가 있다고 하자.

[
	{
		"주소":"전라남도 무안군 무안읍 면성1길 78",
		"인구":"100",
		"_상태":"OK",
		"WKT": "POINT(151985.4391669556 266232.22030393773)"
	},
	{
		"주소":"전라남도 무안군 무안읍 성남리 779-2",
		"인구":"50",
		"_상태":"OK",
		"WKT": "POINT(152027.07037272514 265628.6982788675)"
	},
	{
		"주소":"전라남도 무안군 무안읍 무안로 513-8",
		"인구":"77",
		"_상태":"OK",
		"WKT": "POINT(152432.06457469938 266037.0198316685)"
	}
]

위의 문자열에서 고려해야할 유일한 규칙은 좌표 데이터를 구성하기 위해서 WKT 필드가 활용(대소문자 구분)된다는 점이다. 그외의 필드는 모두 속성 필드로 해석된다. 이 JSON 문자열을 지도의 구성 단위인 레이어로 추가하기 위한 코드는 다음과 같다.

var json = 
    '[ \
        { \
            "주소": "전라남도 무안군 무안읍 면성1길 78", \
            "인구": "100", \
            "_상태": "OK", \
            "WKT": "POINT(151985.4391669556 266232.22030393773)" \
        }, \
        { \
            "주소": "전라남도 무안군 무안읍 성남리 779-2", \
            "인구": "50", \
            "_상태": "OK", \
            "WKT": "POINT(152027.07037272514 265628.6982788675)" \
        }, \
        { \
            "주소": "전라남도 무안군 무안읍 무안로 513-8", \
            "인구": "77", \
            "_상태": "OK", \
            "WKT": "POINT(152432.06457469938 266037.0198316685)" \
        } \
    ]';

var lyr = new Xr.layers.FeatureJSONLayer("레이어 이름", { EPSG: 4326, dataset: json });
map.layers().add(lyr);
map.update();

FingerEyes-Xr은 웹에서 지도를 표시하고, 표시된 지도와 연관된 기능을 제공할 수 있는 맵 컴포넌트입니다. GitHub에 소스가 공개되어 있으며, 다양한 GIS 시스템 개발을 위한 핵심 맵 컴포넌트로 활용되었고 웹 GIS 솔루션, NexGen에서도 지도 표출 및 다양한 지도 관련 기능을 위한 컴포넌트입니다.

FingerEyes-Xr은 완전한 웹 표준 기술만을 사용하였고, 모든 웹브라우저에서 구현된 표준 기술만을 사용하여 IE, Chrome, Safari, Firefox 등 거의 대부분의 브라우저에서 실행될 수 있습니다. FingerEyes-Xr은 이미 정해진, 구체적인 기능 개발을 지원하는 기반 컴포넌트인데, FingerEyes-Xr에서 지원하는 기능과 이 컴포넌트를 사용해 개발이 가능한 주요 기능은 다음과 같습니다.

먼저 핑거아이즈엑스알(FingerEyes-Xr)은 OGC 표준인 WFS, WMS 방식의 지도를 표시하여 활용할 수 있고, 항공영상을 TMS 방식 등을 통해 배경지도로 활용할 수 있습니다. 그리고 지도 위에 다양한 그래픽 요소를 매쉬업할 수 있는데, 표현할 수 있는 그래픽 요소에는 Marker, Polyline, Polygon, Box, Circle, Ellipse, Text, Image가 있고, 속성 데이터에 기반하여 복합적인 그래픽 요소를 공간 데이터의 차원으로 자유롭게 구성할 수 있는데, 이에 대한 자세한 내용은 아래 글을 참조하시기 바랍니다.

FingerEyes-Xr, 공간 데이터에 대한 Custom Draw (사용자 정의 그리기)

FingerEyes-Xr은 그래픽 요소와 공간 데이터를 웹에서도 자유롭게 편집할 수 있습니다. 이에 대한 구체적인 내용은 FingerEyes-Xr을 이용해 개발된 NexGen의 편집 기능을 통해 확인이 가능하며, 이와 관련된 글은 아래와 같습니다.

넥스젠(NexGen)의 공간 데이터 편집 기능

FingerEyes-Xr은 수치지도와 항공영상과 같은 이미지 지도 뿐만 아니라 라스터(Raster) 기반의 셀 데이터에 대한 연산이 가능하고 그 결과 지도 상에 표현할 수 있습니다. 관련된 내용은 아래와 같습니다.

[GIS] FingerEyes-Xr, 핑거아이즈로 생성한 밀집도(밀도도)

또한 통계 데이터를 주제도와 파이차트 등으로 표현하여 통계지도를 생성할 수 있는데, 이에 대한 간단한 예시는 다음과 같습니다.

FingerEyes-Xr에서 주제도(Theme Map) 표현

FingerEyes-Xr에서 파이 차트(Pie Chart) 표현하기

또한 FingerEyes-Xr은 사용자가 보다 쉽게 지도 기반의 기능을 활용할 수 있도록 다양한 지도 관련 UI를 제공하여, 개발자가 쉽게 지도 기반 UI를 구성할 수 있도록 지원합니다. 그리고 GIS 미들웨어 서버인 GeoService-Xr과 연계하여 지오코딩 관련 기능을 제공하며, 관련 내용은 다음과 같습니다.

넥스젠(NexGen)의 스타쿼리(* Query) 기능

그리고 표고값을 이용하여 표고측정, 지형의 표고값을 활용한 지형단면도, 지형 평균경사도, 지형 3차원 가시화 가능을 제공합니다. 이에 대한 내용으로 FingerEyes-Xr을 이용해 개발된 NexGen의 지형 관련 기능은 아래 글과 같습니다.

넥스젠(NexGen)의 DEM 데이터를 활용한 측정 기능

이외에도 FingerEyes-Xr를 이용하여 지도와 관련된 더 많은 기능을 지원하고 있고, 새로운 기능들이 추가되고 있습니다. FingerEyes-Xr을 통해 지도와 관련된 그 어떠한 기능이라도 기술의 제약 없이 개발할 수 있습니다.

구글이나, 네이버 및 카카오맵 등의 저작권을 가지고 있는 회사에서 제공하는 지도 API가 아닌 URL로 직접 가져와 활용하는 것은 저작권에 위배되는 일이긴 하지만, 몇몇 기관에서는 지도 회사와 계약을 맺어 URL을 통해 지도를 가져와 활용할 수 있는 경우가 있다. 이에 대한 요구 사항으로 웹 GIS 엔진인 FignerEyes-Xr에서 카카오맵의 지도를 URL로 가져와 표시하는 예제를 정리한다.

먼저 필요한 DOM 요소를 다음과 같이 정의한다.

#mapDiv가 지도가 표시되는 DOM 요소이고, 이 DOM의 스타일은 다음과 같다.

그리고 스크립트는 다음과 같다.

실행해보면 다음과 같이 지도가 표시된다.

로드맵도 연계를 해줘야 하는데.. 이처럼 잘만들어진 지도를 가져다 붙여 사용자가 원하는 기능을 빠르게 제공하는 것도 참 좋은 것 같다.

그래픽 레이어는 DBMS에 공간 데이터 저장을 위한 별도의 테이블을 준비하지 않아도, 자유로운 방식으로 지도 상에 원하는 위치 기반 데이터를 표시하고 이용할 수 있는 편의성과 유연성을 제공합니다. 그러다보니, 그래픽 레이어는 지도 상에 어떠한 요소보다 최상단에 표출되어 사용자에게 그 시인성을 확실하게 확인할 수 있는 것이 좋습니다. 아래의 화면은 CCTV를 지도 상에 표시하고 있는데, CCTV가 최상단에 노출되지 않음으로써 이러한 시인성 확보가 마련되지 않은 경우입니다.

FingerEyes-Xr에서 그래픽 레이어는 GraphicLayer라는 클래스를 통해 생성되는데, 아래처럼 간단히 topMost 매서드를 통해 최상단으로 지정될 수 있습니다.

var gl = new Xr.layers.GraphicLayer("cctv");

gl.topMost(true);
map.layers().add(gl);

결과적으로 아래처럼 해당 그래픽 레이어는 항상 최상단으로 표출됨으로써 그 시인성이 확보됩니다.

사용자를 위한 시인성 확보를 위한 방안으로 위처럼 기능으로써 개선될 수 있고, 디자인적으로는 그래픽 레이어에 표시되는 항목의 아이콘에 외곽선(Stroke)을 장식하여 훨씬 더 세련되고 강력하게 시인성을 확보할 수도 있습니다.