웹초보입니다. 시/도 경계를 나누는 폴리곤 문의 드립니다

지도/로컬 API에 대한 문의게시판입니다.

카카오맵으로 시/도 와 시/군구 경계를 표시하는 폴리곤을 사용하려고 하다가
막히게 됐습니다.
아래와 같이 json 파일에서 좌표를 가져와서 폴리곤을 입히려고 합니다.
뭐가 잘못된건지 일단 폴리곤이 그려지지를 않습니다.
콘솔 찍어보니 좌표는 잘 들고 오구요.
뭐가 문제인지 답변 좀 부탁드립니다. ㅜㅜ
사용한 json 파일과 사용한 script는 파일첨부했습니다.

json.zip (123.7 KB)

지도 생성 시 위경도가 반대로 선언되어 있고 points가 배열로 선언되어 있지 않아 생긴 오류입니다.

mapOption = { 
    center: new kakao.maps.LatLng(38.301950820518755, 128.54880989370014), 
    level: 3  
};

아 죄송합니다. 제가 다른 파일을 올려서 그 부분들 수정해서 다시 올려놨습니다. ㅜㅜ
다시 한번만 확인 부탁드릴께요. 번거롭게 해드려서 죄송합니다.

음… 저는 getJSON으로 데이터를 가져오지 않고 JSON 파일의 값을 변수로 담은 다음
첨부해주신 jsp 소스의 each문을 바로 태워서 테스트를 해보았는데 잘나오네요…

getJSON으로 데이터가 잘 들어오는거 맞나요?

제가 어딘가에서 오류가 있었나 봅니다. 잘 가져오기는 하는데 좌표가 이상한건지 경계구역이 이상하게 그려지네요.
흔히 구글링에 나오는 geojson 데이터를 사용했는데요. 혹시 카카오맵에서는 다른 좌표체계를 이용하거나 신경써야 하는
부분이 있는지요?
캡처
혹시 담당자분께서도 사진처럼 폴리곤이 형성되시는지요?

네 저 역시 캡처본과 동일하게 나오고 있고 카카오 맵은 WGS84와 Wcongnamul 좌표계를 지원하고 있습니다.
geojson 데이터가 올바른지 확인이 필요해 보입니다.

polygonPath 가 전역이라서
앞에 그린 영역의 좌표가 그 다음 영역을 그릴 때도 계속 남아 있는 상태로 덧그려지고 있어요.
그래서 다른 영역간 좌표가 이어지는 더 큰 폴리곤으로 계속 그려져요

polygonPath를 displayArea 안에 넣으니 아래처럼 보이네요

image

2개의 좋아요

답변 감사합니다. 생각지도 못한게 또 있었네요.

안녕하세요. 담당자님
공공포탈에서 제공하는 shp 파일들을 geojson으로 가공하고 그 파일들을 카카오맵에서 제공하는 위경도변환 api를 이용해서 변환을 해도 폴리곤이 그려지지 않는 상황이 계속되고 있습니다.
혹시 공공에서 제공하는 파일들을 어떤 좌표계로 변환해서 geojson 형태로 변환해야 하는지 답변 좀 부탁드립니다.
gis쪽은 첨인지라 너무 헤매고 있습니다. ㅜㅜ

일단 공공포털에서 제공하는 좌표계가 뭔지를 확인하셔야 할 것 같구요
input을 그에 맞춰서 output을 wgs84 로 하시면 됩니다.
보통 많이 오류를 범하시는 것 중 x,y 를 반대로 쓰시는 경우가 있으니 그것도 확인해보시구요

통계청에서 제공하는 shp파일을 이용했고, Qgis를 통해서 좌표계 WGS84 / EPSG:4326으로 좌표계 변경해서 geoJson으로
내려받았습니다. 이 방법이 맞는건지요? x, y값은 제대로 적용했습니다.

그럼 폴리곤이 그려지지 않는 상황… 이란걸 좀 더 자세히 알려주세요
실제 사용하신 데이터 샘플과 소스코드도 같이 주시면 좋구요~

아래처럼 첨부하면 안되는건가요?

실제 사용한 데이터 샘플과 변환 과정내용 스크립트코드부분 혹시 몰라서 shp파일도 첨부하느라 용량때문에
첨부파일 링크 공유했습니다.
바쁘실텐데 번거롭게 해드려서 죄송합니다.

여기저기 찾아보니
공공포털에서 제공하는 데이터는 UTM-K 를 사용하는 것 같아요
UTM-K 를 WGS84 로 먼저 변환해서 사용해보세요.

답변 감사합니다. 해결했습니다.
멀티폴리곤은 지원이 안되서 따로 코딩해야 하는게 맞는건가요???

멀티폴리곤이라는 것이 어떤 걸 말씀하시는 건가요?