gwcCreateModalDialog의 resizing 코드 예 (JS 코드 최소화)

gwcCreateModalDialog에서 크기 조절 시 UI가 적절하게 배치되도록 하기 위한 코드를 정리해 봅니다.

먼저 만들고자 하는 UI는 다음 영상과 같습니다.

먼저 JS 코드는 다음과 같습니다.

class GeocodingTool {
    constructor() {
        const dlg = gwcCreateModalDialog("지오코딩");

        dlg.content = `
            
`; dlg.width = "70em"; // 크기 조절 기능을 위해서는 반드시 크기를 지정해줘야 함 dlg.height = "50em"; // 크기 조절 기능을 위해서는 반드시 크기를 지정해줘야 함 dlg.resizablePanel.minWidth = 550; dlg.resizablePanel.minHeight = 300; dlg.resizablePanel.resizableRight = true; dlg.resizablePanel.resizableBottom = true; dlg.show(); GeoServiceWebComponentManager.instance.update(); } }

CSS 코드는 다음과 같습니다.

.vertical-linear-layout {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.horizontal-linear-layout {
    display: flex;
    gap: 0.3em;
    flex-direction: row;
    _padding: 0 1em;
}

.v-center {
    align-items: center;
}

.h-center {
    justify-content: center;
}

.geocoding-tool-dialog {
    padding: 0.5em;
    height: 100%;
}

.geocoding-tool-dialog .content {
    height: 100%;
}

.geocoding-tool-dialog gwc-grid {
    flex: 1;
}

.geocoding-tool-dialog .address-column {
    width: 250px;
}

.geocoding-tool-dialog .run {
    margin-left: auto;
}

CAD 도면을 기반으로 한 3차원 모델링 및 사용자 인터렉션

건물 내부에 대한 정확 정보는 해당 건물에 대한 설계 도면입니다. 설계 도면 파일은 아래와 같은 CAD 도면(예시)을 이용하는데요.

위와 같은 도면을 아래처럼 3차원 모델로 제작할 수 있습니다.

위와 같이 제작된 3차원 모델 데이터를 웹에서 시각화하고 사용자 인터렉션을 통해 공간 상에서 원하는 위치로 이동할 수 있습니다.