Cesium과 공공데이터 포털을 결합한 실시간 데이터 WebGIS 시각화

[dhd...@naver.com]

안녕하세요

오유상입니다

오픈 자바스크립트 라이브러리인 Cesiumjs를 이용해서 지속적으로 이것저것 시도해보는 중입니다

구현하고자 하는게 있는데 여기계신분들 중 혹시 구현해보신분이 계시거나 아이디어가 있으신분이 계실까싶어 글을 올립니다

공공데이터 포털에서 얻을 수 있는 실시간 데이터(예를 들면, 교통 통행량 정보, 미세먼지 농도)를 받아와서 Cesiumjs를 이용해 시각화 하고자합니다

저는 간단한 html, css, javascript 정도만 가능한 상태인데요

공공데이터 포털에서 API를 이용해 html에서 데이터를 요청해 실시간 데이터를 받고 그 데이터를 Cesiumjs에서 시각화하는 것이 가능할까요?

Cesiumjs에서는 json형태를 czml로 시각화하는 것이 가능하던데 이 방식으로 되는것인지(확실치 않습니다ㅠ)

한 화면에서 새로고침 없이 실시간으로 데이터가 계속 갱신되진 않더라도 새로고침을 했을때는 최신의 데이터를 받아오도록 하고 싶습니다

개발 관련된 언어를 거의 모르다보니 어떤 방식으로 구현해야할지 감이 안와서 여쭙습니다^^

감사합니다

[Jeongyong Park]

안녕하세요, 저는 작년에 CesiumJS를 이용하여 *H공사의 작은 프로젝트로 양주시 일부 지역의 DEM과 항공사진, 3D 건물과 도로시설물등을 올리고 몇가지 측정도구와 간단한 기능들을 구현해 본적이 있습니다.

간단한 HTML과 JS, CSS만 알아도 Cesium 의 샌드박스에 있는 코드들을 응용하여 기본적인것은 구현 할 수 있습니다.

우선 QGIS에서 시군구, 폴리곤 쉐이프파일을 GeoJSON으로 저장하셔서 아래의 튜토리얼처럼 지도에 폴리곤을 올려보실수 있습니다.( 폴리곤의 버텍스가 너무 많으면 렌더링에 부하를 주니, QGIS의 벡터도구에 Simplification 등으로 버텍스를 줄여주시면 좋습니다)

https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=GeoJSON%20and%20TopoJSON.html&label=Tutorials

하지만 공공데이터 포털에서 제공하는 API는 REST와 SOAP으로 제공되는데, 이를 이용하여 Cesium에 데이터를 표현하려면, Javascript 만으로 되지 않습니다.

서버측에서 해당 API에 대해서 CSRF를 허용해놓지 않는 이상 (대부분  허용이 안되있음=HTTP 서버의 기본값) CSRF를 우회를 위해 Node.js나 Java, C#, Python등을 이용하여 백엔드로 REST API를 대신 접근하는 프록시를 구현해야 합니다.

실시간으로 데이터가 갱신되게 하려면 Javascript의 setTimeout 함수를 이용하여 setTimeout(function(){ $.ajax({url:'~~~', data:'~~~', success:function(data){/* 데이터 갱신 */ } })}, 3000); 이런식으로 REST API를 이용하여 갱신할 수 있습니다.

2019년 4월 16일 화요일 오후 2시 26분 41초 UTC+9, dhd...@naver.com 님의 말:

[오유상]

안녕하세요

Javascript만으로는 구현이 어려운거군요

조금 검색해보니 공공데이터 포털의 API를 활용할 때 Java를 많이 쓰는 것 같던데 좀더공부해야겠습니다

감사합니다

[Jeongyong Park]

Node.js를 이용하여 백엔드를 만드신다면 Javascript 만을 이용해서도 구축할 수 있습니다. 하지만 아마도 경험해보지 못한 자바스크립트 형식일것 같네요. 시간을 두고 천천히 하신다면 구현은 가능할거에요

2019년 4월 16일 화요일 오후 2시 26분 41초 UTC+9, dhd...@naver.com 님의 말:

안녕하세요

[오유상]

네 언젠가 한번 구현해보고 싶은 부분이라서요^^

지금은 php, mysql을 공부하고있습니다

기회가되면 공유해보겠습니다

지식나눔 감사합니다!