# Leaflet vs OpenLayers 차이 정리 + Leaflet 예제

1. 기본 철학

Leaflet

"가볍고 간단"을 목표로 만든 라이브러리
핵심 기능만 제공 (타일맵, 마커, 팝업, GeoJSON 표시 등)
플러그인 생태계가 풍부해서 필요한 기능만 붙이는 방식

OpenLayers

"올인원" GIS 라이브러리
벡터/래스터, 좌표 변환, 스타일링, WMS/WFS 같은 고급 GIS 기능을 기본 내장
기능은 많지만 러닝커브가 있음

2. 성능

Leaflet

가볍고 빠르지만, 대규모 데이터(수만 개 피처)를 다룰 때는 성능 저하가 생김
모바일 최적화가 잘 돼 있음

OpenLayers

복잡한 대용량 데이터도 처리 가능 (수만~수십만 피처)
WebGL 기반 렌더링 지원 → 성능적으로 더 강력

3. 좌표계/투영법

Leaflet

기본이 EPSG:3857(Web Mercator)
다른 좌표계 지원은 제한적 → proj4js 같은 외부 라이브러리 필요

OpenLayers

다양한 좌표계(EPSG:4326, EPSG:5186 등) 지원
투영 변환 기능이 내장

4. 데이터 소스 연동

Leaflet

GeoJSON, TileLayer, WMS 정도 기본 지원
WFS나 복잡한 GIS 표준은 플러그인 필요

OpenLayers

WMS, WFS, WMTS, VectorTiles, GeoJSON, TopoJSON 등 광범위한 포맷 지원
GeoServer 같은 GIS 서버와 바로 붙이기 유리

5. 커스터마이징

Leaflet

CSS/JS로 UI 꾸미기 편리
지도 자체보다는 "마커, 팝업" 같은 단순 기능 위주

OpenLayers

지도 스타일링, 심볼라이징(색상, 투명도, 범례)까지 가능
GIS 분석 기능(버퍼, 교차, 클리핑 등)도 지원

6. 사용 난이도

Leaflet

초심자용으로 최적
"몇 줄 코드"로 지도 띄우고 마커 추가 가능

OpenLayers

문법이 장황하고 러닝커브가 있음
GIS 지식이 있으면 강력하게 활용 가능

Leaflet은 OpenLayers보다 훨씬 코드가 간단하다.

보통 이렇게 3단계로 생각하면 된다: 지도 생성 → 배경지도(Tile Layer) 추가 → WMS나 마커 추가.

OpenLayers와 비교해보면:

Leaflet: L.map, L.tileLayer, L.marker, L.tileLayer.wms 이런 식으로 L.* 함수 위주로 간단하게 붙인다.
OpenLayers: new ol.Map, new ol.layer.Tile, new ol.source.WMS 이런 식으로 객체를 많이 쓴다.

그래서 Leaflet은 진입장벽이 낮고, 간단한 지도 서비스는 금방 만든다.
대신 좌표 변환이나 복잡한 GIS 연산이 필요할 땐 OpenLayers 쪽이 유리하다.

openlayers는 다른 게시물 예제들이 있으니 Leaflet 예제를 적어보려고 한다.

Leaflet 예제

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Leaflet - 서울 지도 예제</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
  <style>
    #map { width: 100%; height: 600px; }
  </style>
</head>
<body>
<div id="map"></div>

<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
  // 1. 지도 생성 (서울 시청 근처)
  const map = L.map('map').setView([37.5665, 126.9780], 13);

  // 2. 배경지도 (OSM)
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; OpenStreetMap'
  }).addTo(map);

  // 3. 마커 추가
  const marker = L.marker([37.5665, 126.9780]).addTo(map);
  marker.bindPopup("서울 시청").openPopup();

  }).addTo(map);
</script>
</body>
</html>

See the Pen Untitled by note (@somieee) on CodePen.

이렇게하면

배경지도는 OSM,
마커는 서울 시청이 지도 위에 얹힌다.

'🖥️ 프론트엔드 > 🌏GIS' 카테고리의 다른 글

# Leaflet으로 서울시만 보이게 하는 지도 마스크 구현하기 (플러그인X) (4)	2025.10.16
# GIS시스템, Geoserver - WMS와 WFS의 차이점 (1)	2025.09.19
# OpenLayers지도 띄워보기 (0)	2025.07.23
# geoserver WFS 큰숫자 문자열로 안넘어오는 문제 해결 (1)	2025.04.28
# geoserver 새 레이어 추가 (SQL명령문 방식) (0)	2025.04.07

📒솜이노트

# Leaflet vs OpenLayers 차이 정리 + Leaflet 예제

1. 기본 철학

Leaflet

OpenLayers

2. 성능

3. 좌표계/투영법

4. 데이터 소스 연동

5. 커스터마이징

6. 사용 난이도

OpenLayers와 비교해보면:

Leaflet 예제

'🖥️ 프론트엔드 > 🌏GIS' 카테고리의 다른 글

티스토리툴바

« 2025/12 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

1. 기본 철학

Leaflet

OpenLayers

2. 성능

3. 좌표계/투영법

4. 데이터 소스 연동

5. 커스터마이징

6. 사용 난이도

OpenLayers와 비교해보면:

Leaflet 예제

'🖥️ 프론트엔드 > 🌏GIS' 카테고리의 다른 글

검색

티스토리툴바