[Javascript] 다음 지도 API로 네이버 부동산 지도 따라하기 - 3. Polygon 생성하기

geojson에 있는 내용물을 본격적으로 다음 지도에 올려봅시다. 

다음 지도 API의 Polygon 생성 관련 예제는 다각형에 이벤트 등록하기2를 참고했다.

geojson을 까보면 대충 이렇게 생겼다.

{
    "type":"FeatureCollection",
    "code":"0",    // 임의 삽입
    "name":"전국", // 임의 삽입

    "crs":{
      "type":"name",
      "properties":{
        "name":"urn:ogc:def:crs:OGC:1.3:CRS84"
      }
    },
    "features":[
        {
          "type":"Feature",
          "properties":{
              "code":"11",        // key값 변경
              "name":"서울특별시" // key값 변경
          },
          "geometry":{
              "type":"Polygon",
              "coordinates":[
                  [[126.98419895182028,37.63633745376992],[126.98393720624127,37.64961005652743],[126.97965838839289,37.65603864........
                ]
            }
        },
	{
          ......            
        },
	......
    ]
}

임의로 삽입한거랑 변경한 것은 편하게 사용하려고 해놨다. geojson 파일을 저장하여 쓰는 것이 아니라 

DB에서 spatial로 불러오는 경우에는 현재 코드값과 이름을 불러 올 때 별동의 방법을 사용해야한다. 

솔직히 Polygon 생성은 예제를 보면서하면 전혀 어렵지 않다. 가장 큰 문제는 Multipolygon이다. 

신안군 같은 경우엔 섬이 많아서 '신안군' 소속 Polygon이 여러개라 Multipolygon 형태로 저장되어있다.

다음 지도 API에서는 Multipolygon 형식을 지원하지 않는다는 것이 문제다.

사실 네이버 부동산 같은데는 자질구레한 섬을 표시하지 않지만 개인적으로 만들 능력 없고 번거로우므로...

highmap으로는 geojson 띡 던져놓으면 알아서 잘 그려진다. 

다만 이건 통계용도로 쓰는 라이브러리라 그런지 유연성이 떨어지는 것 같아서 보류했음.

Polygon 이야기를 계속 하자면.. geojson에서 Polygon을 생성할 좌표값은 다음과 같이 생겼다.

"geometry":{
    "type":"Polygon",
    "coordinates":[
        [ 경도1, 위도1 ], 
        [ 경도2, 위도2 ], 
        ...... 
        [ 경도n, 위도n ]
    ]
}

Multipolygon의 형태는

"geometry":{
    "type":"Multipolygon",
    "coordinates": [
		[
			[ 경도x1, 위도x1 ], 
			[ 경도x2, 위도x2 ], 
			...... 
			[ 경도xn, 위도xn]
		],
		[
			[ 경도y1, 위도y1 ], 
			[ 경도y2, 위도y2 ], 
			...... 
			[ 경도yn, 위도yn ]
		],
        ......          
    ]
}

모든 Multipolygon이 이렇게 생겨서 해결될 수 있는지는 모르겠으나 현재 사용하는 geojson에서는 결국 멀티폴리곤도 폴리곤의 배열이므로
Polygon은 Loop 1번, Multipolygon은 Loop를 2번 돌리면서 Polygon 객체를 생성한다.




그리고 각각의 폴리곤 객체 생성 후 폴리곤 객체의 배열로 묶어준다. 내가 생각한 각 지역 객체의 구성은 이렇게 된다.

var polygon = new daum.maps.Polygon({
	map: map,
	path: area.path,
	strokeWeight: 2,
	strokeColor: '#004c80',
	strokeOpacity: 0.8,
	fillColor: '#fff',
	fillOpacity: 0.7 
});

28 : {
	// 인천광역시 옹진군(multipolygon)
	28720 : {
		pname : "인천광역시",
		pcode : "28",
		name : "옹진군",
		code : "28720",
		type : "Multipolygon",
		polygonObj : {
			polygon : [ polygon1, polygon2, polygon3, ....],
			clat : "37.43560051842006",
			clng : "125.67633047774245"
		}
	},
	// 인천광역시 부평구(polygon)
	28237 : {
		pname : "인천광역시",
		pcode : "28",
		name : "부평구",
		code : "28237",
		type : "Polygon",
		polygonObj : {
			polygon : polygon,
			clat : "37.49428187851991",
			clng : "126.72551333595213"
		}
	},
  .....
}

polygon을 맵 위에 띄우거나 없앨땐 각 지역 객체의 polygonObj.polygon을 Loop시켜 각각의 polygon에 함수를 적용시키면 된다.

jquery의 each를 사용할 때 jquery selector로 한번 묶어주면 polygonobj.polgon이 단일 객체이거나 배열인 것에 상관없이 동일하게 루프가 돌아간다.