서울시 행정동 중심 좌표 엑셀, JSON으로 변환하기 (execl, json 파일)
- front
- 2021. 3. 27.
SHORTCUT
*작성자 환경 : macOS
결론 요약
- 엑셀 파일을 CSV 파일로 변환한다.
- 이 때, 인코딩을 UTF-8로 해야지 한글이 안깨진다.
- 변환된 CSV 파일을 웹 사이트를 이용해 JSON으로 바꾼다.
현재 카카오맵을 기반으로 상권 추천 웹 서비스 프로젝트를 진행 중에 있다.
특히, 이 부분은 GIS(지리정보시스템)과 연관이 깊다.
상권 분석 같은 경우 서울시나 소상공인진흥공단 처럼 공적인 목적이 많다보니, 사이트에서 제공하는 기능 자체도 굉장히 고도화되어 있다.
그것에 맞게 현재 개발중인 프로젝트에서도 지도 위에 다양한 정보를 표시해야 한다고 생각해서 편의 기능을 구현하는 중이다.
지도 위에 동 별로 커스텀 오버레이 구현하기
현재 하려는 건, 이거다.
자료 구하기
JSON 자료는 제공하는 곳이 많은데, 하나씩 파싱 및 전처리를 해야한다. geoJson을 처리하는 소프트웨어가 있는데 딱 봐도 윈도우 전용 같아서, JSON으로 주는 곳이 없나 서칭하다가, 엑셀을 공유해주신 분이 계셨다.
기본적으로 시군구+행정동 코드 / 시도명 / 군구명 / 행정동,법정동명 / LAT / LNG 값을 제공한다.
카카오맵에선 WGS84로 된 위도 경도(LAT, LNG)를 사용하므로 아주 적합하다.
원본 데이터는 대한민국 전체 행정동, 법정동 좌표와 이름이 적혀져있다.
나는 서울시 내 동 좌표만 필요하기 때문에, 서울시를 제외한 광역시는 전부 제거했으며 상단 컬럼명도 영어로 수정했다.
엑셀 파일, CSV 파일로 변환하기
저 상태로 JSON으로 변환하면 한글이 깨지게 된다. 따라서 CSV로 만드는 과정에서 UTF-8로 인코딩을 해주어야 한다.
맥 엑셀에서는 파일 형식을 CSV로 설정하면, 자동으로 쉼표로 분리된 UTF-8로 변환하여 준다.
JSON으로 변환하기
저는 아래의 사이트에서 CSV파일을 JSON 형태로 변환했다.
CSV to JSON - CSVJSON
Online tool to convert your CSV or TSV formatted data to JSON. 1) Copy/paste or upload your Excel data (CSV or TSV) to convert it to JSON. 2) Set up options: parse numbers, transpose your data, or output an object instead of an array. 3) Convert and copy/p
csvjson.com
사이트에 접속해서 파일을 업로드하고, 화살표를 누르면 간단하게 변환이 완료된다.
변환된 JSON 파일을 첨부한다.
VUE.JS 에서 카카오맵 위에 표시하기
일단 Vue.js에서 사용하려면 컴포넌트를 import하듯 해당 파일을 직접 임포트해야한다.
그리고 data에 위에서 임포트한 파일을 사용한다고 선언하면 된다.
그 후에는 본인의 사용 목적에 맞게 쓰면 된다.
카카오맵은 위에서도 언급했든, WGS84 좌표계를 사용하고 있어 위 데이터의 lat, lng 데이터에 바로 접근하면 된다.
// vue.js
// 동코드 JSON 파일 import
import dongCoords from '@/assets/data/dong_coords.json';
// data 사용 선언
export default {
data: () => ({
// 동별로 마커를 찍기 위한 json파일 import
dongCoords: dongCoords,
},
methods : {
// dongCoords를 기반으로 마커 찍기
setMarker(){
// for문으로 동코드 json파일을 전부 돌며 해당 동 정보를 출력함
for (var idx in this.dongCoords) {
var position = new kakao.maps.LatLng(this.dongCoords[idx].lat, this.dongCoords[idx].lng);
var content = `<div class="cell">
${this.dongCoords[idx].dong}
</div>`;
// 커스텀 오버레이를 생성합니다
var dongOverlay = new kakao.maps.CustomOverlay({
map: this.mapObject,
position: position,
content: content,
});
this.dongMarkers.push(dongOverlay);
},
},
};
주의사항 및 마무리
일단 위 데이터는 2019년 8월을 기준으로 하고 있어서, 동 정보가 상이한 경우가 존재한다.
사용에 따른 문제는 필자 또는 원공유자에게 없음을 인지하길 바란다.
결국 필자는 위 정보를 사용하지 않고, vworld의 open API를 활용하기로 했는데, 그 이유는...
1. JSON에 전체 동 정보를 for문으로 입력받아 사용하므로, 성능 저하가 우려됨
- 줌, 드래그 마다 매번 그 많은 데이터를 처리하고 표시하는 과정이 존재
2. 마커 클러스터링 가능성에 대한 의문
- 사실 줌 아웃에 따라 마커 클러스터링으로 지역 정보를 모아주고 싶었는데, API 문서를 살펴보니 마커 클러스터링은 찍힌 마커들에 대해서 갯수를 기준으로 모으는 역할을 수행함.
- 따라서, 내가 원하는 대로 구별로 모으는 것이 불가능함. (구별로 동 갯수는 상이하므로)