D3.js 를 이용해 부산시 데이터 지도 그리기 구현 [1]

이번에 데이터 지도 페이지 구현하는데

 

내가 지역별 데이터를 부산시 지도에 표기 하는 작업을 하게됐다

 

지도는 이미지로 하는게 아니라 D3.js 를 이용해서 직접 그리고

 

거기에 데이터를 올리는 식으로 개발 하면 된다고 했다

 

예? 뭐요? D3 yo? 아? 그게 뭐죠? 아 차트그리는거요?  아 네 제가요? 그렇구나~ 한번 해볼게요~

 

오케 들어가보자고

 

일단 통합 데이터 지도를 참고해서 화면 설계를 했으니 어떤 기능이 있는지 알아봤다

 

https://www.bigdata-map.kr/dashboard

데이터 현황 - 통합 데이터지도

 

 

 

이화면인데

 

저기서 지역별 데이터를 띄우면 되는데

 

먼저 기능을 확인해보자

 

• 지도 확대 축소 기능
  • 플러스 마이너스를 누르면 지도가 확대 및 축소가 된다
• 지도 이동
  • 마우스 왼쪽을 꾹 누르고 지도 위치를 옮길 수 있다
• 데이터 갯수
  • 각 시도별 데이터 갯수가 원으로 표시된다
• 상세 조회
  • 시도 원을 눌렀을 때 그 지역이 확대된다
  • 나머지 지역의 원을 안보이게 된다

 

이정도?

 

흠... 그럼 뭐부터 해야하나 생각해보자

 

일단 부산시 지도 부터 D3.js 로 띄워야 겠지? 부산시 지도 띄우는 것 부터 시작해보았다

 

D3 에 지도를 띄우기 위해서는 먼저 geojson 데이터가 필요하다

 

GeoJSON  이란

---

 

위치 정보를 가지는 점을 기반으로 지형을 표현하기 위해 설계된 개방형 공개 표준 형식

 

간단하게 지리 데이터를 json 형태로 변경한 것이라고 보면 된다.

 

GeoJSON 예시 

 

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [102.0, 0.5]
      },
      "properties": {
        "prop0": "value0"
      }
    },
    ....

 

 

features 라는 포맷을 사용하는데

 

그 안에 coorinates 에 지형의 경계 정보를 저장한다

 

그리고 지형에 대한 메타 데이터들을 properties 속성에 저장한다

 

 

부산시 데이터 준비

---

 

먼저 구글에 부산시 geojson 이라고 검색 하니까

 

대한민국 17개 광역시/도 행정도 GEOJSON 파일 깃헙 링크가 있어서 들어가봤다

 

https://github.com/raqoon886/Local_HangJeongDong

GitHub - raqoon886/Local_HangJeongDong: 대한민국 17개 광역시/도 행정동 GEOJSON 파일입니다.

 

여기서 부산광역시 geojson 파일을 다운로드 받아서 데이터를 준비 했다

 

 

D3.js 를 이용해 부산시 지도 그리기

---

 

1. 도화지 준비 (svg)

<div id="main" style="width: 100%; height: 100vh"></div>

<script>

//SVG 생성
const svg = d3.select("#main")
    .append('svg')
    .attr('id', 'maps')
    .style("width", "100%")
    .style("height", "100%")
    .style("position", "absolute")
    .style("background-color", "rgb(164, 204, 239)");
    
const width = document.querySelector("#main").clientWidth;
const height = document.querySelector("#main").clientHeight;

</script>

 

2. 부산시 지도 표현

geojson 데이터를 활용 하기 위해서는 투영법(projection) 을 이용해 곡면데이터를 평면 데이터러 변환해 주어야한다

 

그리고 웹 지도 에서 가장 많이 사용하는 메르카토르(Mercator) 도법을 사용

 

그리고 부산시 중심 위경도를 넣어서 지도의 위치를 잡아주었다

 

그 다음 geojson 데이터를 불러와서 D3 로 그려주는 코드를 추가 했다

 

// 투영법 (projection) 설정
const projection = d3.geoMercator()
    .center([129.05562775, 35.1379222])
    .scale(100000)
    .translate([width / 2, height / 2]);

const geoPath = d3.geoPath().projection(projection);


// 부산시 지도 데이터 로드
d3.json('<c:url value="/data/busan.geojson" />').then(data => {
    const paths = zoomContainer.selectAll('path')
        .data(data.features)
        .enter()
        .append('path')
        .attr('fill', '#FAFAFA')
        .attr('d', geoPath)
        .attr('class', 'OUTLINE')
        .style("stroke", "#EAEAEA");
  });

 

이렇게 하면 일단 

 

 

이런 부산시 지도를 D3.js 로 그려 줄 수 있다

 

이제 다음 글에는 여기에 원도 추가하고 필요한 기능들은 추가 해봐야겠다