모델을 출력할 수 있는 방법은 2가지입니다.
1.3DS 모델 출력 레이어 객체 활용 (U3dModelTdsLayer)
2.컴포넌트 레이어에 3DS 모델 등록후 사용 (U3dMutipleComponentLayer)
---------------------------------------------------------------------------------------------
3DS 모델 출력 레이어 객체 활용 (U3dModelTdsLayer)
1. 기존에 사용 중인 3D GIS Server에 등록 *[ ESS_1SET ] 이름으로 등록 / 확인
- 3D GIS Server에 해당 파일 경로를 맞춰서 추가하여줍니다.
2. 서버에 serverURL + v1/layer/name API 호출 하여 등록된 layer 정보 가져오기 [name : ESS_1SET ]
1)JS에서 로드시에 해당 3D GIS Server URL + 'v1/layer/ESS_1SET 를 호출하여 등록시 저장된 데이터를 불러옵니다.
/서버에 등록된 레이어의 정보를 가져옵니다.
function getRegisteredComponent(name) {
return $.ajax({
url: serverURL + 'v1/layer/' + name,
beforeSend: function (xhr) {
xhr.setRequestHeader('User-Authorization', API_KEY);
}
});
}
2)서버에서 호출이 정상적으로 이뤄진 경우에 아래와 같이 속성값을 설정합니다.
getRegisteredComponent(name).then((result) => {
const info = result.params.data; // 서버에서 전달 받은 데이터
let name = info.name;
let baseUrl = info.baseUrl;
const opt = {
baseurl: baseUrl, //https://dt-data.mappick.co.kr/ServiceData/component/ess/ESS_1SET
name: name, // "ESS_1SET"
type: "model",
ext: "3ds",
drawline: false, //외곽선 생성 여부
needtexture: true, // 텍스쳐 파일 읽기 여부
needxml: false, //xml 파일 읽기 여부 *현재 파일의 경우 false
listmodel: [], // 아래에서의 속성 추가 참고
scale: info.metaData.scale, // data의 크기
rotation: info.metaData.rotation, // date 회전
location: info.metaData.location, // date 위치
boundingBox: info.metaData.boundingBox, // data boundingbox
side: GeOnDT.UDEF.DoubleSide, // material side 설정 [0: backSide, 1:frontSide, 2:doubleSide]
};
const optlayer = {
name: 'ESS_1SET_Layer', //+ layer 이름
baseurl: opt.baseurl, //+ 데이터 경로의 기본 URL, *필수 입력 //https://dt-data.mappick.co.kr/ServiceData/component/ess/ESS_1SET
fileName: opt.name, //+ 저장된 파일의 이름 // "ESS_1SET"
ext: "3ds", // 파일 확장자
};
opt.listmodel.push(optlayer);
console.log(opt);
});
- opt 속성값 정보
3)설정한 옵션값으로 U3dModelTdsLayer 를 생성합니다.
layer = app.createTdsModelLayer(opt); // U3dModelTdsLayer 생성 함수
layer.ready.then(function () {
app.fitLayerExtent(opt.name); // 해당 layer 위치로 이동
app.showLayer(opt.name, true); // 해당 layer 가시화
});
3. 이미지파일 확장자 변경 필요 [ 확장자 일치 ]
- 제공 받은 데이터의 이미지 파일 확장자 [ *.jpg ] / 소문자
- 3ds에서 내부에 명시되어있는 확장자 [ *.JPG] / 대문자
- js에서 load할 때 3ds파일의 이미지파일명을 그대로 불러옵니다.
대소문자를 구분하여 로드함으로 현재 제공된 이미지파일의 확장자 변경이 필요합니다.
- U3dModelTdsLayer로 데이터 가시화 형상
---------------------------------------------------------------------------------------------
컴포넌트 레이어에 3DS 모델 등록후 사용 (U3dMutipleComponentLayer)
컴포넌트를 사용하기 위해서는 다음 두 단계가 필요합니다.
-
원천 모델 등록
-
등록된 원천 모델을 컴포넌트로 생성·출력
1. 원천 모델 등록
원천 모델 등록을 위해서는 사전에 모델 메타정보 객체를 구성해야 합니다.
필수 속성
해당 객체 목록을 componentLayer의 listmodel 값으로 전달합니다.
등록 방식은 두 가지가 있습니다.
방법 1) 레이어 생성 시 옵션으로 등록
const option = {
name: 'ComponentLayer',
type: "model",
needxml: false, //준비된 xml이 없으면 false를 입력합니다!!!
listmodel: [
{name: 'ESS렉', baseurl: 'https://dt-data.mappick.co.kr/ServiceData/component/ess/', fileName: 'Rack.3ds', ext: '3ds'},
{name: 'ESS_1SET', baseurl: 'https://dt-data.mappick.co.kr/ServiceData/component/ess/ESS_1SET/', fileName: 'ESS_1SET.3ds', ext: '3ds'}
], //컴포넌트 레이어를 구성할 모델 데이터 리스트
drawline: true,
setInstanced: false,
}
const componentLayer = app.createMultipleComponentLayer(option);
방법 2) Layer / Analysis API를 통해 동적 등록
const modelInfo = {name: 'ESS_1SET', baseurl: 'https://dt-data.mappick.co.kr/ServiceData/component/ess/ESS_1SET/', fileName: 'ESS_1SET.3ds', ext: '3ds'}
componentLayer.loadModel(modelInfo).then((object)=>{
createComponent(object);
}).catch(()=>{
console.error("animationLayer fail to load model.");
});
const modelInfo = {name: 'ESS_1SET', baseurl: 'https://dt-data.mappick.co.kr/ServiceData/component/ess/ESS_1SET/', fileName: 'ESS_1SET.3ds', ext: '3ds'}
await window.componentAnaly.loadModel(modelInfo);
모델이 정상적으로 로드되면, 원천 데이터가 네트워크를 통해 요청·전송되는 것을 확인할 수 있습니다.
2. 컴포넌트 생성 및 출력
등록된 원천 모델을 기반으로 컴포넌트를 생성하는 방법은 다음과 같습니다.
방법 1) 분석 모드 사용 (화면 인터랙션)
window.componentAnaly.addSingle(true);
addSingle, addInterval, addArea 등의 API를 사용해
사용자 인터랙션 기반으로 컴포넌트를 추가할 수 있습니다.
방법 2) Layer API를 통한 직접 생성
let component = componentLayer.addPosition({
name: 'ESS_1',
geoPosition: {x: 126.62241, y: 37.55637, z: 16},
object: 'ESS_1SET' , //원천 모델 이름
})
사용자 컴포넌트 제어하기 - 컴포넌트 생성 을 참고해주십시오.
| 