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>
|
