반응형
준비물 : shp -> geojson으로 변환한 결과물
이제 업로드하신 GeoJSON 파일을 Leaflet을 사용하여 웹 페이지에 표시하는 방법을 안내드리겠습니다. 아래의 HTML 코드를 사용하여 GeoJSON 데이터를 Leaflet 지도에 표시할 수 있습니다.
HTML 코드 생성
아래의 HTML 코드를 index.html 파일로 저장한 후, 브라우저에서 실행하면 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Leaflet Map with GeoJSON</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<style>
#map { height: 600px; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.ajax/2.1.0/leaflet.ajax.min.js"></script>
<script>
// 지도를 설정합니다.
var map = L.map('map').setView([37.5, 127.5], 11); // 초기 중심 좌표 및 줌 레벨 설정
// OSM 타일 레이어 추가
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© OpenStreetMap'
}).addTo(map);
// GeoJSON 파일 로드 및 지도에 추가
var geojsonLayer = new L.GeoJSON.AJAX("hs.geojson");
geojsonLayer.addTo(map);
</script>
</body>
</html>파일 배치
hs.geojson파일과 위의 HTML 파일(index.html)을 같은 디렉토리에 저장하세요.index.html파일을 더블클릭하거나 브라우저에서 열면 GeoJSON 데이터를 포함한 지도가 표시됩니다.
이렇게 하면 hs.geojson 파일이 포함된 지도를 Leaflet을 사용하여 웹에서 볼 수 있습니다.
혹시 코드에 대한 설명이나 추가적인 기능 구현이 필요하시면 알려주세요!
반응형
'🖥️ IT, 컴퓨터 > 👩🏻💻 IT' 카테고리의 다른 글
| [IT] 오픽 성적표 프린트 문서출력 에러 해결법 :: 지원불가 / 등록되지 않은 프린터 (0) | 2024.09.06 |
|---|---|
| [IT] 네이버 블로그/스마트플레이스 오류 제보 사이트 (1) | 2024.09.04 |
| [생산성] CV 편하게 만드는 웹사이트 :: flowcv.com (0) | 2024.08.17 |
| [IT] 공공 데이터 API로 데이터 구득하는 꿀팁 (Postman 활용) (0) | 2024.08.14 |
| [IT] 구글어스 프로 다운받는 곳 링크 (0) | 2024.08.14 |
댓글