[카테고리:] OpenSource

클라이언트 GIS 엔진 중 오픈 소스코드 형태의 leaflet에 대한 내용을 정리해 봅니다. leaflet은 모바일과 PC에서 간결하며 빠르고 높은 사용성을 목표로 설계되었고 개발된 웹 클라이언트 GIS 엔진입니다. 이와 유사한 OpenLayers도 있는데, 플러그인 형태의 확장성 면에서 본다면 leaflet이 더 뛰어나다고 생각됩니다. 그러나 TMS, WFS, WCS, WMS 등과 같은 OGC 표준 및 GeoServer와의 궁합은 OpenLayers가 더 뛰어납니다.

리플릿에 대한 강좌 첫번째로 배경지도로 타일맵을 활용하는 내용에 대해 정리합니다. 이 강좌와 관련된 모든 글은 Leaflet의 공식 사이트에서 제공되는 튜토리얼을 제 나름대로 학습하고 정리한 글임을 밝힙니다.

먼저 리플릿 라이브러리 소스코드와 미리 정의된 스타일에 대한 CSS를 웹페이지에 추가합니다.

그리고 지도가 표시될 div를 아래처럼 추가하고 웹페이지에 대한 onload 이벤트를 onLoad 함수로 지정합니다.

div와 같은 시각적인 요소가 있다면 이에 대한 스타일 지정이 필요합니다. 아래처럼 div에 대한 스타일을 지정합니다. div의 id는 map으로 지정 하였습니다.

onLoad 함수는 다음과 같습니다.

function onLoad() 
{
    var map = L.map('map');

}

위의 코드를 설명하면, map으로 id가 지정된 div에 지도를 표시하도록 map 객체를 생성하여 map이라는 변수에 담고 있습니다. 이제 타일 레이어를 이 map 객체에 추가 하겠습니다. 아래의 코드를 위의 코드 중 4번 라인에 추가합니다.

var key = !_아래 글 참조_!;
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?' + 
    'access_token=' + key,
    {
        maxZoom: 18,
        attribution: 'Mapbox',
        id: 'mapbox.streets'
    }
).addTo(map);

타일맵 레이어는 MapBox에서 제공하는 데이터를 사용하였습니다. 위의 코드 중 1번은 MapBox에서 발급받은 key 값인데, 필자는 ‘pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ’ 값을 사용하였습니다. 저와 같이 딱히 당장 사용할만한 key가 없다면 사용해보시기 바랍니다. 그외 5번의 maxZoom 값은 MapBox에서 제공하는 타일맵 레이어가 최대 18 줌 레벨을 지원하므로 이 값을 사용하였습니다.

리플릿을 통해 지도가 표시될 div를 지정하고 이에 대한 map 객체까지 생성했으며, 표시할 타일맵 레이어도 추가하였습니다. 이제 마지막으로 사용자가 볼 지도의 위치를 지정해야 합니다. 다음의 코드를 위의 코드 아래에 추가합니다.

map.setView([51.505, -0.09], 13);

위의 setView는 2개의 인자를 받습니다. 첫번째는 경위도 좌표에 대한 배열값이고 두번째는 줌레벨 값입니다. 이제 실행해 보면 아래와 같은 결과를 볼 수 있습니다.

GIS 분야의 개발자로써 PostgreSQL은 정말 좋은 DBMS입니다. 공간DB를 위한 PostGIS의 확장 기능이 단연 으뜸이구요. 평소 PostgreSQL에 대해 많은 관심을 갖던 중 확장 기능으로써 PostGIS 이외에 또 다른 확장 기능이 무엇인지를 살펴보다가 HStore라는 기능을 알게 되었는데요. 이 기능은 Key / Value라는 단순한 구조를 갖는 테이블을 정의할 수 있는 확장입니다.

해서.. 간단히 HStore라는 기능에 대한 사용 예를 정리해 봅니다. HStore는 PostgresSQL에서 기본적으로 제공되므로 PostGIS처럼 별도의 설치는 필요치 않습니다. 저 같은 경우 PostgreSQL 9.3을 사용하고 있습니다. 혹, HStore가 지원되지 않는다고 판단될 경우 최신버전을 사용해 보시기 바랍니다.

설치된 PostgreSQL에서 HStore를 한번도 사용해 보지 않았다면 다음과 같은 명령을 통해 HStore를 활성화 시켜야 합니다. 한번 활성화되면 매번 다시 활성화할 필요가 없습니다.

CREATE EXTENSION hstore;

이제 HStore를 이용해서 간단한 주소록 테이블을 만들어 보겠습니다.

CREATE TABLE AddressBook (
    id serial PRIMARY KEY,    
    name varchar,
    attributes hstore
);

hstore 타입의 attributes 필드가 핵심입니다. 이제 이 테이블에 3개의 레코드를 입력하겠습니다.

INSERT INTO AddressBook (name, attributes) VALUES (
    '김형준',
    'age => 38,
     telephone => "010-9438-3224",
     email  => "hjkim@geoservice.co.kr"'
);

INSERT INTO AddressBook (name, attributes) VALUES (
    '일지매',
    'age => 27,
     telephone => "N/A",
     email  => "jime@korea.kr"'
);

INSERT INTO AddressBook (name, attributes) VALUES (
    '홍길동',
    'age => 18,
     telephone => "N/A",
     email  => "gildong@josun.kr"'
 );

hstore 타입의 attributes 필드의 값을 입력하는 방식이 다수의 Key, Value에 대한 문자열임을 알 수 있습니다. Key와 Value의 구분은 => 를 사용하고 있습니다 !

이제 이렇게 입력한 데이터셋으로부터 데이터 질의(Query)를 해보겠습니다.

SELECT name, attributes FROM AddressBook;

결과는 아래와 같습니다.

다음은 Key에 대해 조건을 걸어 검색해 보겠습니다. Key 중 전화(telephone)가 ‘N/A’ 값으로 입력 된 레코드를 조회하는 것입니다. 아래와 같습니다.

SELECT name, attributes FROM AddressBook WHERE attributes->'telephone' = 'N/A';

결과는 예상했던 것처럼 아래와 같습니다.

이 HStore라는 녀석을 어떻게, 어디에 활용할 수 있을까 생각해 봐야 겠습니다.