728x90
반응형
아래 화면은 Leaflet.js와 Turf.js 라이브러리를 사용하여 대화형 지도를 생성하고 다각형 버퍼 연산을 수행하는 예제입니다.
코드를 단계별로 설명하겠습니다:
1. 지도 초기화
var map = L.map("map").setView([-26, 128], 5);
- 호주 중심부 근처(-26° 위도, 128° 경도)에 지도를 생성
- 줌 레벨은 5로 설정
2. 지도 타일 레이어 추가
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {...})
- Carto의 밝은 색상 지도 타일을 사용
- 지도 데이터 출처 표시
3. 기본 다각형 생성
var polygon = turf.polygon([...])
- 호주 내부에 직사각형 모양의 다각형을 생성
- 좌표점들을 시계방향으로 연결하여 닫힌 다각형 형성
- 파란색 채우기와 0.1 투명도 설정
4. 버퍼 연산
var polygon2 = turf.buffer(polygon, 10, {units: "kilometers"})
var polygon3 = turf.buffer(polygon, -50, {units: "kilometers"})
- polygon2: 원본 다각형에서 외부로 10km 버퍼 생성
- polygon3: 원본 다각형에서 내부로 50km 버퍼 생성 (음수 값 사용)
5. 지도에 다각형 표시
L.geoJson(polygon, {fillColor:'#f00'}).addTo(map);
L.geoJson(polygon2, {fillColor:'#0f0'}).addTo(map);
L.geoJson(polygon3, {fillColor:'#00f'}).addTo(map);
- 원본 다각형: 빨간색
- 외부 버퍼: 초록색
- 내부 버퍼: 파란색
이 코드를 실행하면 호주 지도 위에 중첩된 세 개의 다각형이 표시되며, 각각 다른 색상으로 구분됩니다. 이러한 버퍼 연산은 지리적 분석이나 영역 계산에 유용하게 사용될 수 있습니다.
전체 코드는 아래 파일을 참고하세요.
728x90
반응형
'코딩 강좌 > 웹 지도 만들기' 카테고리의 다른 글
TerriaJS로 만드는 강력한 웹 기반 공간정보 플랫폼 (1) | 2025.02.04 |
---|---|
자체 호스팅 LLM을 이용한 자연어 검색 질의 (0) | 2025.02.04 |
Leaflet과 Turf.js를 활용한 다각형 버퍼 및 등간격 포인트 생성하기 (1) | 2024.11.07 |
Leaflet과 Turf.js를 활용한 폴리곤 차집합 구현하기 (1) | 2024.11.06 |
지도 위에 경로를 그리고 회전시키는 웹 앱 만들기 (0) | 2024.11.05 |