건물 내부에 대한 정확 정보는 해당 건물에 대한 설계 도면입니다. 설계 도면 파일은 아래와 같은 CAD 도면(예시)을 이용하는데요.
위와 같은 도면을 아래처럼 3차원 모델로 제작할 수 있습니다.
위와 같이 제작된 3차원 모델 데이터를 웹에서 시각화하고 사용자 인터렉션을 통해 공간 상에서 원하는 위치로 이동할 수 있습니다.
gwc-resizable-panel + gwc-vscrollview 를 이용해 사이드 패널 구성
크기 조절이 가능한 gwc-resizable-panel 태그를 이용한 사이드 패널을 구성하면 이 패널 안에 내용이 많아 수직으로 스크롤해야 할 경우 gwc-vscrollview 태그를 자식으로 두는 경우에 대한 코드를 정리합니다.
위의 화면 중 노란색 영역이 gwc-resizable-panel이고 초록 영역이 자식인 gwc-vscrollview 입니다.
사이드 패널에 대한 JS 코드는 다음과 같습니다.
class SearchResultUI {
constructor() {
const domLayout = document.createElement("div");
domLayout.classList.add("search-result-ui");
domLayout.innerHTML = `
0
0
0
`;
document.body.appendChild(domLayout);
GeoServiceWebComponentManager.instance.update();
}
}
7번의 gwc-resizable-panel의 resizable-left와 min-width는 각각 패널의 왼쪽 모서리를 이용해 크기를 조절할 수 있고, 패널의 가로 크기는 최소 200px를 유지해야 한다는 것입니다. min-width 값의 단위는 px이며 값을 지정할 때는 단위를 지정하지 않습니다./p>
해당되는 CSS는 다음과 같습니다.
.search-result-ui > gwc-resizable-panel {
box-shadow: 0 0 2px rgb(0 0 0 / 50%), 0 0 10px rgb(0 0 0 / 50%);;
left: calc(100% - 20em); /* width 값만큼 빼줘야 함 */
right: 0;
top: 3em;
width: 20em;
height: calc(100vh - 3em); /* 패널 위에 공간이 3em 임 */
_opacity: 0.8;
}
.search-result-ui > gwc-resizable-panel > .search-result-header {
height: 2.6em;
...
}
...
.search-result-ui > gwc-resizable-panel gwc-vscrollview {
width: 100%;
background: rgba(20,20,20,1);
height: calc(100% - 2.6em); /* 스크롤 영역 위의 공간이 2.6em 임 */
}
.search-result-ui > gwc-resizable-panel .search-result-content {
padding: 0.4em;
min-height: 100%;
display: flex;
flex-direction: column;
gap: 0.2em;
}
아래의 영상은 위의 UI가 반영된 실제 구동 영상입니다. 패널에 대한 크기 조절 등의 사용자 인터렉션을 파악할 수 있습니다.
웹 3D 라이브러리(Three.js)를 이용한 메타버스 환경 구축 및 인터랙티브 웹 개발
안녕하세요, GIS Developer 김형준입니다.
오는 5월 25일부터 3일간 메타버스 환경 구축 및 인터랙티브 웹 개발이라는 주제를 가지고 강의를 진행합니다. 메타버스 환경 구축은 Blender라는 3차원 모델링 툴을 사용하고 인터렉티브 웹 개발은 three.js 라이브러리를 활용합니다. Javascript을 이미 알고 있다는 가정 하에 Blender나 three.js를 전혀 모르시는 분들도 이해하실 수 있도록 진행할 계획입니다.
아래의 영상은 교육 내용 중 실습 예제 중 하나입니다.
교육장소는 서울 판교에 있는 메타버스 캠퍼스입니다. 교육비는 무료이지만 참여할 수 있는 인원 수에 제한이 있습니다. 참여 신청을 위한 링크는 아래의 이미지를 클릭하시면 됩니다. 많은 참여 바랍니다.
지오코딩 서비스(GEOCODER-XR) 기능 개선
OpenAPI 형태의 서비스 단위로 제공되는 GEOCODER-XR이 고객의 요구사항에 맞춰 개선되었습니다. 다음과 같이 3가지 내용이 변경되었습니다.
- 지오코딩 결과에 대한 정좌표, 인근좌표, 대표좌표에 대한 구분(기존에는 인근좌표와 대표좌표의 구분이 없었음)
- 결과가 여러 개인 경우 정확도 순서에 따라 정렬해서 모든 결과를 다 제공하도록 변경
- 결과 형식을 JSON으로 변경(기존은 XML 형식였음)
예를들어 주소 중 “중앙동”으로 검색을 하기 위한 REST 방식의 OpenAPI는 다음과 같습니다.
http://localhost:8080/Gp?command=gc;addr=중앙동위의 호출에 대한 결과는 다음과 같습니다.
[
{
"user-input":"중앙동",
"full-address":"경기도 성남시 중원구 중앙동",
"coordinate":[
37.43959765091859,
127.1505276103632
],
"vicinity":true,
"type":"대표좌표"
},
{
"user-input":"중앙동",
"full-address":"경상남도 통영시 중앙동",
"coordinate":[
34.84482143430977,
128.42308057122085
],
"vicinity":true,
"type":"대표좌표"
},
{
"user-input":"중앙동",
"full-address":"경상남도 창원시 진해구 중앙동",
"coordinate":[
35.14902784720422,
128.66126916577852
],
"vicinity":true,
"type":"대표좌표"
},
...
]
JSON 형식이며 중앙동이라는 이름의 행정명칭은 우리나라에 여러 개이므로 복수의 결과를 모두 전달하고 vicinity가 true이므로 인근좌표이면서 type을 통해 “대표좌표”라는 것을 파악할 수 있습니다.
이번에는 “중앙로10″으로 호출하기 위해 다음 API를 사용합니다.
http://localhost:8080/Gp?command=gc;addr=중앙로10결과는 다음과 같습니다.
[
{
"user-input":"중앙로10",
"full-address":"경기도 가평군 중앙로 10 (가평읍)",
"coordinate":[
37.82638794989058,
127.5132600931772
],
"vicinity":false,
"type":"도로명주소"
},
{
"user-input":"중앙로10",
"full-address":"강원도 영월군 중앙로 10 (영월읍)",
"coordinate":[
37.18337775533778,
128.46505641724204
],
"vicinity":false,
"type":"도로명주소"
},
{
"user-input":"중앙로10",
"full-address":"강원도 원주시 중앙로 10 (인동)",
"coordinate":[
37.34571078558531,
127.95473309264851
],
"vicinity":false,
"type":"도로명주소"
},
...
]
vicinity 값이 false이므로 “정좌표”를 의미합니다.
마지막으로 정확히 1건으로 매칭되는 주소에 대한 경우입니다.
http://localhost:8080/Gp?command=gc;addr=아차산로7나길18결과는 다음과 같습니다.
[
{
"user-input":"아차산로7나길18",
"full-address":"서울특별시 성동구 아차산로7나길 18 (성수동2가)",
"coordinate":[
37.54770170889392,
127.05746040023593
],
"vicinity":false,
"type":"도로명주소"
}
]