GIS Developer

리플릿 강좌 1에서는 배경지도로 타일맵 활용하기에 대해 정리했습니다. 이 번에는 강좌 1에서 작성한 코드에 추가하여 그래픽 객체를 지도에 올리는 내용을 정리하겠습니다. 이 강좌 진행을 위해서는 강좌 1에 작성한 코드가 필요하니 가져오시기 바람 바람 빠라람~ 아래의 화면은 이 글에서 작성한 코드의 최종 결과입니다.

지도에 올릴 그래픽 객체로써, 이 글에서는 포인트 형태의 마커, 원, 폴리곤을 사용해 보겠습니다. 먼저 마커입니다.

강좌 1의 코드를 보면 onLoad 함수가 있으며, 이 함수의 마지막에 다음 코드를 추가합니다.

var marker = L.marker([51.5, -0.09]).addTo(map);

위의 함수를 통해 경위도 좌표 (51.5, -0.09)에 마커가 추가됩니다.

다음은 원입니다. 아래의 코드를 통해 경위도 좌표 (51.508, -0.11)에 반지름 500m인 원이 추가됩니다.

var circle = L.circle([51.508, -0.11], 500,
    {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
}).addTo(map);

위의 코드를 보면 2번 줄에 추가적으로 원에 대한 그리기 심벌로써 외곽선 색상(red)과 채움색(#f03)과 투명도(0.5)를 지정하는 것을 볼 수 있습니다.

다음은 폴리곤 그래픽 요소를 추가해 보겠습니다.

var polygon = L.polygon(
    [
        [51.509, -0.08], [51.503, -0.06], [51.51, -0.047]
    ]
).addTo(map);

위의 코드를 보면 폴리곤을 구성하는 경위도 좌표를 배열의 배열 형태로 지정하고 있습니다. 3개의 좌표를 지정하고 있으므로 삼각형이 표시될 것입니다.

클라이언트 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개의 인자를 받습니다. 첫번째는 경위도 좌표에 대한 배열값이고 두번째는 줌레벨 값입니다. 이제 실행해 보면 아래와 같은 결과를 볼 수 있습니다.