GIS DEVELOPER, 공간정보시스템 개발 블로그 -
   GIS DEVELOPER, 공간정보시스템 개발 블로그  
김형준(Dip2K) GIS 기반기술 연구소
첫 페이지
공지 | E-Mail | 관리자 | 글쓰기   
2016/12/30 16:14 2016/12/30 16:14
[PostgreSQL] CREATE TABLE 예제

PostgreSQL에서 geometry 타입을 갖는 Table을 생성하고자 할때, 사용한 SQL 문에 대해 정리해 봅니다. 아래와 같은 형태의 테이블 2개에 대한 생성인데요.

위 형태의 테이블 2개에 대한 CREATE 문은 아래와 같습니다. 실제 용도는 네트워크 DB에 대한 Node, Link 관련 데이터를 저장하는 Table 생성에 대한 SQL입니다.

CREATE TABLE public.ecl_network_link
(
  networkid uuid PRIMARY KEY,  
  facility_layer character varying(30),
  snode_id uuid,
  snode_layer character varying(30),
  enode_id uuid,
  enode_layer character varying(30),
  the_geom geometry(MultiLineString)
);

ALTER TABLE public.ecl_network_link
  OWNER TO postgres;

CREATE INDEX ecl_network_link_geom_idx
  ON public.ecl_network_link
  USING gist
  (the_geom);
CREATE TABLE public.ecl_network_node
(
  networkid uuid PRIMARY KEY,  
  facility_layer character varying(30),
  the_geom geometry(Point)
);

ALTER TABLE public.ecl_network_node
  OWNER TO postgres;

CREATE INDEX ecl_network_node_geom_idx
  ON public.ecl_network_node
  USING gist
  (the_geom);
2016/12/26 10:39 2016/12/26 10:39
[OpenLayers3] 레이어 스파이(Layer Spy)

아래의 지도 위에 마우스를 움직여 보기 바랍니다.

네! 바로 이 기능이 '레이어 스파이(Layer Spy)'입니다. 이 기능을 OpenLayer3에서 구현해 보겠습니다.

먼저 필요한 외부 css 및 js를 페이지에 추가합니다.




UI를 구성할텐데요. 위의 지도 페이지에는 지도에 대한 DIV 요소만이 있습니다. 아래의 코드처럼말입니다.

이제 필요한 css 및 외부 js 라이브러리와 함께 UI까지 준비가 되었으니, 스크립트 코드를 작성할 차례입니다. jQuery의 이벤트 중 UI 등과 같은 요소의 준비가 완료되면 호출되는 ready 이벤트를 아래처럼 작성해 둡니다.

$(function() {
     ....
});

위의 코드에서 ...에 해당하는 부분에 스크립트 코드를 추가할 것입니다.

먼저 지도를 구성하는 레이어로 2개를 준비할텐데요. Bing Map에서 제공하는 타일맵을 통해 레이어를 구성합니다. Bing Map의 지도 서비스를 사용하기 위해서는 key가 필요한데, 만약 아래의 코드에서 제공하는 key로 지도가 표시되지 않는다면 직접 발급을 받아 적용하시기 바라니다. 코드는 아래와 같습니다.

var key = 'AgRcrlx0phSk0kDN6HFX9HkMLbG3dBIqtTm-2no4igx0xJPXeDTffQAQfQP1e-Xv';

var roads = new ol.layer.Tile({
    source: new ol.source.BingMaps({ key: key, imagerySet: 'Road' })
});

var imagery = new ol.layer.Tile({
    source: new ol.source.BingMaps({ key: key, imagerySet: 'Aerial' })
});

이제 이 레이어를 지도에 추가하고 지도를 표시할 DIV 요소에 적용할 차례입니다. 아래의 코드와 같습니다.

var container = document.getElementById('map');

var map = new ol.Map({
    layers: [roads, imagery],
    target: container,
    view: new ol.View({
        center: ol.proj.fromLonLat([-109, 46.5]),
        zoom: 6
    })
});

먼저 1번 코드는 지도를 표시할 DIV에 대한 DOM 요소를 id값을 통해 가져와 container이라는 변수에 할당합니다. 그리고 3번은 지도 객체를 생성하는데요. 생성 시 옵션값으로 layers, target, view를 설정합니다. layers 옵션값은 앞서 생성해 둔 레이어를 추가하고, target은 지도가 표시될 DIV에 대한 DIM 요소가 지정되며, view 옵션에는 처음 지도의 위치와 줌 레벨을 지정합니다. layers 옵션에 대해 추가적으로 설명하면.. roads 레이어를 먼저 추가하고 다음에 imagery 레이어를 추가하고 있다는 점이 중요한데요. 이렇게 하면 roads 레이어 위에 imagery 레이어가 표시되는데, 이때 위체 표시되는 imagery 레이어에 대한 렌더링 컨텍스트에 대해 자르기(Clipping)을 적용하면 레이어 스파이 기능이 완성됩니다.

imagery 레이어에 대한 자르기(Clipping)의 형태는 원 모양입니다. 이 원을 위한 반경값으로 사용할 radius 변수와 키보드를 통해 이 radius 변수를 증가하고 감소하는 키 입력 이벤트를 지정합니다. 코드는 아래와 같습니다.

var radius = 100;

