공간정보시스템 / 3차원 시각화 / 딥러닝 기반 기술 연구소 @지오서비스(GEOSERVICE)
일반적으로는 하나의 레이어에 대해서 라벨에 대한 텍스트는 하나의 심벌로 통일해서 아래처럼 표시합니다. 위에 화면에 대한 소스 코드(코드A)는 아래와 같습니다. <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <style> body { margin: 0px; padding: 0px; } #map { top: 0px; left: 0px; position: absolute; width: 100%; height: 100%; border: none; outline: none; } </style> <script src=”../../scripts/fingereyes-xr/Xr.js”> <script> …
FingerEyes-Xr에서 수치지도에 대한 라벨을 표시할 때, 일반적으로 하나의 필드명을 지정해 지정된 필드값을 라벨로 표시합니다. 아래는 어떤 수치지도의 first_nv_n 필드를 라벨로 지정해 지도를 표시하는 코드(코드A)의 예입니다. <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <style> body { margin: 0px; padding: 0px; } #map { top: 0px; left: 0px; position: absolute; width: 100%; height: 100%; border: none; outline: …
FingerEyes-Xr for HTML5에서 수치지도 레이어를 속성값에 따라 표현 심벌을 변경하여 주제도를 표현하는 기능에 대한 예제 코드를 정리해 봅니다. 먼저 다음과 같은 수치지도 레이어가 있다고 하겠습니다. 위의 결과를 표출하는 코드(코드A)는 아래와 같습니다. <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <style> body { margin: 0px; padding: 0px; } #map { top: 0px; left: 0px; position: absolute; width: …
FingerEyes-Xr은 웹 기반에서 공간 데이터를 편집할 수 있도록 도형 데이터를 클라이언트에서 직접 렌더링하여 표시합니다. 즉 배경지도는 Image로 표시하고 그외 수치지도 레이어는 SVG와 같은 그래픽 요소로 표시됩니다. 이러한 구조로 인해 마우스 등을 통한 지도 이동 시에는 문제가 없으나, 코드를 통한 지도 이동시에 수치지도 레이어가 깜빡 거리는 현상이 발생할 수 있습니다. 그러나 움직이는 물체를 지도에서 추적하거나 GPS …
간단히 하나의 이미지를 지도를 구성하는 레이어로 추가하기 위한 코드에 대한 설명입니다. 예를 들어 아래처럼 TMS 등과 같은 방식으로 추가된 배경지도 위에 하나의 이미지를 중첩하고자 할때 사용할 수 있는 기능입니다. 코드의 예는 아래와 같습니다. url을 통해 중첩하고자 하는 이미지의 웹 url을 지정하고, 이미지에 대한 MBR을 minX, minY, maxX, maxY로 지정해 레이어를 생성해 추가해 주면 됩니다. var …
FingerEyes-Xr에서 레이어를 추가하기 위한 매서드는 LayerManager의 add 입니다. 이 add 매서드는 2개의 인자를 받는데요. 첫번째는 추가하고자 하는 Layer 객체이고 두번째는 선택 사항으로 추가하려는 레이어가 네트워크를 통해 성공적으로 연결되었을 때 호출할 callback 함수입니다. 이 callback 함수는 레이어 추가시 개별적으로 세밀한 흐름 제어를 위해 사용됩니다. 이와 관련한 예는 아래와 같습니다. var baseLyr = new Xr.layers.TileMapLayer(layerName, { url: …
FingerEyes-Xr에서 제공하는 DeferableLabelText 클래스는 이원화된 DBMS로부터 데이터와 공간 데이터를 연계해 라벨의 텍스트로 표현할 수 있는 기능을 제공합니다. 이 글은 DeferableLabelText 클래스의 활용예에 대해서 최대한 간략하게 정리한 글입니다. 먼저 DeferableLabelText를 상속받은 예는 아래와 같습니다. MyDeferableLabelText = Xr.Class({ name: “MyDeferableLabelText”, extend: Xr.theme.DeferableLabelText, construct: function () { this.superclass(); }, methods: { /* void */ requestLabelText: function (fid) { …
더 보기 “FingerEyes-Xr for HTML5의 DeferableLabelText 추상 클래스 사용하기”
FingerEyes-Xr for HTML5는 DeferableShapeDrawTheme 추상 클래스를 제공합니다. Deferable은 “미룰 수 있는”이라는 의미인데요. 수치지도 레이어를 그리기 위한 심벌의 지정을 미룬다는 의미입니다. 이 추상 클래스는 상속 받아 구현해야 하는 매서드는 /* void */ requestCondition: function (/* int */fid)입니다. 이 클래스의 목적에 대한 설명은 잠시 미루고 이 클래스를 상속받아 만든 예로써 MyDeferableShapeDrawTheme 클래스는 아래와 같습니다. MyDeferableShapeDrawTheme = Xr.Class({ …
특화된 GIS 시스템 개발을 견고하고 빠르게 개발할 수 있는 GIS 엔진으로써, FingerEyes-Xr과 GeoService-Xr을 활용해 설비를 관리하는 GIS 시스템을 개발하고 있습니다. 다양한 기능 중 웹에서 공간 데이터를 SHP 파일로 바로 내보내기하여 저장할 수 있는 기능에 대해 소개합니다. 공간서버인 GeoService-Xr이 접근(Access)하는 공간 데이터가 저장된 DBMS로부터 SHP 파일을 다운로드할 수 있는 방법은 단지 URL의 호출만으로 이루어집니다. 즉, 공간 데이터에 …
더 보기 “FingerEyes-Xr for HTML5와 GeoService-Xr를 활용한 설비 공간정보시스템”
핑거아이즈는 별도의 설치가 필요하지 않습니다. 인터넷이 되는 전세계 PC의 99%에 설치된 Flash를 이용해 실행되어 Active-Xr처럼 설치에 문제가 없습니다. 또한 Flash는 Windows 10에서는 OS에서 기본 기능으로 탑재되어 있습니다. 만약 완벽한 웹 표준을 준수하고자 한다면 Flash 버전의 FingerEyes-Xr과 기능이 동일한 HTML5 버전의 FingerEyes-Xr을 사용하면 됩니다. 핑거아이즈는 다양한 OS에서 다양한 웹 브라우저를 지원합니다. Windows는 물론이고 맥OS와 리눅스에서 다양한 …
다양한 레이어 지원 배경맵으로써 빠르게 표시하기 위한 TMS 방식의 타일맵을 지원하며, 보다 개선된 자체적인 형식의 배경지도에 대한 레이어를 제공합니다. 편집과 다양한 응용가 가능한 수치지도 레이어도 지원하며, 고객이 보유한 데이터를 지도 위에 매쉬업할 수 있는 그래픽 레이어를 지원합니다. 또한 GIS 공간분석 중 셀(Cell) 기반의 분석을 위한 그리드(Grid) 레이어를 지원합니다. 통계 데이터를 차트로 지도 위에 올릴 수 …
FingerEyesXr은 퍼포먼스가 뛰어난 Flash 기반의 버전과 웹표준을 준수하는 HTML5 기반의 버전 모두를 제공합니다. FingerEyes-Xr을 이용하여 웹에서도 데스크탑 못지 않은 공간 데이터의 편집과 공간 분석 등과 같은 GIS의 고급 기능을 사용자에게 제공할 수 있습니다. FingerEyes-Xr을 이용한다면 더 이상 웹이라는 이유로 GIS의 고급 기능을 지원하지 못할 이유가 없습니다. FingerEyes-Xr은 Flash 버전과 HTML5 각각의 버전에 대해 소스코드가 공개된 …
FingerEyes-Xr for HTML5의 레이어 중 ShapeMapLayer에 대해, 도형 정보 및 속성 정보에 접근하는 코드를 정리해 봅니다. 참고로 아래 코드는 Point 타입의 ShapeMapLayer에 대한 코드입니다. var snodeLayerId = snode.layerId(); // Layer Id var snodeNetworkId = snode.nodeId(); // 검색할 필드값 var snodeLayer = g_map.layers(snodeLayerId); var snodeRowset = snodeLayer.shapeRowSet(); var snodeAttrRowset = snodeLayer.attributeRowSet(); var snodeFieldSet = snodeLayer.fieldSet(); var …
더 보기 “FingerEyes-Xr for HTML5 – ShapeMapLayer의 도형정보 및 속성 정보 접근”
FingerEyes-Xr은 그래픽 레이어를 통해 지도 상의 원하는 위치에 다양한 그래픽 요소를 추가해 표현할 수 있는데요. 이와 관련된 API를 정리해 봅니다. 그래픽 요소를 추가하기 위해서 그래픽 레이어가 하나 필요합니다. 아래의 코드를 통해 그래픽 레이어를 추가합니다. var gfxLyr = new Xr.layers.GraphicLayer(“g”); map.layers().add(gfxLyr); 그래픽 레이어의 이름을 ‘g’로 하여 이 이름을 통해 그래픽 레이어 객체를 얻을 수 있습니다. 이 …
더 보기 “[GIS] FingerEyes-Xr for HTML5 ㅡ Code로 GraphicLayer에 마커 추가하기”
예를 들어, 필드 이름이 fieldNm1과 fieldNm2인 2개의 필드값을 조합하여 라벨로 표시 하고자할때에 해당 레이어의 라벨의 포맷터(Formatter)에 Custom Formatter를 만들어 지정해 주면 됩니다. 아래의 코드는 수치지도 레이어에 사용자 정의 포맷터를 지정한 코드 예입니다. var lyr = lm.layer(‘layerNm’); // 이름이 layerNm인 레이어에 대해서 … if (lyr) { var label = lyr.label(); label.enable(true); //.offsetY(20); label.visibility().visibleByScale(true).fromScale(0).toScale(3000); // 사용자 정의 …
FingerEyes-Xr for Flex에서 DBMS에 저장되어 있는 공간 데이터를 마우스를 이용해 사용자가 편집하는 기능을 구현하기 위한 API를 설명하는 문서입니다. DBMS에 저장되어 있는 공간 데이터의 정점을 편집할 수 있도록, 기존 정점을 이동하거나 삭제하고 새로운 정점을 추가하는 기능과 새로운 공간 도형을 생성하고 기존 도형을 삭제하는 기능을 구현하는 튜토리얼 형태의 문서입니다. 또한 편집 이력에 대한 Undo와 Redo에 대한 기능도 …
수치지도 데이터를 처리하는 레이어인 XrShapeMapLayer는 filterFunction이라는 콜백함수 기능을 제공합니다. 이 기능은 공간 서버로부터 공간 데이터를 가져오고 화면에 표시하기 전에 가져온 공간 데이터에 대한 선처리(Preprocessing)을 수행하는 용도로 사용됩니다. 아래의 코드는 XrShapeMapLayer에 filterFunction 콜백함수를 지정하는 코드입니다. var layer:XrShapeMapLayer = null; layer = map.layers.getLayer(“LAYER_NAME”) as XrShapeMapLayer; layer.filterFunction = filterFunction; 여기서 filterFunction은 다음과 같은 인자를 갖습니다. FingerEyes-Xr 버전 2.2를 …
더 보기 “[GIS] FingerEyes-Xr for Flex, ShapeMapLayer의 filterFunction 기능”
1. 밀도도 분석 핑거아이즈(FingerEye-Xr)에서 제공하는 레이어 중에서 그리드 레이어를 이용한 기능으로써, 공간상에 분포하고 있는 데이터에 대해서 어느 지점에 가장 많이 밀집되어져 있는지를 매우 직관적으로 파악할 수 있는 밀도도 분석에 대한 소개입니다. FingerEyes-Xr에서 실행할 수 있는 밀도도 분석을 통해 웹 환경에서 높은 품질의 분석 결과를 사용자에게 제공할 수 있습니다. 2. 지형 분석 다양한 공간분석 기능 중 …
HTML5로 개발된 FingerEyes-Xr은 전문 GIS 시스템 개발을 위한 웹 GIS 엔진이며 GPL 라이선스로 오픈소스 소프트웨어입니다. 공간 데이터 편집, 분석과 이에 대한 세련된 가시화 기능을 제공하는 FingerEyes-Xr에 대한 튜토리얼을 아래의 링크를 통해 제공합니다. 이 튜토리얼은 FingerEyes-Xr for HTML5에 대한 가장 효율적인 학습 방법입니다. 1. TMS 활용하기 FingerEyes-Xr은 OSGeo 스펙 중 하나인 TMS를 지원합니다. TMS는 Tile Map …
1. 공간 데이터 기본 편집 HTML5 기반의 웹 GIS 엔진인 FingerEyes-Xr에서 공간 데이터 편집 기능에 대한 소개입니다. 공간 데이터 편집 기능 중 도형 신규 생성, 정점 추가, 삭제, 이동과 편집 이력에 대한 Undo/Redo 기능을 제공하며 Snapping 기능을 소개합니다. 이러한 기본 기능에 대해서 건물 데이터에 대한 편집 기능을 데모로 하였습니다. 2. 공간 데이터 고급 편집 기본 …