FingerEyes-Xr에서 JSTS를 사용한 쓰는 코드 정리

FingerEyes-Xr은 JS 기반의 맵엔진이고 JSTS는 JS 기반의 지오메트리 연산 라이브러리입니다. 웹브라우저에서 공간 데이터에 대한 처리를 수행하는 경우에 JSTS를 사용하면 매우 좋은데요. 오래전부터 1.9버전을 사용하고 있었는데 오늘 보니 JSTS가 2.9.3 버전까지 올라왔군요. JSTS에 대한 코드만을 뽑아 정리하기가 버겨워…. 대충 언급하여 정리해 봅니다. 아래 코드의 목적은 중첩되는 공간 데이터에 대한 헥사곤 도형을 생성해 주는 것입니다. #run() { …

FingerEyes-Xr을 이용한 HeatMap 시각화

웹 GIS 엔진인 FingerEyes-Xr은 밀도도를 시각화하기 위한 방법 중의 하나인 HeatMap 기능을 제공합니다. 바로 Xr.layers.HeatMapLayer 클래스를 통해 수행이 가능합니다. HeatMap이 아닌 또 다른 밀도도에 대한 시각화 방법은 Xr.layers.GridLayer 클래스를 사용하는 것인데, Xr.layers.GridLayer는 셀 기반의 연산을 이용해 밀도도 분석을 수행합니다. 좀더 정밀한 밀도도 분석은 Xr.layers.GridLayer이 Xr.layers.HeatMapLayer보다 우수하지만 연산 시간은 Xr.layers.HeatMapLayer가 훨씬 빨라 실시간으로 밀도도를 시각화할 수 …

FingerEyes-Xr의 편집 이벤트

