지도 위에서 3D 건물모양을 만들어 높이와 색상으로 데이터 시각화

지도 위에서 3D 건물모양을 만들어 높이와 색상으로 데이터 시각화

지도 위에서 3D 건물모양을 만들어 높이와 색상으로 데이터 시각화에 사용할 수 있는 데모입니다.

[데모보기]

위 데모는 OSM Buildings라는 라이브러리를 사용해서 만들었고 지도는 Leaflet으로 만들었습니다.

건물모양을 만드는데 사용할 데이터는 서버에서 생성해서 가져오는 방법과 GeoJSON을 사용하는 방법이 있는데 저는 GeoJSON을 사용했습니다.

각 구별로 값을 주고 그 값이 클 수록 입체모양의 높이가 높고 색상을 진하게 표현하였습니다. 사용된 데이터는 어떤 실제 값이 아니라 데모를 만들어 보려고 5000~20000 사이의 임의의 값을 넣어주었습니다.

OSM Buildings는 지도 위에 건물모양을 만들 수 있게 해줍니다. Canvas 2D를 사용해서 구현되었습니다. 건물모양을 만들수 있고 이것을 이용하면 위 데모와 같이 지역위에 통째로 입체모양을 올릴 수도 있습니다. IE8에서는 Canvas를 사용할 수 없어서 FlashCanvas를 사용한 다음, OSM Buidlings 라이브러리 파일인 L.BuildingsLayer.js 를 약간 수정해서 사용하였습니다. 수정한 파일이 L.BuildingsLayer.custom.js 인데 혹시 궁금하신 분은 데모의 소스에서 살펴봐 주십시오