코딩 강좌/웹 지도 만들기
폴리곤 내부 일정간격 안에 또 다른 폴리곤 만들기
요긴소프트
2024. 11. 13. 07:29
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
반응형