카카오 맵 API 사용하여 행정구역 영역 설정하기

저도 봐도 잘 모르긴 하는데 

 

그냥 .. 따라 해보세여.. ㅋㅋㅋ

 

소스도 따로 추가해드립니다 . 이건 전라남도 기준으로 만들었어요

 

 

 

json.zip

0.31MB

@Controller에서는 

String url = "all"	;
		if(area.equals("영광")) {url="younGwang";}
		else if(area.equals("장성")) {url="jangsung";}
		else if(area.equals("담양")) {url="damyang";}
		else if(area.equals("곡성")) {url="gucksung";}
		else if(area.equals("구례")) {url="gure";}
		else if(area.equals("광양")) {url="gangyong";}
		else if(area.equals("여수")) {url="yeosu";}
		else if(area.equals("순천")) {url="sunchun";}
		else if(area.equals("고흥")) {url="goheong";}
		else if(area.equals("보성")) {url="bosung";}
		else if(area.equals("화순")) {url="hwasun";}
		else if(area.equals("나주")) {url="naju";}
		else if(area.equals("장흥")) {url="jangheong";}
		else if(area.equals("영광")) {url="youngam";}
		else if(area.equals("광진")) {url="gangjin";}
		else if(area.equals("해남")) {url="henam";}
		else if(area.equals("진도")) {url="jindo";}
		else if(area.equals("완도")) {url="yundo";}
		else if(area.equals("신안")) {url="sinan";}
		else if(area.equals("목포")) {url="mokpo";}
		else if(area.equals("무안")) {url="muan";}
		else if(area.equals("함평")) {url="hampung";}
		else {
			url = "all"	;
		}
        
        
        mv.addObject("url",url+".geojson");
        
  

이런식으로 보내시고

 

jsp에서는

 

var x = "";
var y = "";

var checking = false;


var paths = new Array(); //path와 여러 hole을 넣기 위함
var polygons=[];                //function 안 쪽에 지역변수로 넣으니깐 폴리곤 하나 생성할 때마다 배열이 비어서 클릭했을 때 전체를 못 없애줌.  그래서 전역변수로 만듦.

var polygon

var path = [
	new kakao.maps.LatLng( 44.33512915664864, 115.0587723662637 ),
	new kakao.maps.LatLng(44.18587165301932, 139.95634144177177),
	new kakao.maps.LatLng( 31.038700138229466, 137.80185030986112),
	new kakao.maps.LatLng(31.14848562572545, 117.09878158324054)
];
paths.push(path);
var points = [];        //중심좌표 구하기 위한 지역구 좌표들



var mapContainer = document.getElementById('map'),
mapOption = { 
	center: new kakao.maps.LatLng(35.160120436910596, 126.85143288281274), // 지도의 중심좌표
	level: 9 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption);    


for(var i=0;i<xLocation.length;i++){
	marker(xLocation[i],yLocation[i],types[i]);
}

var geojsonurl = "/resources/json/${url}";
//행정구역 구분
$.getJSON(geojsonurl, function(geojson) {

	var data = geojson.features;
    var coordinates = [];    //좌표 저장할 배열
    var name = '';            //행정 구 이름
 
    $.each(data, function(index, val) {
 
        coordinates = val.geometry.coordinates;
		name = val.properties.SIG_ENG_NM;
		
		if(coordinates.length > 1){
			for(var i=0;i<coordinates.length;i++){
				var templist = [];
				templist.push(coordinates[i])
				setting(templist, i);
			} 
			displayArea(paths);
		}else{
			setting(coordinates, 0);
			displayArea(paths);
		}
    })
})

function setting(a, num){
	if(num == 0){
		var hole = [];
	}else{
		eval("var hole"+num+"=[];");
	}
	
    $.each(a[0], function(index, coordinate) {        //console.log(coordinates)를 확인해보면 보면 [0]번째에 배열이 주로 저장이 됨.  그래서 [0]번째 배열에서 꺼내줌.
    	var point = new Object(); 
        point.x = coordinate[1];
        point.y = coordinate[0];
        if(num == 0){
        	hole.push(new daum.maps.LatLng(coordinate[1], coordinate[0]));            //new daum.maps.LatLng가 없으면 인식을 못해서 path 배열에 추가
        	points.push(point);
    	}else{
    		eval("hole"+num+".push(new daum.maps.LatLng(coordinate[1], coordinate[0]));");
    	}
    })
    if(num == 0){
    	paths.push(hole);	
	}else{
		eval("paths.push(hole"+num+");");
	}
}


//행정구역 폴리곤
function displayArea(paths) {
    // 다각형을 생성합니다 
    polygon = new daum.maps.Polygon({
        map : map, // 다각형을 표시할 지도 객체
        path : paths,
        strokeWeight : 4,
        strokeColor : '#f3bb08',
        strokeOpacity : 2,
        fillColor :'#9E9E9E',
        fillOpacity : 0.7
    });
    
    polygons.push(polygon);            //폴리곤 제거하기 위한 배열
 	
	var moveLatLon = centroid(points);
	
    kakao.maps.event.addListener(polygon, 'click', function(mouseEvent) {
        checking = true;
    });
	
    map.setCenter(moveLatLon);   
}
	

function centroid (points) {
    var i, j, len, p1, p2, f, area, x, y;
 
    area = x = y = 0;
 
    for (i = 0, len = points.length, j = len - 1; i < len; j = i++) {
            p1 = points[i];
            p2 = points[j];
 
            f = p1.y * p2.x - p2.y * p1.x;
            x += (p1.x + p2.x) * f;
            y += (p1.y + p2.y) * f;
            area += f * 3;
    }
    return new daum.maps.LatLng(x/area, y/area);
}

javascript에다가 넣는거 아시죠?

 

저렇게 하면 아마

 

이렇게 출력 됩니다 ㅎㅎ 

 

안되면 댓글 달아주세요.. ㅎㅎㅎ...