안녕하세요. 문의하신 내용 확인 후 답변드립니다.
U2dVectorShaderLayer는 타일 단위로 타일 위에 직접 덧그리는 구조로 되어 있습니다.
이러한 구조에서는 하나의 Mesh만으로 visible 상태를 제어할 경우,
특정 Feature의 가시화 제어가 올바르게 동작하지 않을 수 있습니다.
이에 대한 대안으로 투명도(Opacity)를 활용한 가시화 제어 방법을 안내드립니다.
투명도 제어로 인한 가시화 제어 방법
1. 대상 feature 가시화 off
const feature = '대상 feature'; // vectorLayer._featuresMap.get(featureId); 를 통해서 feature를 반환 받을수 있습니다.
const cacheItems = vectorLayer._cache.items(); //현재 cache 의 값들을 반환
const cacheItemsList = Object.values(cacheItems); //key, value로 설정 되어있는 객체 value의 목록으로 반환
const style = feature.getStyle(); // 대상 스타일 저장 (복구시 필요)
console.log(style);
for (let i = 0; i < cacheItemsList.length; i++) {
const mesh = cacheItemsList[i];
const tileKey = mesh.userData.tileKey;
const tile = app._drawArg.getTile(tileKey);
vectorLayer.setFeatureStyle(feature, {fillOpacity:0, strokeOpacity: 0}) // 스타일 변경 (채움 투명도, 선 투명도)
vectorLayer.disposeTile(tile); // 타일 지우기
vectorLayer.addTileFromScene(tile); // 타일 추가하여 다시 그리기
}
 
- 스타일 변경으로 가시화 제어 전 - 스타일 변경으로 가시화 제어 후
2. 대상 feature 가시화 on
const feature = '복구 대상 feature'
const style = '이전에 저장한 대상 feature의 style';
const cacheItems = vectorLayer._cache.items(); //현재 cache 의 값들을 반환
const cacheItemsList = Object.values(cacheItems); //key, value로 설정 되어있는 객체 value의 목록으로 반환
for (let i = 0; i < cacheItemsList.length; i++) {
const mesh = cacheItemsList[i];
const tileKey = mesh.userData.tileKey; // mesh가 해당하는 tileKey 값
const tile = app._drawArg.getTile(tileKey);
vectorLayer.setFeatureStyle(feature, style) // 원래의 스타일 복구하여 설정하기
vectorLayer.disposeTile(tile); // 타일 지우기
vectorLayer.addTileFromScene(tile); // 타일 다시 그리기
}
이상으로 답변드리며, 추가 문의사항이나 도움이 필요하신 부분이 있으시면 언제든지 말씀해주시기 바랍니다.
감사합니다.
| 