GIS Developer

OpenLayers는 CartoDB를 데이터소스로 사용해 지도로 가시화할 수 있습니다. CartoDB는 PostgreSQL이라는 DBMS를 공간 데이터 저장소로 사용하며 PostGIS를 이용해 공간 연산을 처리해 사용자에게 GeoJSON과 같은 형식으로 공간 데이터를 서비스합니다. 공간 데이터가 DBMS에 있으므로 사용자는 직접 SQL 문을 OpenAPI의 파라메터로 던져 주고, 그 결과를 받아 해석해 사용자가 원하는 스타일로 지도를 그릴 수 있습니다.

아래의 실행 결과는 이 글을 통해 작성한 코드로 CartoDB에서 유럽에 대한 공간 데이터를 가져오는데요. 면적에 대한 조건을 SQL의 WHERE 절에 지정함으로써 필터링을 하고 있습니다.

자, 이제 위의 결과에 대한 코드를 작성해 보도록 할깝 show~!

먼저 아래코드를 통해 OpenLayers에 대한 CSS와 라이브러리 js 파일, 그리고 jQuery 라이브러리를 문서에 추가합니다.

다음으로 UI를 구성할 건데요. 지도를 표시할 div과 면적에 대한 조건을 선택할 수 있는 form을 아래처럼 추가합니다.

    

    

        

            
                Show countries larger than
                
                    0 ㎢
                    5000 ㎢
                    10000 ㎢
                    50000 ㎢
                    100000 ㎢
                
            
        
    
    

UI 작성이 끝났으므로, 이제 작동을 위한 스크립트를 jQuery의 ready 이벤트에 작성합니다. jQuery의 ready 이벤트는 아래와 같죠.

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

위의 코드 중 …에 해당하는 부분에 아래부터 언급되는 코드를 순서대로 입력합니다. 순서대로 입력하는 코드를 하나 하나 설명드리겠습니다. OpenLayers는 레이어에 대한 데이터를 가져오는 곳을 소스(source)라고 하는데요, 먼저 cartoDB에 대한 데이터소스의 객체를 아래처럼 생성해야 합니다.

var mapConfig = {
    'layers': [{
        'type': 'cartodb',
        'options': {
            'cartocss_version': '2.1.1',
            'cartocss': '#layer { polygon-fill: #F00; ' +
                        'polygon-opacity: 0.75; ' +
                        'line-width: 1; ' + 
                        'line-color: #ff0;}',
            'sql': 'select * from european_countries_e where area > 0'
        }
    }]
};

var cartoDBSource = new ol.source.CartoDB({
    account: 'documentation',
    config: mapConfig
});

15번 코드가 CartoDB에 대한 소스 객체를 생성하고 있는데요. 소스 객체 생성을 위한 구성값을 1~13번 코드를 통해 작성합니다. CartoDB의 소스 객체를 위한 구성값은 레이어의 그룹인데, 위의 코드는 1개의 레이어를 사용했으며 이 레이어를 화면에 그릴때 사용하는 채움색과 투명도 그리고 외곽선색 및 굵기를 cartocss라는 key 값으로 지정하고 있고, sql이라는 key 값을 통해 CartoDB의 서버에게 가져올 공간 데이터에 대한 SQL 쿼리문을 지정하고 있습니다.

이제 다음은 OpenLayers의 Map 객체를 생성하는 코드입니다.

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({ source: new ol.source.OSM() }),
        new ol.layer.Tile({ source: cartoDBSource })
    ],
    target: 'map',
    view: new ol.View({
    center: [0, 0],
    zoom: 2
    })
});

Open Street Map에 대한 Tile 레이어와 함께 4번에서 앞서 이미 만들어 둔 CartoDB의 소스 객체를 통해 또 하나의 Tile 레이어를 구성합니다.

끝으로 사용자가 조건을 변경할 수 있는 컴보박스의 선택값을 변경할때 해당 조건에 대해 CartoDB의 서버에 재요청을 해야 하는데요. 아래의 코드가 바로 이에 해당합니다.

function setArea(n) {
    mapConfig.layers[0].options.sql =
        select * from european_countries_e where area > ' + n;

    cartoDBSource.setConfig(mapConfig);
}

$('#country-area').on('change', function () {
    setArea(this.value);
});

이제 실행해 보면 해당 조건, 즉 면적에 대한 조건과 일치하는 유럽의 나라만 그려지는 것을 볼 수 있습니다.

아래는 위에서 설명한 전체 코드에 대한 다운로드입니다.

OpenLayers3에서 Open Street Map을 배경맵으로 지정하고 맵을 확대, 축소하는 코드에 대한 예제를 설명합니다. 최종적으로 완성될 예제는 아래와 같은 지도화면으로 표시되고 작동됩니다.

축소 확대

위의 실행 화면을 구성하는 UI는 모두 3개입니다. 첫째는 지도를 표시하는 div와 축소와 확대에 대한 button입니다. 즉, UI는 body 부분에 다음 코드와 같습니다.

    

    축소
    확대

ID가 map인 div의 크기를 지정하기 위해 style에 대한 코드를 다음처럼 지정하였습니다.

이 예제는 OpenLayers3와 jQuery를 사용하는데요. 이를 위해 아래의 코드를 통해 css와 js를 가져와 페이지에 포함합니다.

UI와 필요한 js 라이브러리에 대한 준비가 모두 끝났는데요. 이제 코드를 살펴보겠습니다. 배경지도를 준비하고 축소 및 확대 버튼에 대한 이벤트 코드를 지정하는 코드는 아래와 같습니다.

위의 코드를 자세히 설명하면 다음과 같습니다. 먼저 3번 코드에서 ol.Map 객체를 생성하고 있는데요. 생성자의 인자로 지정하는 코드가 4~14번까지입니다. 4번 코드의 layers를 통해 지도를 구성하는 레이어를 배열로 지정할 수 있는데, 여기서는 오픈 스트리트 맵을 위해 기본적으로 제공되는 ol.source.OSM 객체를 생성하여 간단히 레이어를 추가하고 있습니다. 그리고 9번의 target는 지도가 표시되는 div의 ID를 지정합니다. 10~13번 코드는 지도가 화면에 표시되는 중심좌표와 줌 레벨을 지정합니다. 11번의 center를 통해 표시할 지도의 중심 좌표를 지정하는데, ol.proj.fromLonLat 함수를 통해 경위도를 오픈스트리트맵의 좌표계로 간단히 변환할 수 있습니다. 그리고 zoom에 5를 지정하였습니다. 이 zoom 값이 클수록 지도가 확대됩니다. 37번의 코드는 축소 버튼에 대한 클릭 이벤트를 지정하는 코드입니다. 이 클릭 이벤트의 코드 중 38번은 현재 지도의 뷰 상태 객체를 얻어오고, 이 뷰 객체에서 현재의 zoom 값을 얻습니다. 이렇게 얻은 zoom 값에 -1을 한 값을 다시 뷰 객체의 setZoom 함수의 인자로 전달함으로써 지도가 축소되게 합니다. 43번은 지도를 확대하는 버튼에 대한 이벤트 지정 코드입니다.

아래는 위에서 설명한 전체 코드에 대한 다운로드입니다.