“넥스젠 GIS 기반 솔루션”은 항공영상, DEM, 수치지도 등과 같은 공개된 공간 DB를 활용할 수 있는 시스템으로, 주소 검색 등과 같은 기본적인 GIS 기능을 제공하는 솔루션으로써, 별도의 커스터마이징 작업을 통해 고객이 원하는 공간 DB와 기능을 추가할 수 있습니다. 아래는 넥스젠에서 DEM 데이터를 활용해 수행할 수 있는 표고 측정, 단면도 측정, 평균경사도측정과 3차원 가시화 기능에 대한 동영상입니다.
FingerEyes-Xr, 공간 데이터에 대한 Custom Draw (사용자 정의 그리기)
공간 데이터는 위치 데이터와 속성 데이터의 조합입니다. 단순히 공간 데이터를 일괄적으로 원하는 색상이나, 아이콘 등으로 표현할 수 있지만 각각의 공간 데이터에 대한 속성 데이터를 활용하여 다양한 형태로 그리고자 할 때가 있습니다. 예를 들어 아래와 같은 공간 데이터 테이블이 있다고 합시다.
위의 테이블에서 images는 서버 측에 저장된 이미지 파일명에 대한 리스트이고, tags는 이미지에 대한 해시태그 성격의 값입니다. 그리고 the_geom은 좌표 데이터입니다. 이 3개의 값을 이용해 특정 위치에 이미지와 해시태그를 표현하고자 할 때, 클라이언트 GIS 엔진인 FingerEyes-Xr의 어떤 API를 활용해 구현할 수 있는지 정리해 봅니다. 먼저 아래는 위의 3개의 속성값을 이용해 실제로 구현된 결과에 대한 화면입니다.
FingerEyes-Xr에서는 공간 데이터를 그릴 때, 특히 포인트 데이터에 대해서 다음처럼 표현하고자 하는 마커 심벌을 지정할 수 있습니다.
var customSym = new GeoHashTagMarkerSymbol(); layer.theme().markerSymbol(customSym);
즉, 공간 데이터를 그리는 방식을 지정하는 GeoHashTagMarkerSymbol 클래스를 정의해 생성한 후, 공간 데이터에 대한 레이어의 Theme에 대해 MarkerSymbol로써 지정하면 됩니다. 바로 이 GeoHashTagMarkerSymbol의 Javascript의 구현은 아래와 같습니다.
GeoHashTagMarkerSymbol = Xr.Class({
requires: [Xr.symbol.IMarkerSymbol],
construct: function () { },
methods: {
/* SVG Element */ create: function (/* PointD */ point,
/* AttributeRow */ attrRow, /* CoordMapper */ coordMapper) {
var vp = coordMapper.W2V(point);
var vpx = vp.x, vpy = vp.y;
var tags = attrRow.valueAsString(0); // tags 필드의 값
var imageFile = attrRow.valueAsString(1); // images 필드의 값
var w = this.wSize(), h = this.hSize();
var g = document.createElementNS(xmlns, "g");
var image = document.createElementNS(xmlns, "image");
image.setAttribute("x", vpx - w / 2);
image.setAttribute("y", vpy - w / 2);
image.setAttribute("width", w);
image.setAttribute("height", w);
image.setAttributeNS("http://www.w3.org/1999/xlink", "href", imageFile);
g.appendChild(image);
var textStroke = document.createElementNS(xmlns, "text");
textStroke.setAttribute("x", vpx);
textStroke.setAttribute("y", vpy + h / 2 - 6);
textStroke.setAttribute("text-anchor", "middle");
textStroke.setAttribute("stroke", "black");
textStroke.textContent = tags;
g.appendChild(textStroke);
return g;
},
/* number */ wSize: function () {
return this._width;
},
/* number */ hSize: function () {
return this._height;
},
}
});
2번 코드에서처럼 Xr.symbol.IMarkerSymbol 인터페이스를 구현하겠다고 명시하고, 4번 코드의 생성자에서 필요로 값을 미리 정의해 두며, 10번 코드의 create에서 지도 상에 표현할 SVG 요소를 생성해 반환합니다. 40번과 44번 코드의 wSize, hSize 함수를 통해 심벌의 크기를 정하게 됩니다.
JavaScript의 Class 정의 정리
모던한(?).. 즉 현대적인 Javascript에서는 클래스를 정의하기 위한 class 키워드를 제공하기는 하지만, 현재의 IE에서 아직도 지원하지 않아 나름대로의 class 정의 방식을 사용하고 있습니다. 웹 기반의 GIS 엔진인 FingerEyes-Xr도 이러한 class 정의 방식으로 개발 되었습니다. 수백여개의 클래스를 이 방식으로 정의해 왔음에도 새로운 클래스를 정의할라치면 기존에 만들어진 소스를 Copy 해서 Paste 해 고치는 것이 세련미 떨어져.. 직접 키보드로 한땀 한땀 입력하고자 정리해 봅니다.
먼저 클래스 정의하는 최소한의 구문입니다.
MyClass = Xr.Class({
/* name: "MyClass", */ // optional
construct: function () { /* 생성자 */ }
});
private 변수를 추가하는 구문입니다. 반드시 생성자 안에서 밑줄(_)로 시작해서 정의합니다.
MyClass = Xr.Class({
construct: function () {
this._privateVariable = 0;
}
});
맴버 함수를 추가하는 구문입니다. private는 밑줄로 시작하고, public은 밑줄이 아닌 영문 소문자로 시작합니다.
MyClass = Xr.Class({
construct: function () {},
methods: {
_privateFunction: function() { },
publicFunction: function() { },
}
});
클래스 차원에서 접근할 수 있는 static 변수 정의입니다. 아래와 같다면, MyClass.STATIC_VARIABLE의 값은 0이 됩니다.
MyClass = Xr.Class({
statics: {
STATIC_VARIABLE: 0
},
construct: function () {}
});
[ToDo] 상속, 인터페이스에 대한 내용은 추후 필요하면 그때 정리할 것
PostgreSQL의 Function 요약
아래는 PostgreSQL의 함수를 요약한 내용이며, 보다 자세한 내용과 예제는 https://www.techonthenet.com/postgresql/functions/index.php 참고하기 바랍니다.
String Functions
- btrim : 문자열의 시작과 끝 양쪽에 지정된 문자들을 제거
- char_length : 문자열의 길이를 반환
- character_length : 지정된 문자열의 길이를 반환
- || : 2개의 문자열을 합하여 반환
- initcap : 문자열 중 첫번째 문자는 대문자로 변환하고 나머지는 소문자로 변환
- length : 문자열의 길이를 반환
- lower : 지정된 문자열을 모두 소문자로 변환
- lpad : 지정된 문자열을 원하는 길이로 맞추는데, 이때 부족한 문자를 왼쪽에 채움
- ltrim : 문자열의 왼쪽에서 지정된 모든 문자를 제거
- position : 문자열에서 지정된 문자열이 존재하는 인덱스값을 반환
- repeat : 문자열을 원하는 만큼 반복해서 반환
- replace : 기존의 문자열을 구성하는 부분 문자열을 원하는 문자열로 변환
- rpad : 지정된 문자열을 원하는 길이로 맞추는데, 이때 부족한 문자를 오른쪽에 채움
- rtrim : 문자열의 오른쪽에서 지정된 모든 문자를 제거
- strpos : 기존의 문자열에서 찾고자 하는 부분 문자열의 위치를 반환
- substring : 주어진 문자열에서 원하는 부분 문자열을 추출
- translate : 기존의 문자열 중 치환하고자 하는 문자열을 지정해 변환
- trim : 문자열의 시작과 끝 양쪽에 지정된 문자들을 제거
- upper : 문자열을 모두 대문자로 변환
Numeric/Math Functions
- abs : 절대값 반환
- avg : 평균값 반환
- ceil : 소수점 자리를 무조건 올려 정수 반환
- ceiling : 소수점 자리를 무조건 올려 정수 반환
- count : 개수 반환
- div : 2개의 수를 나눠서 그 몫(정수)을 반환
- exp : e(2.71828182845904)의 제곱값 반환
- floor : 지정된 수와 같거나 작은 정수 반환
- max : 최대값 반환
- min : 최소값 반환
- mod : 2개의 수를 나눈 그 나머지 반환
- power : 거듭 제곱의 결과 반환
- random : [0~1) 사이의 난수값 반환
- round : 원하는 자리수에서의 반올림한 값을 반환
- setseed : 난수 발생시 그 씨앗값을 설정.
- sign : 주어진 수에 대한 부호 반환.
- sqrt : 루투(root) 값 반환.
- sum : 합계 반환.
- trunc : 원하는 자리수까지의 값을 반올림 없이 반환
Date/Time Functions
- age : 두 날짜 사이의 시간 간격을 년, 월, 일로된 문자열로 반환
- current_date : 현재의 날짜 반환
- current_time : Time Zone을 갖는 현재의 시간을 반환
- current_timestamp : Time Zone을 갖는 현재의 날짜와 시간을 반환
- date_part : 시간 또는 날짜로부터 원하는 부분(년, 월, 일, 시, 분, 일, 초 등)을 반환
- extract : 시간 또는 날짜로부터 원하는 부분(년, 월, 일, 시, 분, 일, 초 등)을 반환
- localtime : 현재의 시간을 반환
- localtimestamp : 현재의 시간과 날짜를 반환
- now : Time Zone을 갖는 현재의 날짜와 시간을 반환
Conversion Functions
- to_char : 숫자 또는 날짜를 문자열로 변환
- to_date : 문자열을 날짜로 변환
- to_number : 문자열을 숫자로 변환
- to_timestamp : 문자열을 타임스탬프(Timestamp)로 변환
FingerEyes-Xr의 그래픽 요소에 타이틀(텍스트) 달기
FingerEyes-Xr은 사용자가 마우스를 이용해 자유롭게 다양한 그래픽 요소를 지도에 스케치할 수 있습니다. 사용자가 스케치한 그래픽 요소에 원하는 텍스트 추가로 붙여주는 코드에 대해 정리합니다. 먼저 아래는 사용자가 마우스로 그린 그래픽 요소에 대해 특정 텍스트를 추가한 화면입니다.
코드 예시는 아래와 같습니다.
var gl = /* 그래픽 레이어 */
var id = /* 그래픽 요소의 ID */
var row = gl.row(id);
row.titleText("타이틀에 대한 텍스트");
row.titleFontSymbol() // 타이틀 텍스트에 대한 폰트 스타일
.size(24).color('#f1c40f').strokeColor('#000000');
쉽죠? 쉬우니 관련 글 정리도 쉽네요..