ESS 사업 구현 목표 서비스와 관련된 GeOnDT for JS 기능에 대한 상세 안내 드립니다.
볼드체로 표현된 함수이름 이나 소스 구문은 관련 예제에서 검색하여 사용법과 구문 흐름을 파악해 봐야한다는 의미입니다.
*참고 예제 및 가이드 페이지
시작하기[https://3d.geon.kr/home/index.html] - 사용자컴포넌트 제어하기
시작하기[https://3d.geon.kr/home/index.html] - 분석모드 시작하기 - 모델편집(GIZMO)
시작하기[https://3d.geon.kr/home/index.html] - 분석모드 시작하기 - POI 생성
시작하기[https://3d.geon.kr/home/index.html] - 3D Vector 시작하기 - 열원 객체
시작하기[https://3d.geon.kr/home/index.html] - 3D Vector 시작하기 - 흐름 객체 (파이프)
시작하기[https://3d.geon.kr/home/index.html] - 선택 객체 생성 및 시작하기
다중 시설물 레이어 편집 예제 : [https://3d.geon.kr/doc/tutorial-official/analysisMultipleComponent.html]
시설물 상세 편집 및 실내환경 구성 예제 : [https://3d.geon.kr/doc/tutorial-official/componentControlAtIndoor.html]
객체 정보 조회 예제 : [https://3d.geon.kr/doc/tutorial-official/selectModel.html]
3D 흐름 객체 그리기 예제 : [https://3d.geon.kr/doc/tutorial-official/flowObject.html]
1. 3D 자료(3ds)의 출력
서비스에 사용되는 Ess 원본 데이터는 출력할 3DS 와 위치정보가 있는 엑셀파일로 구성됩니다.
서비스에 사용되는 Ess 원본 데이터를 출력하기 위한 단계는 다음과 같습니다.
'다중 시설물 레이어 편집 예제'를 확인하세요.
1) 위치정보가 있는 엑셀파일을 json 리스트 객체로 변환.
- 변환 파일 예시는 '첨부파일 [ESSList.txt]' 확인.
- '첨부파일 [ESSList.txt]'의 형태 또는 클라이언트에서 인식할 수 있는 간단한 json 형태로 변환이 필요합니다. -> 엑셀 파일을 그대로 읽는 기능은 제품 기능에 미포함
2) 컴포넌트 불러오기 형식의 json을 작성
- '다중 시설물 레이어 편집 예제'의 '$(document).on('click', '#btnESSSample1', async function () {...});' 하는 코드 참고
3) 컴포넌트 불러오기 json을 컴포넌트 레이어에 입력
- 만들어진 불러오기 json의 예시는 '첨부파일 [sampleESS_SET.txt]' 확인
- 레이어 입력은 '다중 시설물 레이어 편집 예제'의 'autoAdd()' 함수 참고
* 주의 사항
사전에 주어진 엑셀에는 사용자 정의 이름(ID), 위치, 회전 정보만 존재하므로, 예를 들어 DFC110102 컴포넌트가 어떤 3DS 원본 모델을 사용해야 하는지는 엑셀만으로는 판단할 수 없습니다.
따라서 **실제 모델(원본 3DS)과 생성할 컴포넌트 간 매핑(연결고리)**를 별도로 구성해야 합니다.
'첨부파일 sampleESS_SET.txt' 파일 기준으로 설명하자면, 아래 이미지 처럼 실제로 출력한 모델명을 기입해줘야 합니다.
'첨부파일 sampleESS_SET.txt' 에는 어떤 원본 모델을 사용하는지의 object 속성이 없습니다. 그래서 예제의 매핑 스크립트에 '오브젝트명 - 원본 모델 이름' 이 하드코딩 되어있고, 그에 따라 json 을 재처리를 해주고 있습니다.
2. 컴포넌트 선택(Selector)
'객체 정보조회 예제'를 확인하세요.
1) U3dSelect 생성 및 활성화
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'initSelector' : U3dSelect 생성 및 활성화
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'window.select.on('end', onSelectEnd, 'select.end')' : “선택 종료 이벤트” 연결합니다.
2) 선택 종료 시 처리(단일/박스 공통 진입점)
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'onSelectEnd' : 선택 결과를 받아 작업
3) 박스 선택 모드 전환(스페이스 키)
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'setSelectBoxMode' : 선택 모드를 변경합니다. ['box' : 박스 선택, 'point' : 단일 선택]
[단일 선택 이미지]
[박스 선택 이미지]
[박스 선택 결과 이미지]
3. 컴포넌트 제어(이동/회전/스케일)
'시설물 상세 편집 및 실내환경 구성 예제'를 확인하세요.
1) Gizmo 생성
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'initSelector' : Gizmo를 가져오고 콜백을 연결합니다. [ gizmo = app.getAnalysis('GizmoModel') ]
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'activeGizmo' : 선택 대상에 기즈모가 활성화됩니다.
2) Gizmo mode 변경
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'gizmo.setMode' : Gizmo의 모드를 변경합니다. (위치:'translate', 회전:'rotate', 크기:'scale' )
[위치 | 회전 | 크기 | 리셋 | 정렬 | 상세편집 | 삭제, '시설물 상세 편집 및 실내환경 구성 예제' 의 객체 선택시, 화면 상단 중앙 UI 참고]
3) 상세편집(리모콘)을 이용한 제어
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'openDetailView' : 상세편집 패널 제어
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'setPos' : 대상 컴포넌트의 위치 변경
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'setRot' : 대상 컴포넌트의 회전 변경
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'setScale' : 대상 컴포넌트의 크기 변경
[ '시설물 상세 편집 및 실내환경 구성 예제' 의 ' 2) 참고 UI' 에서의 상세편집 패널 참고]
4. 컴포넌트 계층 구조(부모-자식)
부모- 자식계층을 설정하여 부모객체에 상태(위치, 회전, 크기)가 수정될 경우 자식계층의 객체도 반영됩니다.
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'changeParent' : 부모계층을 설정하는 함수
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'removeparent' : 부모 계층을 해제
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'removeChild' : 자식 계층을 해제
5. 컴포넌트 스타일 / LOD 설정
거리에 따라 보여지는 형상을 설정하는 함수입니다.
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'setLODMode' : 대상 컴포넌트의 LOD를 설정
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'setUpdateFunc' : 컴포넌트의 LOD 사용자 제어 함수를 입력
6. 컴포넌트 저장 / 불러오기
현재의 상태를 json 데이터로 저장/불러오기를 하여 이전 작업을 불러 올 수있습니다.
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'loadComponentModel' : 대상 모델을 불러오기
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'saveWork' : 대상 모델을 json데이터로 저장
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'loadWork' : 대상 모델을 데이터의 상태(위치, 회전, 크기, 계층관계)에 맞춰서 불러오기
7. 컴포넌트 다중 앱 연결하기
단일 렌더링을 위한 새로운 U3dApp 생성후 메인App에서 제어되고 있는 객체정보를 전달 합니다.
['시설물 상세 편집 및 실내환경 구성 예제' 의 계층 정보 수정 UI 및 기능 참고]
메인 렌더링 U3dApp -> 단일 렌더링 U3dApp 로의 객체 정보 전달
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'setSubMap' : app2를 생성하고 app의 요소를 app2에 복제하는 함수
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'createSubMap : app2를 생성 / app2에서 출력할 subComponentLayer & subVectorLayer & subGizmo & select2 를 생성 (init 함수)
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'collectChildTree : 편집할 대상 컴포넌트의 자식 계층 구조를 읽어 생성 파라미터를 수집하는 함수
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'buildChildTree : 수집한 자식 컴포넌트의 정보를 읽어 생성하는 함수
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'createGridPlane : app2에 바닥 격자 플랜을 생성하는 함수
*추후 여러 app를 사용할 경우 렌더링 부하 발생 => 현재 포커싱 된 U3dApp만 렌더링을 수행하고, 다른 U3dAPP는 렌더링 및 업데이트 중지 필요 => 추후 가이드 예정
단일 렌더링 U3dApp 작업 결과 -> 메인 렌더링 U3dApp 전달
- '시설물 상세 편집 및 실내환경 구성 예제' 의 '$(document).on('click', '#sub-map-save', function () { .. })' : 계층 편집 (app2) 작업 후 확인 버튼 클릭시 동작. app2 내용을 'saveWork' 로 레이별 저장
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'setOriginMap' : app2에서 편집한 내용을 메인 app에 반영하는 부분
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'removeOrigin' : app에 이전 컴포넌트를 제거하는 함수 ( 제거 안하면 app2의 편집 내용으로 app에 새로 생성시 중복되어 오류 발생. 꼭 원본을 지우고 생성해야함)
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'vectorLayer.loadWork' : 저장 json 데이터로 벡터 레이어를 불러오는 함수 (어댑터 불러오기)
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'componentLayer.loadWork' : 저장 json 데이터로 컴포넌트 레이어를 불러오는 함수 (컴포넌트 불러오기)
8. 어뎁터 활용하기
'시설물 상세 편집 및 실내환경 구성 예제'에서 '어댑터 추가' 탭 UI 를 확인하세요.
'시작하기 - 사용자컴포넌트 제어하기 - 어뎁터 사용하기' 페이지를 확인하세요
어뎁터 추가
- '시설물 상세 편집 및 실내환경 구성 예제' 의 '$("#addAdapter").click((e) => { ... })' : 어댑터 추가하는 부분.
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'createAdaptedGeometry' : 어댑터를 생성하는 함수
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'setWorldPosition' : 어댑터를 월드 좌표를 통해 추가 (위경도 좌표보다 세밀하게 배치 가능)
어뎁터에 객체 붙이기
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'gizmoUpdate' : 기즈모 핸들 드래그시 호출되는 함수 -> 기즈모 핸들과 어댑터 간 교차 검사
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'gizmo.intersectAdapters(adapters)' : 기즈모에서 생성된 어댑터들과 교차되는지 검사하는 부분
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'hideBounds / showBounds' : 어댑터가 교차될때 교차되는 버퍼 범위를 하이라이트 하는 부분
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'hideLine / showLine' : 어댑터에서 교차 지점까지 선으로 표시하는 부분
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'gizmoEnd' : 기즈모 핸들 조작 종료시 호출되는 함수 -> 실제 어댑터에 객체를 붙이는 부분
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'gizmo.setManualUpdate(position)' : 어댑터의 위치로 기즈모 핸들을 이동시켜서 객체를 어댑터로 붙이는 부분
9. 흐름객체(전선) 활용하기
'3D 흐름 객체 그리기 예제'를 확인하세요.
'시설물 상세 편집 및 실내환경 구성 예제'에서 '전선 추가' 탭 UI를 확인하세요.
'시작하기 - 3D Vector 시작하기 - 흐름 객체(파이프)' 페이지를 확인하세요
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'createFlowPipe' : 전선을 생성하는 함수
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'flowPipe.flowStart' : 흐름 애니메이션을 시작하는 함수. (안해주면 애니메이션 없이 일반 파이프로 출력)
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'addPipe' : 화면 클릭 좌표를 통해 파이프를 해당 좌표까지 연장하는 함수
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'endPipe' : 파이프 생성을 종료하는 함수
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'previewPipe' : 입력 좌표로 그려지는 미리보기 파이프 생성함수
10. 열원객체 활용하기
'시설물 상세 편집 및 실내환경 구성 예제' 에서 '열원 추가' 탭 UI를 확인하세요.
'시작하기 - 3D Vector 시작하기 - 열원 객체' 페이지를 확인하세요
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'createHeatGeometry' : 열원 객체를 생성하는 함수
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'setTarget' : 열원 객체가 열 데이터를 출력 할 대상을 지정하는 함수 (이걸 해줘야 해당 3d객체에 열표현)
*열원 객체는 하나의 열원에 다중 객체를 대상으로 지정 가능
11. 카메라 상세 설정하기
'시설물 상세 편집 및 실내환경 구성 예제' 에서 '카메라 설정' 탭 UI를 확인하세요.
- '시설물 상세 편집 및 실내환경 구성 예제' 의 '$('input[name="camera-mode"]').click((e) => {...});' : 실내/야외 별로 카메라 설정을 변경하는 부분
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'app.getMapControl()' : 현재 앱의 컨트롤러(카메라제어기)를 가져오는 함수
- '시설물 상세 편집 및 실내환경 구성 예제' 의 'controller.getFactor' : 해당 프로퍼티를 수정해 카메라를 상세 설정하는 부분
| 