FingerEyes-Xr의 공간 데이터 편집시 발생하는 이벤트는 1개입니다. Xr.Events.EditingCompleted로 사용자가 선택한 도형을 편집한 뒤에 발생하는 이벤트입니다. 등록은 다음과 같습니다. map.addEventListener(Xr.Events.EditingCompleted, onMapEditingCompleted); 그리고 이벤트에 대한 콜백 함수인 onMapEditingCompleted 함수는 아래와 같이 작성할 수 있습니다. function onMapEditingCompleted (e) { let map = e.map; let type = e.editCommandType; let rowId = e.rowId; if(type === Xr.edit.AddPartCommand.TYPE) { // 여러 개의 …

웹 GIS 엔진, FingerEyes-Xr에서 CAD 도면 시각화

지리정보 분야에서 CAD 파일은 수치지도의 구축 및 공유을 위한 목적으로 현재까지도 활발하게 사용되고 있습니다. 흔히 많이 사용되는 SHP 파일보다 더욱 다양한 공간 정보를 ‘지도’라는 개념으로 제공하는데요. 이러한 지도로써의 정보를 그대로 사용자에게 제공할 수 있도록 FingerEyes-Xr을 이용하여 CAD 지도를 웹에서 바로 보여줄 수 있습니다. 이러한 FingerEyes-Xr에서 제공하는 CAD 도면 시각화 기능의 장점은 다음과 같습니다. 사용자는 위의 …

FingerEyes-Xr에서 SHP 파일 자원을 외부 URL로 접근해 사용하기

예를 들어, http://www.gisdeveloper.co.kr:8080/SHP/seoul.zip와 같은 URL 경로로 접근할 수 있는 SHP 파일 자원을 웹 지도 컴포넌트인 FingerEyes-Xr에서 어떻게 가져와 지도를 구성하는 레이어로 사용하기 위한 코드를 정리합니다. zip 파일에는 반드시 .shp, .dbf, .shx 파일이 있어야 합니다. let map = … let layerName = “레이어의 고유한 이름”; let URL = “http://www.gisdeveloper.co.kr:8080/SHP/seoul.zip”; let layer = new Xr.layers.SHPFileLayer(layerName, URL); layer.EPSG(map.EPSG()); …

FingerEyes-Xr에서 속성값으로 도형 심벌 및 라벨문자열 설정하기

여러 개의 속성값으로 라벨 문자열을 조립하여 실제 표시되는 라벨을 결정하는 코드의 예입니다. CustomLabelFormatter = Xr.Class({ name: “CustomLabelFormatter”, extend: Xr.label.ProgrammableLabelFormatter, requires: [Xr.label.ILabelFormatter], construct: function (layer) { this.superclass(layer); this._MGN_CD = -1; this._MGN_DT = -1; this._codeValues = { ‘C01’: ‘시설A’, ‘C02’: ‘시설B’, ‘P01’: ‘시설C’, ‘P03’: ‘시설D’, ‘R03’: ‘시설E’, ‘T01’: ‘시설F’ }; }, methods: { value: function (shapeRow, fieldSet, …

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)” } ] 위의 …

웹 GIS 클라이언트 엔진, FingerEyes-Xr

FingerEyes-Xr은 웹에서 지도를 표시하고, 표시된 지도와 연관된 기능을 제공할 수 있는 맵 컴포넌트입니다. GitHub에 소스가 공개되어 있으며, 다양한 GIS 시스템 개발을 위한 핵심 맵 컴포넌트로 활용되었고 웹 GIS 솔루션, NexGen에서도 지도 표출 및 다양한 지도 관련 기능을 위한 컴포넌트입니다. FingerEyes-Xr은 완전한 웹 표준 기술만을 사용하였고, 모든 웹브라우저에서 구현된 표준 기술만을 사용하여 IE, Chrome, Safari, Firefox …

FingerEyes-Xr에서 카카오맵 표시

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

FingerEyes-Xr의 GraphicLayer에 대한 최상위 지정(Top Most)

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

GeoService-Xr과 FingerEyes-Xr을 이용한 대용량 파일 업로드 및 다운로드 서비스

사용자의 요구사항을 충분히 반영할 수 있는 GIS 시스템을 개발할 때, 대용량 데이터를 서버 측에 업로드해야 할때가 있습니다. 예를 들어, 최신 지적도를 서버측에 올려 최신 지적도 서비스를 업데이트하거나, 사용자가 보유한 빅데이터를 CSV나 Excel 형태로 서버에 올려 서버측에서 분석을 한 뒤에 그 결과를 공간상에 시각화하는 등이 있는데요. 이러한 대용량 파일을 업로드할 수 있는 기능을 웹에서 쉽게 적용할 …

FingerEyes-Xr에서 GraphicLayer의 Row 순회 및 MBR 얻기

GraphicLayer의 구성요소들을 순회하는 방법은 for 문을 통해 쉽게 해결할 수 있습니다. 즉, 아래의 예와 같습니다. var targetGl = map.layers(“sketch_grp”); for (var id in targetRows) { var row = targetRows[id]; … } 그래픽 레이어를 구성하는 그래픽 요소를 순회하면서 해당 그래픽 요소의 MBR을 얻어야 하는 경우가 많이 생깁니다. 위의 코드에서 row 변수의 MBR 함수를 통해 쉽게 MBR을 …

FingerEyes-Xr의 Hotspot 기능

지도 상에 특정한 지점을 시각적으로 두드러지게 표현하고 싶을 경우 FignerEyes-Xr에서는 Hotspot 기능을 활용할 수 있습니다. 아래는 이러한 Hotspot 기능을 활용하여 원하는 위치를 강조하는 기능에 대한 동영상입니다. 코드는 아래와 같이 간단합니다. var pt = new Xr.PointD(102033, 231233); var hotSpot = new Xr.ui.HotSpotControl(id, map, pt); map.userControls().add(hotSpot); 위의 코드에 덧붙여 만약 사용자가 hotSpot을 클릭하면 지도에서 사라지도록 하는 추가 …

FingerEyes-Xr에서 회전 Label에 대한 반복 표현

선형(Polyline)에 대한 라벨을 표시할 때, 선형의 방향에 따라 회전이 되도록 표시되는데.. 이때 선형이 긴 경우 라벨을 하나만 표시하게 되면 시인성이 떨어지는 경우가 있습니다. 예를 들어 도로명의 표현이 그러한데요. 아래의 화면이 그 예입니다. 선형이 짧은 관망(Network)과 같은 경우에 선형의 중심에 하나의 라벨을 표현해 주는 것이 적합한 반면, 위의 경우처럼 선형이 긴 경우에는 라벨을 일정한 기준에 따라 …

GeoService-Xr과 FingerEyes-Xr의 On-The-Fly-Projection 적용하기

다양한 좌표계가 존재하므로, 사용자마다 자신이 가지고 있는 공간 데이터마다 서로 다른 좌표계를 적용하고 있습니다. 이러한 서로 다른 좌표계의 공간 데이터를 DBMS에 Import할때, 좌표계를 명시해 주고, 이를 사용하는 클라이언트 단에서는 서로 다른 좌표계를 하나의 기준 좌표계로 변환하여 사용하게 됩니다. 그래야 레이어로써의 여러개의 지도가 하나의 지도로 중첩됩니다. GeoService-Xr과 FingerEyes-Xr에서도 서로 다른 좌표계에 대해 동적으로 좌표계를 변환해 단일 …

FingerEyes-Xr에서 WKT 문자열로부터 GraphicRow 생성하기

서버 측으로부터 뭔가를 요청해서 얻은 결과가 Geometry 일때, 그 Geometry의 형식은 WKT가 가장 일반적입니다. WKT는 Well-Known Text의 약자입니다. 예를 들어, 두 개의 좌표 사이의 최단경로에 대한 결과로써, Polyline 형태로 경로에 대한 연속된 좌표 리스트값을 WKT로 요청하는 서비스 호출이 아래와 같다고 합시다. var url = “http://localhost/Gp?command=wlkroute;start=(132648 283024);end=(155054 243212);db=gdb”; 위의 요청에 대한 결과는 두 지점간의 최단경로에 대한 …

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

공간 데이터는 위치 데이터와 속성 데이터의 조합입니다. 단순히 공간 데이터를 일괄적으로 원하는 색상이나, 아이콘 등으로 표현할 수 있지만 각각의 공간 데이터에 대한 속성 데이터를 활용하여 다양한 형태로 그리고자 할 때가 있습니다. 예를 들어 아래와 같은 공간 데이터 테이블이 있다고 합시다. 위의 테이블에서 images는 서버 측에 저장된 이미지 파일명에 대한 리스트이고, tags는 이미지에 대한 해시태그 성격의 …

FingerEyes-Xr의 그래픽 요소에 타이틀(텍스트) 달기

FingerEyes-Xr은 사용자가 마우스를 이용해 자유롭게 다양한 그래픽 요소를 지도에 스케치할 수 있습니다. 사용자가 스케치한 그래픽 요소에 원하는 텍스트 추가로 붙여주는 코드에 대해 정리합니다. 먼저 아래는 사용자가 마우스로 그린 그래픽 요소에 대해 특정 텍스트를 추가한 화면입니다. 코드 예시는 아래와 같습니다. var gl = /* 그래픽 레이어 */ var id = /* 그래픽 요소의 ID */ var …

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

지도 상에 통계 데이터를 차트를 통해 표현하는 코드를 정리해 봅니다. 차트의 종류는 많지만 이중 지도와 가장 잘맞는 차트는 파이 차트인데요. 이 파이 차트를 표시해 보도록 하겠습니다. 먼저 차트를 표시할 수치지도 레이어를 추가합니다. 차트 표시를 위해 반드시 수치지도가 필요한 것은 아니지만.. 수치지도는 차트를 표시할 위치와 통계 데이터를 속성 값으로 가질 수 있으므로 차트에 대한 예제로 사용하기에 …

FingerEyes-Xr에서 폰트(Font)를 이용한 마커 심벌(Marker Symbol) 지정하기

FingerEyes-Xr에서 포인트 타입의 수치지도는 다양한 형태로 표현될 수 있습니다. 원이나 사각형과 같은 단순 도형에서 이미지나 폰트를 통한 텍스트 표현까지 가능합니다. 특히 이미지는 애니메이션 GIF인 경우 애니메이션 효과도 그대로 표현됩니다. 이 글은 포인트 타입의 수치지도를 폰트를 통한 텍스트 표현을 위한 API에 대한 내용을 정리한 글입니다. 포인트를 폰트를 통한 텍스트로 표현하는 이유 중에 하나는 웹에서 딩벳(Dingbat) 폰트에서 …