Three.js JavaScript 라이브러리를 이용해서 브이월드3D건물/교량과 고도데이터를 표출하는 예제입니다. 지난번에는 GeoServer에 DEM(geoTiff) 고도 데이터를 OGC 서비스 WCS를 이용하였습니다. 그리고 브이월드/네이버/카카오(다음맵), 구글타일맵 TMS로 텍스처하여 3D 블록을 쉽게 표시하였습니다. 장점은 여러 타일맵과 브이월드 DEM, 건물/교량3D모델링하고 중첩하여 볼 수 있다는 점과 구면좌표계가 아닌 다양한 확장을 위한 평면 좌표계를 사용합니다. 향후 브이월드의 WebGL 3D 정식 서비스시에도 소스를 수정하여 응용하세요.
일본에서 3D/VR을 했었지만. 이분야는 고해상도 데이터와 모델링, 텍스처 등이 필요하므로 개별로 개발하는것이 무의미해서 지양하고 있었지만...ㅠㅠ
- 현재화면에 대한 가벼운 3D창 모듈 - 범용적인 타일맵TMS 텍스쳐(브이월드, 네이버, 카카오, 구글 등) 다음지도("EPSG:5181"중첩시 좌표변환과 크로스도메인으로 Proxy php사용) 타일맵 중첩 일반/위성/하이브리드/와이어 프레임 등 지도종류 선택 - 자체 고도데이터(DEM, 드론 등) WSC로 3D 지형 생성 - WMS등을 중첩으로 지상/지하 등 확장성 필요 - 브이월드 3D 건물 및 교량 중첩 - 브이월드 3D DEM 중첩 지난번에는 자체구축된 DEM을 tiff이미지로 WCS 분할 서비스로 지형을 표현하였으나 아래 예제는 브이월드 3D서비스의 고도데이터를 이용하였습니다. - IE에서는 떨림현상과 마우스 이동시 좌표표시가 안되고, 건물 선택이 안됩니다. Html5인 크롬이나 엣지에 최적화되어 있습니다.
* 데모 : http://www.gisapplication.kr/OL/fgis_three/API_TEST.html * 응용 : FGIS/Paint 그림판/낙서지도 : http://www.gisapplication.kr/ol/paint * 브이월드 3D 건물 및 교량 중첩 : 원문 참조 https://cafe.naver.com/gisapplication/1117
간단히 사용해보시려면, index.html을 만들어서 사용해보실수있습니다. <html> <head> <script src="http://www.gisapplication.kr/FGISApplication3D_API/GA_APP.js"></script> </head> <script type="text/javascript" > window.onload = function() { var GA_3DMap = new GISApplication3DAPI(); GA_3DMap.map_init("map3D"); }; </script> <body> <div id="map3D" style="width:100%;height:100%;border: none;position: absolute;"></div> </body> </html>
|