U3dSelect 검색결과 필터링 및 수동 하이라이트
1. auto 속성 설정
U3dSelect를 생성할 때 auto 속성을 false 로 설정하면, 이벤트 발생 시 선택된 객체의 목록만 반환됩니다. ( 기본값은 true 입니다.)
반환된 목록을 원하는 방식으로 필터링하거나 커스터마이징하여 별도로 하이라이트 처리할 수 있습니다.
U3dSelect는 change 와 end 이벤트를 제공합니다.
change 이벤트 : 객체 선택 상태가 변경될 때 호출됩니다. (마우스 단일 클릭시)
end 이벤트 : 선택 작업이 완료되었을 때 호출됩니다. ( 마우스 더블 클릭시)
각 이벤트에서 반환되는 선택된 객체 목록을 사용하여 필요한 작업을 수행할 수 있습니다.
반환된 객체 목록을 사용자가 원하는 조건(Layer, Type 등)에 따라 필터링할 수 있습니다.
필터링된 객체는 addSelected(mesh) API 를 사용하여 U3dSelect에 추가 선택 처리할 수 있습니다.
> auto 속성 설정
const selector = new GeonDT.select.U3dSelect({
mode:'area', // 영역선택모드
auto:false // 선택된 결과에 대해서 자동으로 하이라이트 및 결과목록에 추가 여부
});
- U3dSelect 추가시 auto 속성 false로 설정 ( 기본값 - true )
> 이벤트 함수 및 선택 객체 필터링 및 추가
selector.on('end', function(result){ // 'end' 이벤트 함수
console.log(result.data, 'Before Result');
const data = result.data; // 이벤트 호출 시에 넘어온 객체 목록
const resultList = [];
const targetLayerName = "ComponentLayer";
for (let i = 0; i < data.length ; i++) {
const mesh = data[i];
if(mesh.getLayerName && mesh.getLayerName() === targetLayerName ){ // Layer 이름이 "ComponentLayer"에 해당하는 객체만 결과 리스트에 추가
self.selector.addSelected(mesh); // U3dSelect에 선택 결과 목록에 추가 및 하이라이트 동작
resultList.push(mesh);
}
}
console.log(resultList, 'After Result') // 결과리스트 출력
})
- 'end' 이벤트 함수
위에 소스코드는 전달받은 결과목록에서 "ComponentLayer"의 레이어 이름을 갖고 있는 mesh들만 선택 및 결과 목록에 추가한 예시입니다.
- 이전 결과와 선별된 결과목록 출력 화면
- 이벤트 함수 동작 후에 화면에 출력된 화면 ( 'ComponentLayer' 객체들만 선택 )
|
