
위의 그림을 보면 뚫린 곳이 있는데 먼저 2개의 정점이 선택된 상태입니다. 이 상태에서 F키를 입력하면 면이 채워(Fill)집니다. F키를 연속으로 누르면 자동으로 인접한 면이 채워집니다. 아래는 그 결과입니다.


공간정보시스템 / 3차원 시각화 / 딥러닝 기반 기술 연구소 @지오서비스(GEOSERVICE)

위의 그림을 보면 뚫린 곳이 있는데 먼저 2개의 정점이 선택된 상태입니다. 이 상태에서 F키를 입력하면 면이 채워(Fill)집니다. F키를 연속으로 누르면 자동으로 인접한 면이 채워집니다. 아래는 그 결과입니다.


면을 선택하는 것이므로 편집 모드에서 Face 선택 모드로 하고 [Select]-[Select All By Trait]-[Faces By Sides]를 실행합니다. 4개보다 더 많은 정점으로 구성된 면인 N-Gon을 선택해야 하므로 Number of Vertices를 4로, Type을 Greater Than으로 선택하면 N-Gon만이 선택됩니다.

Bevel 기능을 사용했는데 변경한 옵션은 Width(원하는 값만큼), Segments(2), Shape(1), Miter Outer(Arc)입니다. Shape를 1로 주어야 원래 모델의 형상이 유지되고 Miter Outer를 Arc로 주어야 N-Gon이 적게 만들어집니다. 여기서 Bevel을 적용하기 위한 Edge를 선택해야 하는데 Select-[Select Sharp Edges]로 선택하면 한번에 간단히 선택할 수 있습니다.
웹 UI 라이브러리인 GWC에서 제공하는 ValueRangesColorMatcher 컴포넌트에 대한 예제 코드입니다.
먼저 DOM 구성은 다음과 같습니다.
그리고 CSS 구성은 다음과 같구요.
.center {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
gap: 1em;
}
#matcher {
width: 30em;
height: 15em;
}
js 코드는 다음과 같습니다.
window.onload = () => {
const data = [ 165, 120, 160, 200, 135, 115, 100, 125, 135, 190, 156, 130 ]
const rangeColors = [
{ ranges: [100, 120], color: '#00ff00'},
{ ranges: [120, 141], color: '#88ff00'},
{ ranges: [141, 160], color: '#ffff00'},
{ ranges: [160, 180], color: '#ff8800'},
{ ranges: [180, 200], color: '#ff0000'}
]
matcher.defineData(data, rangeColors)
document.querySelector(".btn-get").addEventListener("click", () => {
alert(JSON.stringify(matcher.valueRangeColors, null, 4))
})
GeoServiceWebComponentManager.instance.update();
};
실행 결과는 다음과 같습니다.
소수점을 설정할 수 있으며 속성은 toFixed 입니다.
정확히 작년 8월 1일 GEOSERVICE-WEB이 일반인을 대상으로 서비스를 시작하였습니다.
오로지 지오코딩 기능 하나만을 탑재하고 말입니다. 처음 서비스를 시작으로 300일을 넘어 단 하루도 멈추지 않고 서버가 뜨겁게 운영되고 있습니다. 앞으로 GEOSERVICE-WEB에 다양한 공간정보에 대한 기능이 추가로 제공될 예정인데요. 그간 파악했던 사용자의 니즈를 반영한 기능들을 중심으로 말입니다.
아래는 그중 공간 데이터 분석 기능 중 밀도도를 GEOSERVICE-WEB에서 만든 결과입니다.

GEOSERVICE-WEB이 추구하는 방향은 누구나 쉽게 접근할 수 있는 웹에서 공간 데이터를 새롭게 생성하거나 쉽게 편집하고 공간데이터를 이용한 분석을 통해 새로운 인사이트를 얻는데 있습니다.
아래는 위의 밀도도를 작성하기 위해서 실제 GEOSERVICE-WEB의 기능 사용에 대한 동영상입니다.
추가로 서울시 전체에 대한 인구 밀도도입니다. 데이터에 따라 만들어진 밀도도로 실제 서울시 인구 밀도도와 다를 수 있습니다.
