📌 Leaflet와 GeoJSON으로 행정구역 지도 만들기

My Pale Blue Dot·2025년 5월 12일

Spring Springboot geojson leafelt 지도 행정구역

SPRING BOOT

목록 보기

16/40

📅 2025-05-12

📝 목표

Leaflet 라이브러리를 사용해 웹 브라우저에 지도를 띄우고
GeoJSON 파일을 시각화하여 대구광역시 행정구역(구/동)을 구분
사용자 클릭 이벤트로 마커 생성, 날씨 API 연동
Mapshaper.org를 사용해 행정구역 데이터 병합(dissolve)까지 수행

✅ Step 1. 사전 준비

1. HTML + JS 파일 만들기

기본 웹 프로젝트 폴더 구조 만들기


📁 project/
└─ index.html
└─ /js/
└─ KoreanTmsProviders.js (Daum 좌표계용)
└─ /geoJson/
└─ daegu.json (행정구역 GeoJSON 파일)

2. 필요한 외부 라이브러리

HTML <head>에 아래 CDN 추가:

<!-- Leaflet -->
<link rel="stylesheet" href="<https://unpkg.com/leaflet@1.9.4/dist/leaflet.css>" />
<script src="<https://unpkg.com/leaflet@1.9.4/dist/leaflet.js>"></script>

<!-- axios -->
<script src="<https://cdnjs.cloudflare.com/ajax/libs/axios/1.9.0/axios.min.js>"></script>

<!-- Daum 지도 좌표계용 플러그인 -->
<script src="/js/KoreanTmsProviders/lib/proj4.js"></script>
<script src="/js/KoreanTmsProviders/lib/proj4leaflet.js"></script>
<script src="/js/KoreanTmsProviders/src/Leaflet.KoreanTmsProviders.js"></script>

✅ Step 2. 지도 띄우기 (Daum 지도)

<div id="map" style="height: 100vh;"></div>

const map = new L.Map('map', {
  center: new L.LatLng(35.829890, 128.532719), // 대구 중심 좌표
  zoom: 8,
  crs: L.Proj.CRS.Daum // Daum 좌표계
});
L.tileLayer.koreaProvider('DaumMap.Street').addTo(map);

✅ Step 3. 클릭 시 마커 + 날씨 API 연동

map.on('click', function(e){
  const lat = e.latlng.lat;
  const lng = e.latlng.lng;

  const marker = L.marker([lat, lng]).addTo(map);

  axios.get(`/open/weather/get/${lat}/${lng}`)
    .then(resp => {
      const content = `
        <div>
          <strong>기상 정보</strong><br/>
          base: ${resp.data.base}<br/>
          cloud: ${resp.data.clouds.all}
        </div>`;
      marker.bindPopup(content);
    });
});

✅ Step 4. GeoJSON 행정구역 데이터 표시

const borderColors = {
  "중구": "red", "동구": "orange", "서구": "yellow",
  "남구": "green", "북구": "blue", "수성구": "navy",
  "달서구": "black", "달성군": "royalblue"
};

axios.get("/geoJson/daegu.json")
  .then(resp => {
    const grouped = {};
    resp.data.features.forEach(f => {
      const key = f.properties.sggnm;
      if (!grouped[key]) grouped[key] = [];
      grouped[key].push(f);
    });

    Object.entries(grouped).forEach(([sggnm, features]) => {
      L.geoJSON(features, {
        style: {
          color: borderColors[sggnm],
          fillColor: borderColors[sggnm],
          fillOpacity: 0.6,
          weight: 2
        },
        onEachFeature: (feature, layer) => {
          const name = feature.properties.adm_nm;
          layer.bindTooltip(name);
          layer.on('click', () => {
            map.fitBounds(layer.getBounds());
            alert(`선택한 행정동: ${name}`);
          });
        }
      }).addTo(map);
    });
  });

✅ Step 5. Mapshaper.org로 GeoJSON 병합

🔹 목적

sggnm(시군구명) 기준으로 여러 Polygon → 하나의 MultiPolygon으로 병합
렌더링 성능 향상 + 시각적 단순화

🔹 절차

https://mapshaper.org 접속
GeoJSON 파일 드래그로 업로드
상단 메뉴 → Console 클릭
명령어 입력:
```
dissolve sggnm
```
결과 확인 후 우측 상단 Export → GeoJSON 저장

💡 옵션: 기존 속성 유지하고 싶다면
dissolve sggnm keep-fields=adm_cd,adm_nm

🔗 참고 자료

Leaflet 공식 문서
Mapshaper.org – GeoJSON 편집 툴
공공데이터포털 – 행정구역, 날씨 API 출처

🔥 마무리 요약

항목	내용
📍 지도 라이브러리	Leaflet + Daum CRS
📍 데이터 형식	GeoJSON (`MultiPolygon`, `properties.sggnm`, `adm_nm`)
📍 주요 기능	지도 + 마커 + 팝업 + 행정구역 색상 시각화
📍 응용	행정동 필터, 통계 시각화, 드릴다운 가능
📍 가공 툴	Mapshaper로 `dissolve`로 병합 및 정리