Leaflet 지도 기본 활용 가이드

Leaflet 지도 기본 활용

일、기본 소개

Leaflet은 인터랙티브 지도 애플리케이션을 구축하기 위한 인기 있는 오픈소스 JavaScript 라이브러리입니다. 간결한 API, 가벼운 무게와 높은 성능으로 유명하며, 지리 정보 시각화, 위치 추적 등 다양한 지리 정보 표현 시나리오에 웹페이지에 지도 기능을 통합하기 쉽습니다.

二、주요 기능 요약

1. 지도 로딩

  • 기능 설명: OpenStreetMap과 같은 오픈소스 지도부터 Mapbox와 같은 상업적 지도까지 다양한 유형의 지도 타일을 배경 지도로 로드할 수 있습니다.
  • 실제 적용: 예를 들어, 여행 웹사이트에서 목적지 도시의 지도를 사용자에게 표시할 수 있습니다. 다음 코드는 OpenStreetMap을 배경으로 로드합니다:
// 지도 컨테이너 생성
var myMap = L.map('mapContainer').setView([35.6812, 139.7671], 13);
// OpenStreetMap 타일 레이어 로드
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   
   
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(myMap);

이 코드는 먼저 지도 컨테이너를 생성하고, 초기 중심 좌표(위도 35.6812, 경도 139.7671)와 확대 레벨 13을 설정합니다. 그 다음 OpenStreetMap의 타일 레이어를 로드하여 지도에 추가합니다.

2. 마커 추가

  • 기능 설명: 간단한 코드를 통해 지도에 마커(Marker)를 추가할 수 있으며, 마커의 아이콘, 위치, 팝업 정보 등을 사용자 정의할 수 있습니다.
  • 실제 적용: 식당 추천 웹사이트에서 각 식당을 지도에 마커로 표시할 수 있습니다. 식당 데이터가 이름, 위치(위도/경도), 소개를 포함하는 배열이라면 다음과 같이 코드를 작성할 수 있습니다:
var diningLocations = [
    {
   
   name: "한식당 A", lat: 37.5665, lng: 126.9780, description: "전통 한식 제공"},
    {
   
   name: "양식당 B", lat: 37.5723, lng: 126.9882, description: "미식 스테이크 전문"}
];

diningLocations.forEach(function(location) {
   
   
    var restaurantMarker = L.marker([location.lat, location.lng]).addTo(myMap);
    restaurantMarker.bindPopup("<b>" + location.name + "</b><br>" + location.description);
});

여기서는 식당 데이터 배열을 순회하여 각 식당에 대한 마커를 생성하고 지도에 추가하며, 팝업 상자를 바인딩합니다. 사용자가 마커를 클릭하면 팝업 상자에 식당 이름과 소개가 표시됩니다.

3. 레이어 제어

  • 기능 설명: 지도의 여러 레이어를 관리할 수 있으며, 추가, 제거, 표시 및 숨김 등의 작업을 통해 사용자가 필요에 따라 다양한 지리 정보를 확인할 수 있습니다.
  • 실제 적용: 도시 계획 애플리케이션에서 기본 지형 레이어, 교통 레이어, 건물 레이어가 있습니다. 다음과 같이 레이어를 제어할 수 있습니다:
// 기본 지형 레이어 로드
var terrainLayer = L.tileLayer('https://{s}.tile.example.com/terrain/{z}/{x}/{y}.png', {
   
   
    attribution: '지형 레이어 출처'
}).addTo(myMap);

// 교통 레이어 로드
var transitLayer = L.tileLayer('https://{s}.tile.example.com/transit/{z}/{x}/{y}.png', {
   
   
    attribution: '교통 레이어 출처'
});

// 건물 레이어 로드
var structureLayer = L.tileLayer('https://{s}.tile.example.com/structures/{z}/{x}/{y}.png', {
   
   
    attribution: '건물 레이어 출처'
});

// 레이어 제어 객체 생성 및 레이어 추가
var layerController = L.control.layers({
   
   
    "기본 지형": terrainLayer
}, {
   
   
    "교통 정보": transitLayer,
    "건물 정보": structureLayer
}).addTo(myMap);

이 예제에서는 기본 지형, 교통, 건물 세 가지 레이어를 생성했습니다. L.control.layers를 사용하여 레이어 제어 객체를 만들고 교통 및 건물 레이어를 추가했습니다. 사용자는 인터페이스의 레이어 제어 부품을 통해 교통 및 건물 레이어의 표시 여부를 선택할 수 있습니다.

