[javascript] 지도에서 다른 레이어의 투명도 변경하기

22 Nov 2023

javascript

대부분의 웹 지도 API는 투명도 조절과 같은 다양한 조작을 지원합니다. 이번 블로그 포스트에서는 JavaScript를 사용하여 지도에서 다른 레이어의 투명도를 변경하는 방법을 알아보겠습니다.

1. 지도 API 및 레이어 설정

먼저, 사용할 지도 API를 선택하고 설정해야 합니다. 여기서는 Leaflet API를 예시로 사용하겠습니다. Leaflet은 오픈 소스 JavaScript 라이브러리로, 간단한 인터페이스를 제공하기 때문에 사용하기 쉬워 많이 사용됩니다.

<!DOCTYPE html>
<html>
<head>
  <title>지도에서 다른 레이어의 투명도 변경하기</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</head>
<body>
  <div id="map"></div>

  <script>
    // Leaflet 지도 생성
    var map = L.map('map').setView([51.505, -0.09], 13);

    // 배경 타일 레이어
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    // 추가 레이어
    var layer = L.tileLayer('https://URL_TO_YOUR_LAYER', {
      transparent: true,
      opacity: 0.5
    }).addTo(map);
  </script>
</body>
</html>

여기서는 OpenStreetMap의 타일 레이어를 배경으로 사용하고, 사용자 정의 레이어를 추가하였습니다. 이 레이어의 투명도는 opacity 옵션으로 설정하며, 범위는 0에서 1까지의 값을 가질 수 있습니다. 0에 가까울수록 투명하고, 1에 가까울수록 불투명해집니다.

2. 투명도 조절

사용자가 투명도를 조절하기 위한 입력 요소(예: 슬라이더)를 추가해야 합니다. 이 입력 요소의 값에 따라 레이어의 투명도가 변경될 것입니다.

<input type="range" min="0" max="1" step="0.1" value="0.5" id="opacity-slider">

<script>
  // 슬라이더 요소 가져오기
  var slider = document.getElementById("opacity-slider");

  // 슬라이더 값이 변경될 때 호출되는 함수
  slider.oninput = function() {
    // 레이어의 투명도 변경
    layer.setOpacity(this.value);
  };
</script>

슬라이더의 oninput 이벤트를 처리하는 JavaScript 코드에서는, layer.setOpacity() 메소드를 사용하여 사용자 정의 레이어의 투명도를 변경할 수 있습니다. 슬라이더의 값(this.value)은 setOpacity() 메소드의 인자로 전달됩니다.

3. 실행 및 테스트

이제 HTML 파일을 저장하고 웹 브라우저에서 열어 실행해보세요. 슬라이더를 조작하여 레이어의 투명도를 변경할 수 있습니다. 원하는 투명도로 레이어를 조절하여 지도에 원하는 시각 효과를 부여할 수 있습니다.

결론

이번 포스트에서는 JavaScript를 사용하여 지도에서 다른 레이어의 투명도를 변경하는 방법에 대해 알아보았습니다. 이를 통해 지도 애플리케이션에서 다양한 효과를 구현할 수 있습니다. 다른 지도 API에서도 비슷한 방식으로 투명도를 조절할 수 있으므로, 사용하고 있는 API의 공식 문서를 참고하여 자세한 사용법을 확인해보세요.

참고 자료: