컨텐츠로 이동
Orange GWS-JS
GWS-JS 가이드 GWS 가이드

개발 규약

메인 모듈
  • 파일명: orange-gws.js
  • 클래스명: OrangeGwsJS

OrangeGwsJS 모듈은 본 지도 SDK의 주요 API의 진입점을 제공합니다. 이 모듈은 새로운 지도뷰를 초기화하고, GWS 서버로 부터 GDX 카탈로그를 읽어 지도 레이어들을 요청합니다.

  • 애플리케이션에서 지도 인스턴스를 정의합니다. 이 객체를 생성함으로써 개발자는 지정한 DOM 요소에 지도를 삽입할 수 있습니다.
  • 메인 모듈은 가장 범용적으로 사용되는 API로 구성합니다.
  • 도메인에 따라 활용 여부가 선별적인 기능들은 네임스페이스로 나누는 code-split을 통해 메인 모듈의 복잡도와 코드 크기를 줄입니다.
  • 메인 모듈이 제공하는 코어 API의 범위는 대중적으로 사용되는 지도엔진들의 관행을 따릅니다. 네이버 지도 API의 문서를 참고하여 분류합니다.
    • 지도 초기화하기
    • 지도 이동/확대 축소
서브 모듈

지도 인스턴스는 gwsJS.edit와 같은 namespace와 유사한 인터페이스로 서브 모듈들을 제공합니다. 다음과 같은 네임스페이스로 분류되어 있습니다.

  • gwsJS.basemap: 배경지도를 사용자 정의합니다.
    • 기본 배경지도를 설정하기 위한 옵션들을 제공
  • gwsJS.file: GWS가 원본이 아닌 지도데이터 형식을 읽어 지도에 표출하거나 처리합니다.
    • CAD(DWG) 데이터 변환
    • Excel/CSV 데이터 변환
  • gwsJS.edit: 지도 피쳐를 편집하거나 지오메트리의 형태를 수정합니다.
    • 피쳐 조회/추가/수정/삭제
    • 지오메트리 수정
  • gwsJS.windows: 지도를 표시하는 윈도우를 처리합니다.
    • 지도 분할 뷰 UI
  • gwsJS.toc: GDX 카탈로그 메뉴를 표시합니다.
    • GDX에 등록된 레이어 목록
    • 레이어 on/off 메뉴
모듈 특징

서브 모듈은 네임스페이스와 유사한 인터페이스를 취하고 있지만, 실제 구현은 typescript의 네임스페이스와 동작이 다릅니다. 서브 모듈은 최초 모듈명(ex: gwsJS.edit)으로 접근시 getter를 재정의한 다음 초기화 함수로 서브 모듈을 동적 로딩합니다:

  get edit() {
    if (_isNil(this._edit)) {
      this._edit = require('./edit').default
      Object.keys(this._edit).filter(key => typeof this._edit[key] === 'function').forEach(key => {
        this._edit[key] = this._edit[key].bind(this)
      })
    }
    return this._edit
  }

지도 인스턴스에서 한번 서브 모듈이 초기화되면 지도 인스턴스의 생명주기 내에서 삭제되지 않고 상태가 유지됩니다.

또한 동적 로딩 후, 모듈에서 제공하는 API 함수는 지도 인스턴스(gwsJS)를 this로 바인딩합니다. 따라서 서브 모듈 구현시, 지도 인스턴스의 API 및 멤버 변수에 접근이 용이합니다.

  • 메인 모듈 기능 단순화, 가급적 최소한의 소스 유지
  • 전문 라이브러리를 사용할 경우, 라이브러리의 lazy loading을 수행
프로젝트 구성
  1. orange-gws-js
  • 메인 프로젝트
  • NPM 프로젝트 형식 (package.json)
  1. /htdocs
  • 데모 프로젝트
  • vanilla JS 프로젝트 형식
API 작성
  • 모듈 분리

새로운 API를 추가할 때 가장 먼저 고려할 점은 메인 모듈에 추가할 것인지, 아니면 서브 모듈에 추가할 것인지 결정하는 것입니다. 여러 모듈에 걸쳐 사용되는 범용함수라고 메인모듈에 추가하면 안됩니다. 메인 모듈은 API의 사용 빈도에 따라 가장 핵심적인 기능들로만 최소 유지해야합니다.

범용 함수 중, 지도 인스턴스의 내부 상태를 참조하지 않는 정적인 유틸리티 함수들은 util 모듈에 추가합니다.

  • API 함수 파라메터

지도 데이터소스를 특정하지 않는 OpenLayers API와는 다르게 데이터소스는 GWS 서버로 지정되어 있습니다. 따라서 GWS의 데이터소스를 정의하는 방식으로 함수 파라메터가 정해집니다.

  • gdxName: GDX 카탈로그명
  • layerName: GDX 내에서 고유한 레이어명
코드 작성

코드의 기본 패턴은 lodash-es 라이브러리와 ECMAScript6 등 코딩 패턴을 따릅니다. lodash 함수들은 다음과 같이 이름 충돌을 피하기 위해 _...로 앨리아스를 부여하여 사용합니다.

import {
  isArray as _isArray,
  first as _first,
  some as _some,
  every as _every,
} from 'lodash-es';
리팩토링
  1. orange-gws.js 프로젝트에 포함된 데모사이트 /htdocs의 정상화
  • GWS서버(44번)에서 GDX 삭제됨 (복구가 필요)
  • 예전에 GWS 서버에 존재하던 app API관련 기능 삭제
  • 대안으로 STL_GeoNexus_FE 프로젝트 활용
  1. 메인모듈의 불필요한 API 제거
  • 더 이상 지원하지 않으므로, 북마크(Bookmark) 기능 제거
  • 더 이상 지원하지 않으므로, 사용자레이어(UserLayer) 기능 제거