지도 위에 경로를 그리고 회전시키는 웹 앱 만들기

이번 포스팅에서는 지도 위에 경로를 그리는 간단한 웹 애플리케이션을 만들어보겠습니다. 이 프로젝트에서는 지도를 설정하고, 경로를 그리고, 슬라이더를 통해 경로를 회전시키는 기능을 구현할 것입니다. 자, 시작해볼까요?

1. 지도 설정하기
먼저, 지도를 화면에 띄우는 방법을 알아보겠습니다. 우리는 Leaflet이라는 라이브러리를 사용할 것입니다. 아래 코드는 지도를 생성하고, 초기 위치를 설정합니다.

var map = L.map("map").setView([37.393667, 126.95737], 15);

여기서 [37.393667, 126.95737]는 서울 근처의 특정 좌표입니다. 숫자 15는 확대 수준을 나타냅니다. 숫자가 클수록 더 자세히 볼 수 있습니다.

2. 지도 배경 설정
다음으로, 지도의 배경을 설정해 보겠습니다. 인터넷에서 가져온 타일 이미지를 활용하여 지도에 배경을 입힙니다.

L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://carto.com/">Carto Maps</a> contributors'
}).addTo(map);

이 코드는 Carto의 타일 이미지를 사용하여 지도를 꾸며줍니다.

3. 경로 그리기
이제 지도 위에 경로를 그려볼까요? 경로 정보는 JSON 형식으로 준비되어 있습니다.

const routePath = '{"type":"Feature","properties":{},"geometry":{"type":"LineString","coordinates":[...]}';
const jsonObj = JSON.parse(routePath);

L.geoJson(jsonObj).addTo(map);
JSON 데이터를 통해 여러 좌표를 포함한 경로를 지도 위에 선으로 그립니다.

4. 슬라이더로 경로 회전하기
우리는 HTML에 슬라이더를 추가하여 경로를 회전시킬 수 있습니다. 슬라이더를 움직이면 경로가 회전하게 됩니다.

const slider = document.getElementById('customSlider');
const output = document.getElementById('sliderValue');

slider.oninput = function() {
    let value = (this.value / 10).toFixed(1);
    output.innerHTML = value;
    const rotObj = turf.transformRotate(jsonObj, parseFloat(value), {units: "kilometers"});
    
    if (rotLayer !== undefined) { 
        map.eachLayer(function(layer){
            if(layer.myTag && layer.myTag === 'previousLayer')
                rotLayer.removeLayer(layer);
        });
    }

    if (rotObj !== undefined) {
        rotLayer = L.geoJson(rotObj, {
            color: 'red',
            onEachFeature: function (feature, layer) {layer.myTag = 'previousLayer';},
        });
    }

    rotLayer.addTo(map);
}

이 코드는 슬라이더를 움직일 때마다 실행됩니다. turf.js 라이브러리를 사용하여 경로를 회전시키고, 회전된 경로는 빨간색으로 표시됩니다.

 

마무리
이렇게 해서 지도를 활용한 간단한 웹 애플리케이션을 만들어보았습니다. 슬라이더로 경로를 회전시켜보면서 인터랙티브한 기능을 체험해 보세요. 다음에도 흥미로운 프로젝트로 찾아뵙겠습니다!

 

전체 코드는 다음 파일을 참고하세요.

경로회전.zip

0.00MB