[javascript] 지도에서 취소선 그리기

22 Nov 2023

javascript

일반적으로 지도 애플리케이션에서 취소선(cross line)이 필요한 경우는 많이 있습니다. 주로 두 위치 사이의 거리를 보여줄 때 사용되며, 사용자에게 시각적인 표시를 제공해줍니다. 이 문서에서는 JavaScript를 사용하여 지도에서 취소선을 그리는 방법을 설명하겠습니다.

Leaflet 라이브러리 사용하기

Leaflet은 일반적으로 웹 기반 지도 애플리케이션에서 사용되는 오픈 소스 지도 라이브러리입니다. 이 라이브러리를 사용하면 간단하게 지도에 취소선을 그릴 수 있습니다.

1. Leaflet 라이브러리 추가하기

먼저 HTML 파일의 <head> 부분에 Leaflet 라이브러리를 추가합니다.

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.7.1/leaflet.css" />
    <script src="https://cdn.jsdelivr.net/leaflet/1.7.1/leaflet.js"></script>
</head>

2. 지도 생성하기

<div id="map" style="height: 400px;"></div>

var map = L.map('map').setView([37.5665, 126.9780], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
}).addTo(map);

3. 취소선 그리기

var coordinates = [
    [37.5665, 126.9780],
    [37.5653, 126.9777]
];

L.polyline(coordinates, {dashArray: "5, 5", color: 'red'}).addTo(map);

위의 코드에서 coordinates 배열에서 지정한 두 좌표 사이에 취소선을 그립니다. dashArray: "5, 5" 옵션을 사용하여 점선으로 표시되도록 설정하였으며, color: 'red' 옵션을 사용하여 취소선의 색상을 지정하였습니다.

마무리

Leaflet을 사용하여 JavaScript로 지도에서 취소선을 그릴 수 있습니다. 위의 예제 코드를 참고하여 자신의 지도 애플리케이션에 적용해보세요. 추가적인 정보는 Leaflet 공식 홈페이지를 참고하시기 바랍니다.