document.addEventListener('keydown', function (evt) {
    if (evt.which === 38) { // Up Key
        radius = Math.min(radius + 5, 200);
        map.render();
        evt.preventDefault();
    } else if (evt.which === 40) { // Down Key
        radius = Math.max(radius - 5, 25);
        map.render();
        evt.preventDefault();
    }
});

위의 코드에서, radius 변수값을 증가시키고 감소시키는 키를 입력할때마다 map 객체에 대한 render함수가 호출되고 있습니다. 이 render 함수는 다음과 같은 실행 흐름을 갖습니다.

먼저 precompose 이벤트가 발생하는데, 이 이벤트는 레이어를 그리기(Drawing) 직전에 발생합니다. 그 다음은 실제로 레이어 그리기(Layer Drawing)가 실행됩니다. 레이어 그리기가 완료되면 postcompose 이벤트가 호출됩니다. 이러한 3 단계는 각 레이어마다 반복됩니다. 또 여기서 중요한점은 이 3 단계가 실행되기에 앞서 지도 데이터를 서버측에 요청하여 받게 되는 것이지 이 3 단계 안에서 서버측으로부터 지도 데이터를 받는 것이 아닙니다. 이 3단계에서 imagery 레이어를 원 모양으로 자르기 위해서 주목해야할 이벤트는 레이어가 그려지기 전인 precompose 이벤트입니다. 아래는 imagery 레이어에(지도가 아닌) precompose 이벤트를 지정하는 코드입니다.

imagery.on('precompose', function (event) {
    var ctx = event.context;
    var pixelRatio = event.frameState.pixelRatio;
    ctx.save();
    ctx.beginPath();
    
    if (mousePosition) {
        ctx.arc(mousePosition[0] * pixelRatio, mousePosition[1] * pixelRatio,
            radius * pixelRatio, 0, 2 * Math.PI);
        ctx.lineWidth = 5 * pixelRatio;
        ctx.strokeStyle = 'rgba(255,255,0,1)';
        ctx.stroke();
    }
    
    ctx.clip();
});

위의 코드를 살펴보면, 2번에서 레이어를 그릴 컨텍스트를 얻어와 ctx 변수에 저장합니다. 그리고 3번에서는 현재 지도에 대한 픽셀 비율값을 가져와 pixelRatio 변수에 저장하고 있습니다. 4번ㅡ15번의 코드가 원 모양으로 자르기(Clipping) 하는 코드입니다. 코드를 부면 mousePosition 변수가 보이는데요. 이 변수는 마우스를 지도 위에서 움직일때 현재 마우스 커서의 좌표를 담게 됩니다. 이를 위해서 마우스 이벤트 지정이 필요한데요. 아래의 코드와 같습니다. 잘라내기(Clipping)의 모양을 지정하기 위해 컨텍스의 arc 함수를 호출하고 있는데요. 중심 좌표 및 반경에 대한 인자값 모두에 pixelRatio 값을 곱해주고 있습니다. 이 pixelRatio는 모니터 화면에 대한 물리 픽셀(physical Pixels)와 장치독립적인 픽셀(device-independent pixels)의 비(ratio) 값입니다.

var mousePosition = null;

container.addEventListener('mousemove', function (event) {
    mousePosition = map.getEventPixel(event);
    map.render();
});

container.addEventListener('mouseout', function () {
    mousePosition = null;
    map.render();
});

또한 postcompose 이벤트의 지정도 필요합니다. 이 이벤트는 레이어가 그려지고 난 뒤에 호출되는 이벤트인데요. 앞서 precompose 이벤트에서 수행한 잘라내기(Clipping)를 무효화해줍니다. 코드는 아래와 같습니다.

imagery.on('postcompose', function (event) {
    var ctx = event.context;
    ctx.restore();
});

이제 실행해보면, 레이어 스파이 기능이 작동되는 것을 확인할 수 있습니다. 아래는 지금까지에 대한 전체 코드입니다.

Tag :
GIS Developer, 김형준은 '모바일 3D 그래픽스' 번역 및 출판 / '모바일 GIS 프로그래밍' 집필 및 출판을 하였으며, 현재 (주)지오서비스 대표이사 및 (주)내가시스템 연구소 소장으로써 GIS 기반기술 연구 및 시스템 개발을 하고 있습니다.
 포스트 분류
전체 (832)
GIS 개발 (281)
공간DB 공유 (3)
프로그래밍 (354)
스치는 생각들 (149)
번역 또는 집필 (4)
 블로그 핵심 단어
GIS Xr OpenGL BlackPoint Shader FingerEyes C++ Algorithm Java Android OpenLayers golang DuraMap WPF ActionScript Map Engine C# FingerEyes-Xr ArcObjects ArcGIS 안드로이드 BlackPoint-Xr HTML5 JavaScript go DuraMap-Xr Flex template WPF 3D OrangeMap Service Pattern .NET XML Mobile GIS Mr.Tiler-Xr GPS OpenGL ES WebService PSP XGE OOD GIS Korea Graphic Design channel Vista OpenLayer Tool Objective-C
 월 단위 보관함
2016/12
2016/11
2016/10
 방문자 수
전체 : 4409583명
오늘 : 926명 (어제 : 1161명)
Powered By TatterTools
rss