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

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

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

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

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

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

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

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

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

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다