Leaflet과 Turf.js를 활용한 폴리곤 차집합 구현하기

오늘은 Leaflet 지도 라이브러리와 Turf.js를 사용하여 폴리곤 간의 차집합(Difference)을 구현하는 방법을 알아보겠습니다.

1. 기본 지도 설정

먼저 호주 중심부를 보여주는 지도를 초기화합니다:

var map = L.map("map").setView([-26, 128], 5);

L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
    attribution: '© Carto Maps contributors'
}).addTo(map);

여기서 지도의 중심점을 남위 26도, 동경 128도로 설정하고 줌 레벨은 5로 지정했습니다. 베이스맵으로는 Carto의 라이트 스타일을 사용했습니다.

2. 폴리곤 정의

세 개의 폴리곤을 정의합니다:

1. polygon1: 기준이 되는 메인 폴리곤
2. polygon2: 차집합에서 제외할 첫 번째 폴리곤
3. polygon3: 차집합에서 제외할 두 번째 폴리곤

각 폴리곤은 좌표 배열로 정의되며, fill과 fill-opacity 속성을 가집니다.

3. 차집합 연산

Turf.js의 difference 함수를 사용하여 폴리곤들의 차집합을 계산합니다:

var difference = turf.difference(turf.featureCollection([polygon1, polygon2, polygon3]));

4. 결과 시각화

마지막으로 모든 폴리곤을 지도에 표시합니다:

L.geoJson(polygon1, {fillColor: '#ff0'}).addTo(map); // 노란색
L.geoJson(polygon3, {fillColor: '#0f0'}).addTo(map); // 초록색
L.geoJson(polygon2, {fillColor: '#00f'}).addTo(map); // 파란색
L.geoJson(difference, {fillColor: '#f00'}).addTo(map); // 빨간색

각 폴리곤은 서로 다른 색상으로 표시되어 차집합의 결과를 시각적으로 확인할 수 있습니다.

마치며

이 예제를 통해 Leaflet과 Turf.js를 사용하여 지도 상에서 폴리곤 간의 차집합을 구현하는 방법을 살펴보았습니다. 이러한 기능은 지리적 영역 분석이나 공간 데이터 처리가 필요한 웹 매핑 애플리케이션에서 유용하게 활용될 수 있습니다.

 

전체 소스는 아래 파일을 참고하세요.

도형diff연산.zip

0.00MB