Leaflet 강좌 ㅡ 2. 그래픽 객체를 지도에 올리기

리플릿 강좌 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개의 좌표를 지정하고 있으므로 삼각형이 표시될 것입니다.

답글 남기기 응답 취소