유니온3D(Union3D)-공간정보, GIS(Geography Information System)

Union3D-Client

컨버스안에 3D 형상으로 표현해주기 위해 만들어졌으며 자바스크립트를 이용하여 캔버스 하나당 다수의 픽셀로 이루어져 화소 및 점으로 표현되어 있습니다. 또한, 이러한 다수의 픽셀과 점,선 면으로 이루어진 객체들을 3D.js를 통하여 여러개의 점과 픽셀을 모아 하나의 타일을 만들고 여러개의 타일을 모아 지도를 만들어 낸다.

Union3D

• 기본적으로 자바스크립(Javascript), 부트스트랩(Bootstrap), 디버그(Debug), 유니온3D(Union3D)의 라이브러리를 필수적으로 필요로 한다.
• 각각의 경로의 경우 컴퓨터의 시작 경로에 따라 달라질 수 있기에 각각의 맞는 라이브러리 경로를 설정하는 것을 권장한다.
• 또한, 지도상에 나타낼 div 박스가 필요로 하며 각각의 div 박스의 id 값은 제이쿼리 및 자바스크립트 사용시 캔버스로 사용될 map을 만들어 주어야 한다.
• 그리고, 유니온3D(Union3D)는 Union.ready(function () { app = new Union3D.U3dAPP({ container : "map" }); }); 의 선언들 통해 전체 map을 불러온다. 
• 우클릭으로 돌리면 하늘색이 나오면 성공한 것이다.

U3dAPP의 환경 설정 값 설명

• name : U3dAPP의 이름 따로 설정하지 않는 경우 U3dAPP_생성넘버1,2,3 순으로 자동 지정
• containername : U3dAPP을 화면에 출력할때  HTML DOM 객체이름 U3dAPP 생성시 필수적인 요소
• idoverview : OverView 지도를 띄울 HTML DOM 객체이름 OverView 사용시 필수 요소
• homePosition :  지도화면 초기위치값(위도경도 좌표)
• homeRotateleft : 지도 화면 좌우 회전각도 (방위각)
• homeRotatedown  : 지도화면 상하 회전각도

 

 

Draw Option

• Rending 여부 중 U3dApp 화면 표출에 관한 옵션
• stoprender : 렌더링 중지
• usesky : 배경에 하늘을 생성 할 것인지에 대한 true, false 옵션 선택가능
• backgroundcolor : 배경색상
• intensitylight : U3dAPP의 광원 밝기
  • searchtype :  카메라 시점 주위의 타일을 검색하는 방식
  • bounding box : 가상의 박스를 생성하여 교차되는 타일을 검색 sphere 가상의 sphere 생성ㅇ하여 교차되는 타일을 검색
• ratiotilesize :  타일당 크기 비율(타일 해상도)
• datalevel : 타일 서버에서 받아올 타일의 최소 레밸(타일 데이터가시화 레벨)
• passlevel :  타일 캐시에 추가할 타일의 최소 레벨(타일 데이터 비가시화 레벨)
• minlevel : 타일의 최소레벨
• maxlevel : 타일의 최대레벨

Layer Option (U3dApp위에 올라갈 layer에 관한 옵션)

• useimageopacity : 이미지 레이어 투명도 적용여부
• imageopacity : 전체 이미지 레이어 투명도(0~1 사이의 값)
• usemodelopacity :  모델레이어 투명도 적용 여부
• modelopacity : 전체 모델레이어 투명도 적용 여부(0~1 사이의 값)
• skirt : 지형 레이어 적용시 스커트 연산 사용 여부(원근감 및 고도에 따른 레어이의 공간차이로 인해 빈공백을 매워주기 위한 연산)
  • methodheight : 지형 및 고도 처리방법으로 스커트 생성방식을 결정하는 옵션 raw: 상대적인 값을 빼거나 더해 스커트를
  • base: 스커트를 무조건 0으로 계산하여 생성
  • 1.0: 동적으로 스커트를 연산하여 생성
• modelimagedistance : 모델레이어 사용시 모델이미지 해상도 관련 옵션 , 모델 이미지 해상도를 거리비율(원근감)에 따라 조절
• viewportratio : 카메라 viewport 비율(app 화면비율)

레이어 객체 생성 및 관리

레이어 객체 이해

3D 레이어 객체의 개념

타일링(Tile)

• 지도내에서는 각각의 형상을 가지고 있는 타일들이 존재하며 각각의 타일들은 더욱 세부적이고 디테일한 영역의 형상을 가지고 있다. 또한, 지도에서는 한번 볼떄의 범위와 범위각이 존재하기 때문에 불필요한 타일을 전체를 렌더링 하는것이 아니라 형상만 존재하고 실제적으로 필요할때만 전체를 렌더링해서 사용 및 시각화 할 수 있게 한다.

 

Quad Tile Tree

• 지도의 축척에 따라 계속해서 4등분하여 세분화된 타일을 나타내주는 것
• 카메라 시야와 거리에 따라 단계적인 레벨의 타일을 생성
• 기준점에서 가까운 타일들은 세분화된 작은 타일로 구성하고 거리가 멀어질수록 큰타일을 보여주어 나타내는데 이때 빈공간을 매워주는 기술이 skirt의 유무에 따라 반영된다.

3D 레이어 객체의 종류

3D 오브젝트(3D Object)

• 지도내에 있는 모든 객체들이 해당하며 산, 강, 건물, 토지, 해, 하늘, 땅 모든 것들을 오브젝트라고 부른다.
• 화면출력(가시화)을 하기 위해서는 Geometry 와 Mataria 속성을 필요로 한다.
• Geometry 안에는 Normal, Position, Bounding Box 등이 존재하며 각각의 값에는 필수적인 요소 JSON으로 나타낸 Array(좌표)가 있다. 즉, 경계선을 표시한다.

3가지의 레이어 네이밍 파트

Image Layer

• 3D 지도 화면의 지면과 배경 이미지 오브젝트를 출력하는 레이어입니다.
• U3dOpen Layer
• U3dimageWMS Layer
• U3dXYZ Layer

Height Layer

• 3D 지도화면에 지면의 고도를 출력하는 레이어입니다.

Model Layer

• 3D 지도화면에 3D Model을 출력하는 레이어입니다.

3D 레이어 객체의 관리 API

• 화면에 출력될 3D오브젝트를 기능과 용도 데이터형식에 따라 논리적으로 분류한 구조체
• Geometry + Matarial -> Mesh -> Group -> Scene -> Layer

3D 레이어의 출력

• 3D 레이어 객체는 타일을 받아 해당 타일에 출력될 3D Object를 찾아서 연결합니다.
• 타일이 준비되면 함께 연결된 레이어의 3D Object들이 타일위에 올려 출력됩니다.
• Quad Tile Tree -> Tile(타일) -> Scene(화면)
• 3D Layer -> 3D Object -> Tile(타일) 순으로 타일을 완성하여  위의 순서에 적용된다.

레이어 생성 방법

• U3dApp을 사용한 레이어 생성
• Union3D 객체를 직접 만들어 레이어 직접 생성

※ Union3D로 만든 경우 app.addLayer()를 통해 레이어에 한번 저장해 주어야 출력이 된다.

 

레이어 삭제 방법

• app.removeLayer(); 이용하여 사용하지 않는 레이어를 제거한다.
• app.removeLayer(layername.getName()); (레이어 이름 지정)

레이어 SHOW / HiDE

• app.showLayer(layername.getName(), true);
• app.showLayer(layername.getName(), hide);