leaflet - draw polygon & measure area

지도에서 면적 측정을 하기 위해 직접 사각형을 그려보았다.

지도 세팅, leaflet css, script, 그리기 도구 cdn 추가는 밑의 게시글에서 확인하고 넣으면 된다.

​

https://hhyyyjun.tistory.com/232

leaflet - 그리기 도구 생성하기

 

그리기 도구

// 그리기 도구 추가
//생성된 레이어들을 저장할 곳
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
//그리기 컨트롤러 초기화 및 추가
var drawControl = new L.Control.Draw({
	//컨트롤러 위치
	position : 'topright',
	//그리기 옵션
	draw : {
		//폴리곤 옵션
		polygon : {
			showArea : true
		}
	},
	//편집 옵션
	edit : {
		featureGroup : drawnItems
		//편집 도구 비활성화
		//edit : false
	}
});
console.log(drawControl);
map.addControl(drawControl);

 

레이어 정보 변수

//레이어의 타입 초기화
var type = "";
//레이어 정보
var layer = "";

 

도형이 생성되었을 때

폴리곤의 면적을 출력하기 위해 geodesicArea 함수를 사용하였다.

readableArea 함수를 사용하면 구해진 면적을 헥타르 단위로 변환하여 뒤에 단위를 자동으로 붙여주며 스트링 타입이 된다.

나는 m^2 단위로 표현하기 위해 따로 html 요소를 붙여주어 표현하였다.

//도형이 생성되었을 때
//map.on(L.Draw.Event.CREATED, function (e) {
map.on('draw:created', function (e) {
	   layer = e.layer;
	   drawnItems.addLayer(layer);

		//그리기 도구가 폴리곤이라면
		if(type === 'polygon'){
			//폴리곤의 면적 계산하며, 소수점 1번째 자리까지 출력
			var area = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]).toFixed(1);
			console.log("area : "+area);
			console.log(typeof area)
			//미터 제곱으로 단위 붙여준다.
			area += " m<sup>2</sup>";
			//헥타르 단위로 변환함
// 			var readableArea = L.GeometryUtil.readableArea(area, true);
// 			console.log("readableArea : "+ readableArea);
// 			console.log(typeof readableArea)

			layer.bindTooltip("면적 " + area, {permanent: true, direction: 'center'}).openTooltip();
		}
	});

 

편집하여 범위를 변경한 경우

생성 시와 동일하다.

//편집도구 사용하고 저장 시
map.on('draw:edited', function(e){
	console.log(type);
			
	if(type === 'polygon'){
		console.log("편집 완료 : "+type);	
		//폴리곤의 면적 계산하며, 소수점 3번째 자리까지 출력
		var area = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]).toFixed(1);
		console.log("area : "+area);
		console.log(typeof area)
		//미터 제곱으로 단위 붙여준다.
		area += " m<sup>2</sup>";

		layer.bindTooltip("면적 " + area, {permanent: true, direction: 'center'}).openTooltip();
	}
})

 

결과