728x90
안녕하세요,
오늘은 OpenStreetMap 지도를 출력하여 경로에 선을 그려보도록 하겠습니다.
선을 그릴 경로 정보는 선을 이을 각 지점의 위도, 경도가 필요하며, 경로를 나타낼 위도, 경도의 배열을 따라 선을 출력해보겠습니다.
위도, 경도 배열에 따라 선을 그리는 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet OpenStreetMap 경로 출력 예제</title>
<style>
#map { height: 500px; width: 100%; }
</style>
</head>
<body>
<div id="map"></div> <!-- 지도가 표시될 요소 -->
<script>
// Leaflet를 사용한 지도 설정
const map = L.map('map').setView([37.5665, 126.9780], 13); // 서울 위치 및 줌 설정
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { // OSM 타일 추가
}).addTo(map);
// 선을 그릴 좌표 배열
const latlngs = [
[37.483759593241956, 126.97215914726259], [37.483636145811346, 126.97207063436511],
[37.48356377998132, 126.97198748588563], [37.483470129979594, 126.97188824415208],
[37.48337860827358, 126.97179436683656], [37.483278572792294, 126.97169512510303],
[37.48338712192539, 126.97145640850069], [37.48352334022225, 126.97115600109102],
[37.48365955827075, 126.97089314460756], [37.48377874885947, 126.97064369916919],
[37.483848986081625, 126.9705042243004], [37.48396391957549, 126.97061955928804],
[37.48408736646454, 126.97074830532075], [37.4842320970402, 126.97087168693544],
[37.48434702994469,126.97099775075915], [37.48441939501606,126.97105944156648],
[37.484323617700696, 126.9712257385254], [37.484246995760024, 126.97137057781221],
[37.48417037374073, 126.97151273489], [37.484095880035554, 126.97165489196779],
[37.4840064874913,126.97178900241853], [37.48394263560846,126.97189897298814],
[37.48384685768194, 126.97201967239381],[37.483763850046266, 126.97214573621753]
];
// 폴리라인을 생성하고 지도에 추가
const polyline = L.polyline(latlngs, {color: 'blue'}).addTo(map);
// 폴리라인이 포함된 영역으로 지도의 줌 및 중심 이동
map.fitBounds(polyline.getBounds());
</script>
</body>
</html>
시연 영상입니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] OpenStreetMap 지도 위에 경로가 그려지는 애니메이션 출력 (0) | 2024.11.13 |
|---|---|
| [JavaScript] 웹에서 동작하는 계산기 앱 만들기 (0) | 2024.11.10 |
| [JavaScript] 세션 스토리지 사용해 간단한 퀴즈 상태 저장하기 (2) | 2024.11.06 |
| [JavaScript] OpenStreetMap 지도 출력하여 특정 위치에 마커 찍기 (2) | 2024.11.03 |
| [JavaScript] 로컬스토리지 사용해 즐겨찾는 링크 저장하기 (0) | 2024.10.31 |