[javascript] 지도에 라인 추가하기

22 Nov 2023

javascript

여러분이 웹 애플리케이션에 지도를 통합하고 싶다면, 지도에 라인을 추가할 수도 있습니다. 이를 통해 경로, 통신 라인, 거리 등을 표시할 수 있습니다. 이번 글에서는 JavaScript를 사용하여 지도에 라인을 추가하는 방법에 대해 알아보겠습니다.

1. 라이브러리 설치

라인을 지도에 추가하기 위해서는 먼저 지도 API를 사용할 수 있는 라이브러리를 설치해야 합니다. 가장 인기 있는 라이브러리 중 하나인 Leaflet을 사용해 보겠습니다. 아래 명령어를 사용하여 Leaflet을 설치합니다.

npm install leaflet

2. HTML 구조 설정

다음으로는 HTML 구조를 설정해야 합니다. 아래와 같이 간단한 구조를 만들어 줍니다.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <style>
      #map {
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
      // JavaScript 코드 작성
    </script>
  </body>
</html>

3. JavaScript 코드 작성

이제 JavaScript 코드를 작성해서 지도에 라인을 추가해보겠습니다. 라인을 추가하기 위해서는 먼저 지도를 생성하고, 라인을 그릴 좌표를 설정해야 합니다. 아래 예제를 참고해보세요.

var map = L.map('map').setView([37.5665, 126.9780], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
}).addTo(map);

var linePoints = [
  [37.5665, 126.9780],
  [37.5659, 126.9785],
  [37.5660, 126.9792],
  [37.5665, 126.9798]
];

var polyline = L.polyline(linePoints).addTo(map);

위 코드에서 map 변수를 사용하여 지도 객체를 생성하고, L.tileLayer를 사용하여 타일 레이어를 추가합니다. 그리고 linePoints 배열에 라인을 그릴 좌표들을 설정한 후, L.polyline을 사용하여 라인을 생성하고 지도에 추가합니다.

4. 결과 확인

이제 HTML 파일을 브라우저에서 열어보면, 지도에 설정한 라인이 그려져 있는 것을 확인할 수 있습니다. 마우스로 지도를 이동하거나 확대/축소하여 라인이 실시간으로 변화하는지 확인해보세요.

이렇게 JavaScript를 사용하여 지도에 라인을 추가할 수 있습니다. 다양한 기능과 옵션을 설정하면서 원하는 형태의 라인을 구현할 수 있습니다. 자세한 내용은 해당 라이브러리의 공식 문서를 참고하시면 도움이 될 것입니다.