4. 도형 그리기

  • 기능 설명: 지도에 점, 선, 다각형 등 다양한 기하 도형을 그릴 수 있으며, 그린 도형을 편집하고 속성을 설정할 수 있습니다.
  • 실제 적용: 토지 측정 애플리케이션에서 사용자가 지도에 토지 경계를 그릴 수 있습니다. 코드는 다음과 같습니다:
// 다각형 그리기 기능 활성화
var drawnShapes = new L.FeatureGroup();
myMap.addLayer(drawnShapes);
var drawController = new L.Control.Draw({
   
   
    edit: {
   
   
        featureGroup: drawnShapes
    },
    draw: {
   
   
        polygon: true,
        polyline: true,
        rectangle: true,
        circle: true
    }
});
myMap.addControl(drawController);

// 그리기 완료 이벤트 리스너
myMap.on('draw:created', function (event) {
   
   
    var shapeLayer = event.layer;
    drawnShapes.addLayer(shapeLayer);
    // 여기서 그린 도형의 좌표 정보를 가져와 후속 처리를 할 수 있습니다
});

이 코드는 지도에 다각형을 그리는 기능을 활성화하고, 그린 도형을 저장하기 위해 FeatureGroup을 생성합니다. 사용자가 다각형을 그리면 해당 도형을 FeatureGroup에 추가하고, 토지 면적 계산 등 후속 처리를 위해 도형의 좌표 정보를 가져올 수 있습니다.

5. 데이터 집계

  • 기능 설명: 지도의 대량 지점 데이터를 집계하여 시각적 혼란을 줄이며, 일정한 거리나 규칙에 따라 여러 지점을 하나의 표시 요소로 합치고 집계된 정보를 표시합니다.
  • 실제 적용: 인구 밀도 표시 애플리케이션에서 대량의 인구 분포 지점 데이터가 있습니다. 다음과 같이 특정 지리적 영역(예: 동네) 단위로 집계할 수 있습니다:
// 인구 분포 지점 배열 points가 있다고 가정 (각 지점은 위치(위도/경도)와 인구 수 속성을 가짐)
var populationHexbin = L.hexbinLayer(points, {
   
   
    radius: 150, // 집반경 (단위는 지도 투영에 따라 다름)
    valueFn: function(point) {
   
    return point.population; }, // 집계 지점의 인구 수를 집계값으로 사용
    tooltipFn: function(hexagon) {
   
    return "인구 수: " + hexagon.length; } // 집계 후 툴팁 정보
}).addTo(myMap);

여기서 L.hexbinLayer 함수를 사용하여 인구 분포 지점을 집계합니다. 반경 범위 내의 지점을 하나의 육각형으로 집계하고 인구 수를 집계값으로 사용하며, 사용자가 마우스를 집계된 육각형 위로 가져가면 인구 수 관련 정보가 표시되도록 툴팁을 설정합니다.

6. 특수 효과

  • 기능 설명: 지도 또는 지도 요소에 그림자, 발광, 애니메이션 등 다양한 특수 효과를 추가하여 지도의 시각적 효과와 상호작용성을 향상시킵니다.
  • 실제 적용: 야경 지도 애플리케이션에서 도시 건물 레이어에 발광 효과를 추가하여 건물을 더 입체적으로 보이게 합니다. 건물 레이어가 사용자 정의 벡터 레이어 buildingVectorLayer라고 가정하면:
// 건물 레이어에 발광 효과 추가 (타사 플러그인이나 사용자 정의 CSS 스타일 필요)
buildingVectorLayer.setStyle({
   
   
    'fill-opacity': 0.7,
    'stroke': 'yellow',
    'stroke-width': 3,
    'box-shadow': '0 0 15px yellow' // 발광 효과 CSS 스타일 추가
});

건물 레이어의 스타일을 설정하여 발광 효과를 추가하고 지도에서 더 눈에 띄게 만들어 야경의 시각적 효과를 연출합니다. 동시에 다양한 시나리오와 요구에 따라 지도 확대/축소 시의 부드러운 전환 애니메이션과 같은 다른 유형의 효과를 추가할 수 있습니다.

실제 적용 예시

Leaflet 지도 로딩 기능에 대한 몇 가지 적용 예시는 다음과 같습니다:

1. 여러 출처의 지도 레이어 로드 및 전환


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet 다중 지도 레이어 예제</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <style>
        #mapContainer {
     
     
            height: 500px;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="mapContainer"></div>
    <script>
        var map = L.map('mapContainer').setView([37.5665, 126.9780], 12);

        // OpenStreetMap 레이어
        var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     
     
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        });

태그: leaflet 지도-라이브러리 웹-지도 자바스크립트-지도

7월 1일 16:30에 게시됨

인기 태그

©2026 괴물 클럽