코딩 강좌/웹 지도 만들기

폴리곤 내부 일정간격 안에 또 다른 폴리곤 만들기

요긴소프트 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);
  • 원본 다각형: 빨간색
  • 외부 버퍼: 초록색
  • 내부 버퍼: 파란색

이 코드를 실행하면 호주 지도 위에 중첩된 세 개의 다각형이 표시되며, 각각 다른 색상으로 구분됩니다. 이러한 버퍼 연산은 지리적 분석이나 영역 계산에 유용하게 사용될 수 있습니다.

 

전체 코드는 아래 파일을 참고하세요.

폴리곤내부로1m축소.zip
0.00MB

728x90
반응형