컨텐츠로 이동

OrangeGws

Classes

OrangeGwsJS

Orange Geo Web Server Javascript Lib. Class

Constants

ENGINE_TYPE

지원하는 엔진 타입

EVENT_NAMES

로딩과정에 발생하는 이벤트 목록

POS_DISPLAY_TYPE

마우스 위치 표시 방법

Orange Geo Web Server Javascript Lib. Class

Kind: global class

new OrangeGwsJS(url, gdxNames, options)

생성자

ParamTypeDescription
urlstringOrange GWS 호스트 URL
gdxNamesArray.<string>사용할 GDX 목록
optionsobject지도생성 및 운용 옵션

Example

const gwsJS = new OrangeGwsJS('http://192.168.0.169:18888/orange', ['COMMON.xml', 'ADMIN.xml'],
  {
    logLevel: {string} "info" or "debug", 필요에 따라 사용
    userId: {string} login한 사용자 id, bookmark, my지도 등에서 사용
    apiKey: {string} 허가받은 API_KEY
    gdxOwner: {string} API_KEK를 부여받은 소유자,
    map: {object} 맵에 관련된 옵션
    {
      ol: {object} OpenLayers에 관련된 옵션
      {
        view: {object} OpenLayers View에 관련된 옵션
        {
          center: {Array<double, 2>} 시작시 화면의 중심 [126.977881669, 37.566277263],
          zoom: {int} 시작시 화면의 확대 정도 (7~20) 12 정도사용하면 됨,
          minZoom: {int} 최소 줌레벨 7,
          maxZoom: {int} 최대 줌레벨 20,
          projection: {string} 화면 좌표계 'EPSG:5179',
        },
        map: {object} OpenLayers Map에 관련된 옵션
        {
          controls: {Array<string>} 화면에 배치할 콘트롤들 ['zoom', 'zoomSlide', 'scaleLine', 'rotate'],
          target: {string} 지도를 표시할 div tag id, 'map',
          rotate: {boolean} 지도화면을 shift+마우스로 회전시킬수 있는지 여부 (true),
        },
      },
      base_maps: 배경맵 레이어 설정
      [
        {
          title: "위성맵",
          group: [
            { title: "다음위성맵", layer: OrangeGwsJS.BASE_MAP.KAKAO.SATELLITE },
            { title: "하이브리드", layer: OrangeGwsJS.BASE_MAP.KAKAO.HYBRID },
          ],
        },
        {
          title: "지도맵",
          group: [{ title: "탱고맵", layer: OrangeGwsJS.BASE_MAP.TANGO.STANDARD }],
        },
      ],
      custom_maps: 커스텀맵 레이어 설정
      [
        {
          title: "로드뷰",
          group: [{ title: "로드뷰", layer: OrangeGwsJS.BASE_MAP.KAKAO.ROADVIEW }],
        },
      ],
      img_url: gdx image 경로 변경 옵션
      {
        from: {string} "/images/", 원본 : file:C:/..../images/map/icon.png
        to: {string} "./images/", 변경 : ./images/map/icon.png
      },
      web_font: 폰트관련된 옵션
      [
        "NanumSquare", 영문 폰트
        "NanumSquare", 한글 폰트
      ],
    }
  }
);

.getVersion ⇒ string

라이브러리 버전을 반환한다.

Kind: instance property of OrangeGwsJS
Returns: string - 라이브러리 버전

.doLayerInfoRebuildLayers ⇒ Promise

Admin : LayerInfo 재구축

Kind: instance property of OrangeGwsJS
Example

gwsJS.doLayerInfoRebuildLayers().then(() => {
  alert(`성공`);
}).catch(error => {
  alert(`실패: ${error}`);
});

1. 추가된 gdx에서
  1) 추가된 레이어 등록
2. 삭제된 gdx
  1) 모든 레이어 삭제
3. 변함없는 gdx
  1) 추가된 레이어 등록
  2) 삭제된 레이어 삭제
  3) 변경된 레이어 변경
    (1) 사용자가 수정한 내용은 변경하지 않음

.getLayerInfoGdxNames ⇒ Promise.<Array.<string>>

Admin : LayerInfo에 등록된 gdx 목록을 반환한다

Kind: instance property of OrangeGwsJS
Returns: Promise.<Array.<string>> - gdx_names
Example

gwsJS.getLayerInfoGdxNames().then(gdxNames => {
  const html = gdxNames.map(el => `<li>${el}</li>`).join('');
}).catch(error => {
  alert(`실패: ${error}`);
});

.getLayerInfoLayers ⇒ Promise.<Array.<object>>

Admin : gdx_name을 가진 gdx에 속한 레이어 목록을 반환한다

Kind: instance property of OrangeGwsJS
Returns: Promise.<Array.<object>> - layers

ParamTypeDescription
gdx_namestringgdx 명

Example

gwsJS.getLayerInfoLayers('SVC_STLOGIC.xml').then(layers => {
  const html = layers.map(el => `
    <li>
      <span>${el.layer_name}</span>
      <span>${el.title_name}</span>
    </li>
  `).join('');
}).catch(error => {
  alert(`실패: ${error}`);
});

// layers = [layer, ...]
// layer {
//   fid: {int} layer_id
//   owner: {string} gdx소유자
//   gdx_name: {string} gdx이름
//   layer_name: {string} 레이어이름(gdx내 유일)
//   title_name: {string} 타이틀
//   table_name: {string} 테이블명
//   layer_path: {string} gdx내에서 layer의 위치
//   layer_srid: {int} layer SRID
//   layer_use: {boolean} layer 사용여부
//   geo_field: {string} geometry 필드명
//   geo_type: {string} geometry type {point|multipoint|linestring|multilinestring|polygon|multipolygon}
//   layer_check: {boolean} 시작시 화면 표시 여부
//   showlabel: {boolean} 라벨 표시 여부
//   selectable: {boolean} 선택 가능 여부
//   editable: {boolean} 편집 가능 여부
//   min_level: {int} 최소 줌레벨(7~20)
//   max_level: {int} 최대 줌레벨(7~20)
// }

.getLayerInfoLayer ⇒ Promise.<object>

Admin : layer_id을 가진 레이어를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: Promise.<object> - layer

ParamTypeDescription
layer_idint레이어 id

Example

gwsJS.getLayerInfoLayer('airplanes').then(layer => {
  const html = `
    <div>
      <span>${layer.layer_name}</span>
      <span>${layer.title_name}</span>
    </div>
  `;
}).catch(error => {
  alert(`실패: ${error}`);
});

// layer {
//   fid: {int} layer_id
//   owner: {string} gdx소유자
//   gdx_name: {string} gdx이름
//   layer_name: {string} 레이어이름(gdx내 유일)
//   title_name: {string} 타이틀
//   table_name: {string} 테이블명
//   layer_path: {string} gdx내에서 layer의 위치
//   layer_srid: {int} layer SRID
//   layer_use: {boolean} layer 사용여부
//   key_field: {string} key 필드명
//   lab_field: {string} label 필드명
//   geo_field: {string} geometry 필드명
//   geo_type: {string} geometry type <point|multipoint|linestring|multilinestring|polygon|multipolygon>
//   layer_check: {boolean} 시작시 화면 표시 여부
//   showlabel: {boolean} 선택 가능 여부
//   selectable: {boolean} 선택 가능 여부
//   editable: {boolean} 편집 가능 여부
//   min_level: {int} 최소 줌레벨(7~20)
//   max_level: {int} 최대 줌레벨(7~20)
// }

.getLayerInfoColumns ⇒ Promise.<Array.<object>>

Admin : layer_id을 가진 레이어의 컬럼들을 반환한다.

Kind: instance property of OrangeGwsJS
Returns: Promise.<Array.<object>> - columns

ParamTypeDescription
layer_idstring컬럼 정보를 얻을 레이어 id

Example

gwsJS.getLayerInfoColumns('airplanes').then(columns => {
  const html = columns.map(el => `
    <li>
      <span>${el.name}</span>
      <span>${el.type}</span>
    </li>
  `).join('');
}).catch(error => {
  alert(`실패: ${error}`);
});

// columns = [column, ...]
// column {
//   name: {string} 컬럼명
//   type: {string} 컬럼 타입
//                 normal:<string|integer|double|boolean>
//                 geometry:<point|multipoint|linestring|multilinestring|polygon|multipolygon>
//   use: {string} 컬럼 사용 용도 <''|key|use|geo>
//   alias: {string} 컬럼 한글 표현
// }

.updateLayerInfoLayer ⇒ Promise

Admin : 레이어 정보를 갱신한다

Kind: instance property of OrangeGwsJS

ParamTypeDescription
layer_idint갱신할 레이어 id
payloadLayerInfo갱신할 정보

Example

LayerInfo {
  layer_use: {boolean} 레이어 사용여부
  layer_check: {boolean} 레이어 초기표시여부
  showlabel: {boolean} 라벨 표시 여부
  selectable: {boolean} 선택 가능 여부
  editable: {boolean} 편집 가능 여부
  min_level: {int} 최소 표시 레벨 (0~20)
  max_level: {int} 최대 표시 레벨 (0~20)
}

gwsJS.updateLayerInfoLayer(layer_id, payload).then(layer_info => {
  console.log('성공: ', layer_info);
}).catch(error => {
  alert(`실패: ${error}`);
});

.updateLayerInfoColumns ⇒ Promise

Admin : 레이어 컬럼 정보를 갱신한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
layer_idint컬럼 정보를 갱신할 레이어 id
payloadArray.<ColumnInfo>갱신할 컬럼 정보

Example

ColumnInfo {
  name: {string} 컬럼명
  type: {string} 컬럼 타입
                normal:<string|integer|double|boolean>
                geometry:<point|multipoint|linestring|multilinestring|polygon|multipolygon>
  use: {string} 컬럼 사용 용도 <''|key|use|geo>
  alias: {string} 컬럼 한글 표현
}
payload = [ColumnInfo, ...]

gwsJS.updateLayerInfoColumns(layer_id, payload).then(() => {
  alert(`성공`);
}).catch(error => {
  alert(`실패: ${error}`);
});

.getLayerInfo ⇒ Array.<LayerInfo>

User : gdx별 사용할 수 있는 레이어 목록을 반환한다.

Kind: instance property of OrangeGwsJS
Returns: Array.<LayerInfo> - gdx별 레이어목록
Example

let layer_info = getLayerInfo();
if (layer_info['COMMON.xml']) {
  let common = layer_info['COMMON.xml'];
  for (let layer of common) {
    console.log(layer.id, layer.layer_name, ...);
    for (let column of layer.columns) {
      console.log(column.name, ...);
    }
  }
}

{ gdx_name {string} : layers {Array<LayerInfo>}, ... }

LayerInfo {
  id: {int} layer_id
  owner: {string} gdx소유자
  gdx_name: {string} gdx이름
  layer_name: {string} 레이어이름(gdx내 유일)
  title_name: {string} 타이틀
  table_name: {string} 테이블명
  layer_path: {string} gdx내에서 layer의 위치
  layer_srid: {int} layer SRID
  layer_use: {boolean} layer 사용여부
  geo_field: {string} geometry 필드명
  geo_type: {string} geometry type <point|multipoint|linestring|multilinestring|polygon|multipolygon>
  layer_check: {boolean} 시작시 화면 표시 여부
  selectable: {boolean} 선택 가능 여부
  editable: {boolean} 편집 가능 여부
  min_level: {int} 최소 줌레벨(7~20)
  max_level: {int} 최대 줌레벨(7~20)
  columns: {Array<ColumnInfo>} 컬럼정보
}

ColumnInfo {
  name {string} 컬럼명
  type {string} 컬럼 타입
                normal:<string|integer|double|boolean>
                geometry:<point|multipoint|linestring|multilinestring|polygon|multipolygon>
  use {string} 컬럼 사용 용도 <''|key|use|geo>
  alias {string} 컬럼 한글 표현
}

.getBookmarks ⇒ Promise.<Array.<object>>

북마크목록을 반환한다

Kind: instance property of OrangeGwsJS
Returns: Promise.<Array.<object>> - bookmarks 북마크 목록
Example

bookmark = {
  id: {int} 북마크 id
  userid: {string} 사용자ID
  share: {string} 공유여부(Y/N)
  mark_name: {string} 북마크명
  mark_zoom: {int} 줌레벨
  mark_time: {string} 등록일시
  lonlat: {Array<double, 2>} 이동좌표
}

.addBookmark ⇒ Promise.<object>

새로운 북마크를 등록한다

Kind: instance property of OrangeGwsJS
Returns: Promise.<object> - bookmark 추가된 북마크

ParamTypeDescription
namestring북마크명
zoomint줌레벨
centerArray.<double, 2>EPSG:5179 좌표
sharestring공유여부

.addBookmarkLonLat ⇒ Promise.<object>

새로운 북마크를 등록한다.

Kind: instance property of OrangeGwsJS
Returns: Promise.<object> - bookmark 추가된 북마크

ParamTypeDescription
namestring북마크명
zoomint줌레벨
lonlatArray.<double, 2>EPSG:4326 좌표
sharestring공유여부

.delBookmarks ⇒ Promise.<boolean>

북마크를 삭제한다.

Kind: instance property of OrangeGwsJS
Returns: Promise.<boolean> - 성공여부

ParamTypeDescription
idsArray.<int>삭제할 북마크 id 목록

.editBookmark ⇒ Promise.<boolean>

북마크를 편집한다. 편집대상은 공유여부와 북마크명이다.

Kind: instance property of OrangeGwsJS
Returns: Promise.<boolean> - 삭제성공여부

ParamTypeDescription
idint북마크ID
sharestring공유여부
mark_namestring북마크명

.addUserLayerInfo ⇒ Promise.<number>

사용자 레이어 정보를 추가한다

Kind: instance property of OrangeGwsJS
Returns: Promise.<number> - layer_id 레이어ID

ParamType
fieldsArray.<string>
optionsobject

.removeUserLayerInfo ⇒ Promise

사용자 레이어를 삭제한다

Kind: instance property of OrangeGwsJS

ParamTypeDescription
targetnumber | ol.Feature | Array.<ol.Feature>레이어ID

.updateUserLayerInfo ⇒ Promise

사용자 레이어 정보 업데이트

Kind: instance property of OrangeGwsJS

ParamTypeDescription
layer_idnumber레이어ID
featureol.Feature업데이트 정보

.getUserLayerInfo ⇒ Promise.<object>

레이어 정보 피쳐를 반환한다

Kind: instance property of OrangeGwsJS
Returns: Promise.<object> - feature 레이어 정보

ParamTypeDescription
layer_idnumber레이어ID

.getUserLayerInfoAll ⇒ Promise.<Array.<object>>

접근가능한 모든 레이어 정보 피쳐를 반환한다

Kind: instance property of OrangeGwsJS
Returns: Promise.<Array.<object>> - features 레이어 정보

ParamTypeDescription
layer_idnumber레이어ID

.addUserLayerFeatures ⇒ Promise

새로운 사용자 레이어 피쳐들을 등록한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
featuresArray.<Feature>{layer_id, geom, attributes}

.getUserLayerFeatures ⇒ Array.<ol.Feature>

사용자 레이어 데이터를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: Array.<ol.Feature> - 피쳐

ParamTypeDescription
layer_idnumber레이어ID

.createUserLayerImporter

새로운 사용자 레이어 타입을 추가를 위한 임포터를 반환한다

Kind: instance property of OrangeGwsJS

ParamTypeDescription
targetFile | ArrayBufferFile 객체 / ArrayBuffer

.getURL ⇒ string

초기에 설정한 Orange GWS 호스트 URL을 반환한다.

Kind: instance property of OrangeGwsJS
Returns: string - 엔진 url을 반환한다.

.getGdxNames ⇒ Array.<string>

요청한 GDX중에 실제 얻어진 GDX 명칭을 반환한다.

Kind: instance property of OrangeGwsJS
Returns: Array.<string> - GDX 이름 목록

.isContainsGdxName ⇒ boolean

gdx가 로드되었는지 확인

Kind: instance property of OrangeGwsJS
Returns: boolean - gdx 로드 여부 trud(로드됨), false(로드안됨)

ParamTypeDescription
gdxNamestring확인할 gdx명

.getProjection ⇒ string

화면 좌표계를 EPSG 코드로 반환한다.

Kind: instance property of OrangeGwsJS
Returns: string - 화면좌표계(ex, EPSG:4326)

.getApiKey ⇒ string

초기에 설정한 엔진 접근 API KEY를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: string - 엔진접근 API_KEY

.getTOC ⇒ TOC

TOC(Table Of Contents)를 반환한다. TOC는 트리구조의 레이어 목록이다.

Kind: instance property of OrangeGwsJS
Returns: TOC - TOC(Table Of Contents)

orangeGwsJS.getMap ⇒ ol.Map

Deprecated

화면에 지도를 그리고 있는 ol.Map을 반환한다.

Kind: instance property of OrangeGwsJS
Returns: ol.Map - ol.Map

.setConstraintExtent

모든 레이어에 제약영역을 설정한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
extentArray.<double, 4>제약영역 [sx, sy, ex, ey]

.clearConstraintExtent

모든레이어들을 대상으로 설정된 제약영역을 초기화 시킨다.

Kind: instance property of OrangeGwsJS

.createOLStyle ⇒ ol.style.Style

문자열로 정의된 스타일을 OpenLayers 스타일로 변환한다.

Kind: instance property of OrangeGwsJS
Returns: ol.style.Style - 변환된 OpenLayers 스타일

ParamTypeDescription
styleStyleLike | undefinedFeature의 스타일

Example

StyleLike {Style} {Array<Style>} {StyleFunction} Style, Style 배열, Style 함수

Style {
  fill {Fill|undefined} :,
  stroke {Stroke|undefined} :,
  image {Image|undefined} :,
  text {Text|undefined} :
}

Fill {
  color {string} : rgb, rgba, #color
}

Stroke {
  color {string} : rgb, rgba, #color,
  width {number} : 1.25
}

Image {Icon} {Circle}

Icon {
  anchor {Array<number>(defaults to [0.5, 0.5])} {string} : "center-center"
  anchorXUnits {'fraction'} {'pixels'}: 'fraction',
  anchorYUnits {'fraction'} {'pixels'}: 'fraction',
  color {string} : rgb, rgba, #color,
  src {string|undefined} : 'image/pin.png'
}

Circle {
  radius {number}: 반경
  fill {Fill}: 채우기
  stroke {Stroke}: 선형
}

Text {
  text {string|fundtion} : 
  font {string}: 'bold 10px sans-serif',
  textAlign {string}: 'left', 'right', 'center',
  textBaseline {string}: 'bottom', 'top', 'middle'
  offsetX {number}: 0,
  offsetY {number}: 0,
  fill {Fill|undefined}:
  stroke {Stroke|undefined}:
  backgroundFill {Fill|undefined}
  backgroundStroke {Stroke|undefined}
}

.overlayAddMarker ⇒

새로운 마커를 추가하고 마커의 id를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: 얻어진 ID, 추가가 안되면 undefined

ParamTypeDescription
idnumber | string | undefined관리가 필요하면 id를 넣고, 아니면 undefined
positionArray.<double, 2>마커 위치
styleStyle마커 스타일

Example

Style {
  anchor: {string} "center-center" 세로축-가로축([bottom|center|top]-[left|center|right]),
  src: {string|function} 'image/pin.png' 이미지 URL
},

.overlayGetMarkerById ⇒ ol.Feature | null

id를 가진 마커를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: ol.Feature | null - 찾아진 마커, 못 찾으면 null

ParamTypeDescription
idnumber | string화면에 등록된 마커의 id

.overlaySetMarkerPosition

id를 가진 마커의 위치를 지정한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
idnumber | string위치를 지정할 마커의 id
positionArray.<double, 2>지정할 위치

.overlayRemoveMarker

화면에 등록된 마커를 제거한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
idnumber | string제거할 마커 id

.overlayRemoveAllMarkers

화면에 등록된 모든 마커를 제거한다.

Kind: instance property of OrangeGwsJS

.overlayAddCircle ⇒ number | string | undefined

새로운 원을 추가하고 원의 id를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: number | string | undefined - 원이 등록되면 등록된 id, 안되면 undefined

ParamTypeDescription
idnumber | string | undefined관리가 필요하면 id를 넣고, 아니면 undefined
centerArray.<double, 2>원의 중심
radiusdouble원의 반경
styleStyle원의 스타일

Example

style {
  fill: { color: rgba(r,g,b,a) },
  stroke: {
    color: rgba(r, g, b, a),
    width: 1,
  },
},

.overlayGetCircleById ⇒ ol.Feature | null

id를 가진 원를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: ol.Feature | null - 찾아진 원, 못 찾으면 null

ParamTypeDescription
idnumber | string화면에 등록된 원의 id

.overlaySetCircle

id를 가진 원의 위치와 크기를 재조정한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
idnumber | string위치를 지정할 원의 id
centerArray.<double, 2>원의 중심
radiusdouble원의 반지름

.overlaySetCircleCenter

id를 가진 원의 위치를 조정한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
idnumber | string위치를 지정할 원의 id
centerArray.<double, 2>원의 중심

.overlaySetCircleRadius

id를 가진 원의 반지름을 재조정한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
idnumber | string위치를 지정할 원의 id
radiusdouble원의 반지름

.overlayRemoveCircle

id를 가진 화면에 등록된 원을 제거한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
idnumber | string제거할 원의 id

.overlayRemoveAllCircles

화면에 등록된 모든 원을 제거한다.

Kind: instance property of OrangeGwsJS

.overlayAddRectangle ⇒ number | string | undefined

새로운 사각형을 추가하고 사각형의 id를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: number | string | undefined - 사각형이 등록되면 등록된 id, 안되면 undefined

ParamTypeDescription
idnumber | string | undefined관리가 필요하면 id를 넣고, 아니면 undefined
rectArray.<double, 4>사각형 좌하단/우상단
styleStyle사각형의 스타일

Example

style {
  fill: { color: rgba(r,g,b,a) },
  stroke: {
    color: rgba(r, g, b, a),
    width: 1,
  },
},

.overlayGetRectangleById ⇒ ol.Feature | null

id를 가진 사각형을 반환한다.

Kind: instance property of OrangeGwsJS
Returns: ol.Feature | null - 찾아진 사각형, 못 찾으면 null

ParamTypeDescription
idnumber | string화면에 등록된 사각형의 id

.overlaySetRectangle

id를 가진 사각형의 위치와 크기를 재조정한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
idnumber | string위치를 지정할 사각형의 id
rectArray.<double, 4>사각 영역

.overlayRemoveRectangle

id를 가진 화면에 등록된 사각형을 제거한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
idnumber | string제거할 사각형의 id

.overlayRemoveAllRectangles

화면에 등록된 모든 사각형을 제거한다.

Kind: instance property of OrangeGwsJS

.overlayAddFeature ⇒ number | string | undefined

Feature를 추가하고 Feature id를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: number | string | undefined - Feature가 등록되면 등록된 id, 안되면 undefined

ParamTypeDescription
featureol.FeatureFeature
styleStyleLike | undefinedFeature의 스타일

Example

StyleLike {Style} {Array<Style>} {StyleFunction} Style, Style 배열, Style 함수

Style {
  fill {Fill|undefined} :,
  stroke {Stroke|undefined} :,
  image {Image|undefined} :,
  text {Text|undefined} :
}

Fill {
  color {string} : rgb, rgba, #color
}

Stroke {
  color {string} : rgb, rgba, #color,
  width {number} : 1.25
}

Image {Icon} {Circle}

Icon {
  anchor {Array<number>(defaults to [0.5, 0.5])} {string} : "center-center"
  anchorXUnits {'fraction'} {'pixels'}: 'fraction',
  anchorYUnits {'fraction'} {'pixels'}: 'fraction',
  color {string} : rgb, rgba, #color,
  src {string|undefined} : 'image/pin.png'
}

Circle {
  radius {number}: 반경
  fill {Fill}: 채우기
  stroke {Stroke}: 선형
}

Text {
  text {string|fundtion} : 
  font {string}: 'bold 10px sans-serif',
  textAlign {string}: 'left', 'right', 'center',
  textBaseline {string}: 'bottom', 'top', 'middle'
  offsetX {number}: 0,
  offsetY {number}: 0,
  fill {Fill|undefined}:
  stroke {Stroke|undefined}:
  backgroundFill {Fill|undefined}
  backgroundStroke {Stroke|undefined}
}

.overlayGetFeatureById ⇒ ol.Feature | null

id를 가진 Feature를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: ol.Feature | null - 찾아진 Feature사각형, 못 찾으면 null

ParamTypeDescription
idnumber | string화면에 등록된 Feature의 id

.overlayRemoveFeature

id를 가진 화면에 등록된 Feature를 제거한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
idnumber | string제거할 Feature의 id

.overlayRemoveAllFeatures

화면에 등록된 모든 사각형을 제거한다.

Kind: instance property of OrangeGwsJS

.addOverlay ⇒ ol.Overlay

새로운 오버레이를 추가하고 오버레이의 id를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: ol.Overlay - 추가된 오버레이 객체

ParamTypeDescription
idnumber
추가할 오버레이의 id
positionArray.<double, 2>추가할 오버레이의 위치
optionsOverlayOption오버레이 옵션

Example

let id = 0;
let coordinate = gwsJS.getCenter();
let element = document.createElement("div");
element.innerHTML = "<h1>TEST</h1>";
let options = { element: content, stopEvent: false }
let overlay = gwsJS.addOverlay(id, coordinate, options);

.getOverlayById ⇒ ol.Overlay

id를 가진 화면에 등록된 오버레이를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: ol.Overlay - 찾아진 오버레이, 못찾으면 null

ParamTypeDescription
idnubmer | string찾을 오버레이 id

.setOverlayPosition

id로 검색된 오버레이의 위치를 새로 지정한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
idnumber | string검색할 오버레이 id
positionArray.<double, 2>옮길 오버레이 위치

.removeOverlay

id로 검색된 오버레이를 제거한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
idnumber | string삭제할 오버레이 id

.addInteractionTranslate ⇒

마우스 드래그로 옮길 수 있는 객체들을 화면에 등록한다.

Kind: instance property of OrangeGwsJS
Returns: 만들어진 이동콘트롤

ParamTypeDescription
featuresArray.<ol.Feature> | ol.Feature등록할 객체들
handlersObject.<function()>마우스 이벤트 발생시 처리할 함수들

Example

handlers = { translatestart: onDragStart {function}, translateend: onDragEnd {function} }

.removeInteractionTranslate

등록된 이동콘트롤을 제거한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
translateol.interaction.Translate삭제할 이동콘트롤

.getLayers ⇒ Array.<ol.Layer>

OpenLayers Layer Tree에서 모든 ol.Layer를 목록으로 만들어 반환한다.

Kind: instance property of OrangeGwsJS
Returns: Array.<ol.Layer> - 모든 Layer 목록

.setDefaultContextmenu

기본 메뉴를 등록한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
menu_itemobject등록할 메뉴아이템

Example

{
  label: {string} "북마크",
  icon: {string} "./images/svg/bookmark.svg",
  onClick: {function} handler(coordinate)
}

.addContextmenu

콘텍스트 메뉴를 추가한다

Kind: instance property of OrangeGwsJS

ParamTypeDescription
keystring등록할 key
menu_itemobject등록할 메뉴아이템

Example

{
  label: {string} "북마크",
  icon: {string} "./images/svg/bookmark.svg",
  onClick: {function} handler(coordinate)
}

.enableContextmenu

key값으로 등록되어 있는 메뉴를 활성화 한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
keystring활성화할 메뉴 key

.disableContextmenu

컨텍스트 메뉴를 비활성화 시킨다.

Kind: instance property of OrangeGwsJS

.isShowContextmenu ⇒ boolean

컨텍스트 메뉴가 보여지고 있는지를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: boolean - 표시여부

.hideContextmenu

컨텍스트 메뉴를 숨긴다.

Kind: instance property of OrangeGwsJS

.getActiveMenu ⇒ menu | null

현재 활성화된 메뉴를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: menu | null - 활성화된 메뉴, 없으면 null

.registerOverviewMap

인덱스 맵을 생성한다

Kind: instance property of OrangeGwsJS

ParamTypeDescription
target*인덱스맵을 생성할 div id
baseMapTitle*배경 지도로 사용할 레이어 타이틀
collapsed*시작시 접혀있게 할지 여부
tipLabel*overviewmap 라벨
label*기본 라벨 default ’<‘, element 사용 가능
collapseLabel*접혀있을 때 라벨 default ’>’ element 사용 가능

.registerIndexviewMap

인덱스 맵을 생성한다

Kind: instance property of OrangeGwsJS

ParamTypeDescription
target*인덱스맵을 생성할 div id
baseMapTitle*배경 지도로 사용할 레이어 타이틀
collapsed*시작시 접혀있게 할지 여부
tipLabel*overviewmap 라벨
label*기본 라벨 default ’<‘, element 사용 가능
collapseLabel*접혀있을 때 라벨 default ’>’ element 사용 가능

orangeGwsJS.getOverviewMap ⇒ ol.control.OverviewMap

Deprecated

오버뷰 맵을 반환한다.

Kind: instance property of OrangeGwsJS
Returns: ol.control.OverviewMap - 오버뷰맵

.overviewMapGetCollapsed ⇒ boolean

인덱스맵을 닫혀있는지 여부를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: boolean - 인덱스맵이 닫혀있는지 여부

.overviewMapSetCollapsed

인덱스맵을 닫거나/펼친다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
collapsedbooleantrue면 닫힘, false면 열림

.registerOnClickMap

Map을 클릭할 때 호출될 함수 등록

Kind: instance property of OrangeGwsJS

ParamTypeDescription
handlerfunction(e) : event로 coordinate가 현재 마우스 위치에 대한 Map 좌표이다.

.unregisterOnClickMap

Map을 클릭할 때 호출될 함수를 제거

Kind: instance property of OrangeGwsJS

ParamTypeDescription
handlerfunction(e) : 이미 등록되어 있는 함수

.getPosDisplayType ⇒ POS_DISPLAY_TYPE

마우스 위치 표시 방법을 반환한다.

Kind: instance property of OrangeGwsJS
Returns: POS_DISPLAY_TYPE - 마우스 위치 표시방법

.activeCurrentLevel

Map 이동이 끝난 후 Zoom 레벨을 표시해준다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
targetstring표시될 div id
typestring[“original”, “changed”], original(실제 레벨), changed(최소레벨을 1로 보는 레벨)

.deactiveCurrentLevel

화면 레벨을 표시하는 작업을 멈춘다.

Kind: instance property of OrangeGwsJS

.isActivateCurrentLevel ⇒ boolean

현재 화면 레벨을 표시해 주고 있는지 여부를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: boolean - 화면 레벨 표시여부

.activeCenterPosition

Map 이동이 끝난 후 id div 안쪽의 HTML에 마우스 위치를 써준다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
targetstring표시될 div id
typestring[“utm” or “deg” or “dms”]

.deactiveCenterPosition

화면 중심을 표시하는 작업을 멈춘다.

Kind: instance property of OrangeGwsJS

.isActivateCenterPosition ⇒ boolean

현재 화면 중심을 표시해 주고 있는지 여부를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: boolean - 화면 중심위치 표시여부

.activeMousePosition

Map 위에 마우스가 이동할 때 id div 안쪽의 HTML에 마우스 위치를 써준다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
targetstring표시될 div id
typestring[“utm” or “deg” or “dms”]

.deactiveMousePosition

마우스 위치를 화면에 표시하는 작업을 멈춘다.

Kind: instance property of OrangeGwsJS

.isActivateMousePosition ⇒

현재 마우스 위치를 표시해 주고 있는지 여부를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: boolean 마우스 위치 표시여부

.registerOnMoveMap

Map 위에 마우스가 이동할 때 호출될 함수 등록

Kind: instance property of OrangeGwsJS

ParamTypeDescription
handlerfunction(e): event로 coordinate가 현재 마우스 위치에 대한 Map 좌표이다.

.unregisterOnMoveMap

Map 위에 마우스가 이동할 때 호출될 함수 제거

Kind: instance property of OrangeGwsJS

ParamTypeDescription
handleerfunction(e): 제거할 함수(등록했던 함수와 같아야 함)

.toStringUTM ⇒ string

XY좌표를 입력하면 포매팅된 XY좌표 문자열을 반환한다.

Kind: instance property of OrangeGwsJS
Returns: string - XY좌표 문자열

ParamTypeDescription
coordinateArray.<double, 2>UTM 좌표

Example

let coordinate=[123456.12345, 123456.12345];
let utmString = gwsJS.toStringUTM(coordinate)
utmString : '123456.12 m , 123456.12 m'

.toStringDEG ⇒ string

경위도좌표를 입력하면 경위도좌표 문자열을 반환한다.

Kind: instance property of OrangeGwsJS
Returns: string - 경위도 좌표 문자열

ParamTypeDescription
degreesArray.<double, 2>경위도 좌표

Example

let lonlat=[127.123456789, 37.0123456789];
let degString = gwsJS.toStringDEG(lonlat)
degString : 'E 127.123456789°, N 37.012345678°'

.toStringDMS ⇒ string

경위도좌표를 입력하면 도분초좌표 문자열을 반환한다.

Kind: instance property of OrangeGwsJS
Returns: string - 도분초 좌표 문자열

ParamTypeDescription
degreesArray.<double, 2>경위도 좌표

Example

let lonlat=[127.123456789, 37.0123456789];
let dmsString = gwsJS.toStringDMS(lonlat)
dmsString : 'E 127° 07′ 47.154″ N 37° 35′ 28.287″'

.toLonLat ⇒ Array.<double, 2>

직각 좌표를 경위도로 변경해준다.

Kind: instance property of OrangeGwsJS
Returns: Array.<double, 2> - 경위도좌표 [lon, lat]

ParamTypeDescription
coordinateArray.<double, 2>직각좌표 [x, y]

Example

let coordinate=[123456.12345, 123456.12345];
let lonlat = gwsJS.toLonLat(coordinate)
lonlat : [127.123456789, 37.0123456789]

.fromLonLat ⇒ Array.<double, 2>

경위도 좌표를 직각 좌표로 변환해준다.

Kind: instance property of OrangeGwsJS
Returns: Array.<double, 2> - 직각좌표 [x, y]

ParamTypeDescription
lonLatArray.<double, 2>경위도좌표 [lon, lat]

Example

let lonlat=[127.123456789, 37.0123456789];
let coordinate = gwsJS.fromLonLat(lonlat)
coordinate : [123456.12345, 123456.12345]

.lonLatToDms ⇒ Array.<DMS>

경위도 값을 DMS 값으로 전달

Kind: instance property of OrangeGwsJS
Returns: Array.<DMS> - 도분초 형태로 변환된 값 [{d

,m
,s
}, {d
,m
,s
}]

ParamTypeDescription
lonlatArray.<double, 2>경위도 좌표 [lon,lat]

Example

DMS {
  d: {int} degrees,
  m: {int} minutes,
  s: {double} seconds,
}
let lonlat = [127.12345678, 37.12345678];
let dms = gwsJS.lonLatToDms(lonlat);
dms : [{ d:127, m:7, s:24.4444 }, { d:37, m:7, s:24.4444 }]

.dmsToLonLat ⇒ Array.<double, 2>

DMS 값을 경위도 값으로 변환

Kind: instance property of OrangeGwsJS
Returns: Array.<double, 2> - 경위도 좌표계 [lon, lat]

ParamTypeDescription
dmsArray.<DMS, 2>도분초 좌표계 [{d
,m
,s
},{d
,m
,s
}]

Example

DMS {
  d {int} : degrees,
  m {int} : minutes,
  s {double} : seconds,
}
let dms= [{ d:127, m:7, s:24.4444 }, { d:37, m:7, s:24.4444 }];
let lonlat = gwsJS.dmsToLonLat(dms);
lonlat : [127.12345678, 37.12345678]

.degreesToDms ⇒ DMS

degrees 값을 dms 형식으로 변환한다.

Kind: instance property of OrangeGwsJS
Returns: DMS - dms 형식

ParamType
degreesnumber

Example

DMS {
  d {int} : degrees,
  m {int} : minutes,
  s {double} : seconds,
}

let degerees = 127.12345678;
let dms = gwsJS.degreesToDms(degrees);
dms = {d:127, m:7, s:24.4444}

.dmsToDegrees ⇒ number

dms 값을 degrees로 변환한다.

Kind: instance property of OrangeGwsJS
Returns: number - 변환된 degrees

ParamTypeDescription
dint
mint
sdouble

Example

let degerees = gwsJS.dmsToDegrees(127, 7, 24.4444);
degerees = 127.12345678

.getCenter ⇒ Array.<double, 2>

현재 화면의 중심 좌표를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: Array.<double, 2> - 화면중심 직각좌표[x, y]
Example

let coordinate = gwsJS.getCenter();
coordinate : [123456.12345, 123456.12345]

.getCenterLonLat ⇒ Array.<double, 2>

현재 화면의 중심좌표를 경위도로 반환한다.

Kind: instance property of OrangeGwsJS
Returns: Array.<double, 2> - [lon, lat]
Example

let lonlat = gwsJS.getCenterLonLat();
lonlat : [127.12345678, 37.12345678]

.getZoom ⇒ int

현재 줌 레벨을 반환한다.(언제나 min:7, max:20 안쪽)

Kind: instance property of OrangeGwsJS
Returns: int - 줌 레벨
Example

let zoom = gwsJS.getZoom();
zoom : 7 (7~20사이)

.getMinZoom ⇒ int

최소 줌 레벨을 반환한다.(가장 축소했을 때)

Kind: instance property of OrangeGwsJS
Returns: int - 최소 줌 레벨
Example

let zoom = gwsJS.getMinZoom();
zoom : 7

.getMaxZoom ⇒ int

최대 줌 레벨을 반환한다.(가장 확대했을 때)

Kind: instance property of OrangeGwsJS
Returns: int - 최대 줌 레벨
Example

let zoom = gwsJS.getMaxZoom();
zoom : 20

.getExtent ⇒ Array.<double, 4>

현재 화면 지도 영역을 직각 좌표계로 반환한다.

Kind: instance property of OrangeGwsJS
Returns: Array.<double, 4> - [sx, sy, ex, ey]
Example

let extent = gwsJS.getExtent();
extent : [123456.12, 123456.12, 223456.12, 223456.12]

.getExtentLonLat ⇒ Array.<double, 4>

현재 화면 지도 영역을 경위도 좌표계로 반환한다.

Kind: instance property of OrangeGwsJS
Returns: Array.<double, 4> - [sLon, sLat, eLon, eLat]
Example

let lonLatExtent = gwsJS.getExtentLonLat();
lonLatExtent : [127.123456789, 37.123456789, 127.223456789, 37.223456789]

.getRotation ⇒ double

화면의 회전값을 반환한다. 회전값은 시계방향으로의 degrees 값이다.

Kind: instance property of OrangeGwsJS
Returns: double - 화면 회전값(시계방향 degrees)
Example

let azimuth = gwsJS.getRotation();
azimuth : 45 (45도 우측으로 회전된 상태라는 뜻)

.panTo

현재의 Zoom 레벨을 유지하며 직각 좌표 위치로 이동한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
coordinateArray.<double, 2>[x, y] 이동할 위치

Example

let coordinate = [123456.12, 123456.12]
gwsJS.panTo(coordinate);

.panToLonLat

coordinate : 현재의 Zoom 레벨을 유지하며 경위도 좌표 위치로 이동한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
coordinateArray.<double, 2>[lon, lat] 이동할 위치

Example

let lonlat = [127.123456789, 36.123456789]
gwsJS.panToLonLat(lonlat);

.setZoom

화면의 중심은 이동하지 않고, 주어진 zoom 레벨로 확대/축소를 수행한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
zoomint확대/축소할 zoom 레벨

Example

let zoom = gwsJS.getZoom();
zoom : 10
gwsJS.setZoom(zoom + 1); // 확대

.setView

화면의 확대/축소와 주어진 직각 좌표로 이동을 함께 수행한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
zoomint확대할 zoom 레벨
centerArray.<double, 2>[x, y] 이동할 위치

Example

let zoom = 10;
let center = [123456.12, 123456.12];
gwsJS.setView(zoom, center);

.setView

화면의 확대/축소와 주어진 직각 좌표로 이동을 함께 수행한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
zoomint확대할 zoom 레벨
centerArray.<double, 2>[x, y] 이동할 위치
rotateint이동할 지도 회전

Example

let zoom = 10;
let rotate = 45;
let center = [123456.12, 123456.12];
gwsJS.setView(zoom, center, rotate);

.setViewLonLat

화면의 확대/축소와 주어진 경위도 좌표로 이동을 함께 수행한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
zoomint확대할 zoom 레벨
centerLonLatArray.<double, 2>[lon, lat] 이동할 위치

Example

let zoom = 10;
let lonlat = [127.123456789, 37.123456789];
gwsJS.setViewLonLat(zoom, lonlat);

.fitBounds

주어진 직각 좌표 영역으로 확대/축소와 이동을 함께 수행한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
extentArray.<double, 4> | Array.<Array.<double, 2>, 2>[sx, sy, ex, ey]
marginnumber | undefined0~100 사이의 값으로 %를 의미 가로나 세로 크기의 margin % 만큼 여백을 둔다.

Example

case 1) extent 이용
let extent = geometry.getExtent();
extent : [123456.12, 123456.12, 234567.12, 234567.12]

let extent = geometry.getEnvelopeInternal();
extent : {_minx:123456.12, _miny:123456.12, _maxx:234567.12, _maxy:234567.12}

gwsJS.fitBounds(extent);

case 2) 2개 좌표 이용
let leftBottom = [123456.12, 123456.12];
let rightTop = [234567.12, 234567.12];
gwsJS.fitBounds([leftBottom, rightTop]);

case 3) geometry 이용
let center = [123456.12, 123456.12];
let radius = 1000;
let circle = new ol.geom.Circle(center, radius);
gwsJS.fitBounds(circle);

.fitBoundsLonLat

주어진 경위도 좌표 영역으로 확대/축소와 이동을 함께 수행한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
extentLonLatArray.<double, 4> | Array.<Array.<double, 2>, 2>[sLon, sLat, eLon, eLat]
marginnumber | undefined0~100 사이의 값으로 %를 의미 가로나 세로 크기의 margin % 만큼 여백을 둔다.

Example

case 1) extent 이용
let extent = geometry.getExtent();
extentLonLat : [127.12345678, 36.12345678, 127.22345678, 37.12345678]
gwsJS.fitBoundsLonLat(extentLonLat);

case 2) 2개 좌표 이용
let leftBottom = [127.12345678, 36.12345678];
let rightTop = [127.22345678, 37.12345678];
gwsJS.fitBoundsLonLat([leftBottom, rightTop]);

.setRotation

화면을 주어진 각도만큼 시계방향으로 회전시킨다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
degreesdouble화면을 회전시킬 값

Example

let rotate = 45;
gwsJS.setRotation(rotate);

.movePrev

이전 화면으로 이동

Kind: instance property of OrangeGwsJS
Example

gwsJS.movePrev();

.moveNext

다음 화면으로 이동

Kind: instance property of OrangeGwsJS
Example

gwsJS.moveNext();

.moveInit

초기화면으로 이동한다.

Kind: instance property of OrangeGwsJS
Example

gwsJS.moveInit();

.moveFull

전체 화면으로 이동한다.

Kind: instance property of OrangeGwsJS
Example

gwsJS.moveFull();

.clearMeasureObject

측정 모드를 유지한 상태에서 화면에 표시된 모든 객체를 제거해준다. 측정모드는 유지된다.

Kind: instance property of OrangeGwsJS
Example

gwsJS.clearMeasureObject();

.getStatusShowSegments ⇒ boolean

중간 정보 (거리재기/면적재기의 선분간 거리) 표시여부

Kind: instance property of OrangeGwsJS
Returns: boolean - 중간정보 표시여부
Example

let showSegments = gwsJS.getStatusShowSegments();
showSegments : true(표시상태), false(감춤상태)

.getStatusClearPrevious ⇒ boolean

새로 그릴 때 이전객체 삭제여부

Kind: instance property of OrangeGwsJS
Returns: boolean - 새로 그릴 때 이전객체 삭제여부
Example

let clearPrevious = gwsJS.getStatusClearPrevious();
clearPrevious : true(새로 그릴 때 이전객체가 화면에 있으면 삭제후 시작), false(새로 그릴 때 이전객체가 있어도 시작)

.toggleMeasureShowSegments

중간 정보 (거리재기/면적재기의 선분간 거리) 표시여부를 토글시켜준다.

Kind: instance property of OrangeGwsJS
Example

let showSegments = gwsJS.getStatusShowSegments();
showSegments : true(표시상태)
showSegments = gwsJS.toggleMeasureShowSegments();
showSegments : false(감춤상태)

.toggleMeasureClearPrevious

화면에 새로운 객체를 그리기 시작할 때 이전에 그려진 정보를 지울지 여부를 토글 시켜준다.

Kind: instance property of OrangeGwsJS
Example

let clearPrevious = gwsJS.getStatusClearPrevious();
clearPrevious : true(삭제후시작)
clearPrevious = gwsJS.toggleMeasureClearPrevious();
clearPrevious : false(삭제 없이 시작)

.startMeasure

측정모드를 시작한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
optionsmeasure_options측정모드 옵션

Example

measure_options {
  type{string}: 'LineString', 'Polygon', 'Circle' 중 하나
  showSegments{boolean|undefined} : LineString, Polygon을 구성하는 Line의 중간에 정보 표시여부. 기본값(true)
  clearPrevious{boolean|undefined} : 이전에 화면에 그려져 있는 객체를 지울지 여부를 설정한다. 기본값(true)
  style{Style|undefined} : 그리기에 사용할 객체의 스타일을 지정한다.
  stopmeasure_callback{function} : 측정작업이 끝났을 때 호출할 함수를 등록한다.
}

linestring_style = {
  stroke: { color: "rgb(255, 55, 55)", width: 3 },
  image: { fill: { color: "rgb(255, 0, 0)" }, stroke: { color: "rgb(255, 255, 255)", width: 2 }, radius: 7 },
}

polygon_style = {
  stroke: { color: "rgb(55, 55, 255)", width: 3 },
  fill: { color: "rgba(200, 200, 255, 0.3)" },
  image: { fill: { color: "rgb(0, 0, 255)" }, stroke: { color: "rgb(255, 255, 255)", width: 2 }, radius: 7 },
}

circle_style = {
  stroke: { color: "rgb(55, 128, 55)", width: 3 },
  fill: { color: "rgba(200, 255, 200, 0.3)" },
  image: { fill: { color: "rgb(0, 128, 0)" }, stroke: { color: "rgb(255, 255, 255)", width: 2 }, radius: 7 },
}

function callback_measurestoped() {
  console.log("측정작업이 종료되었습니다.");
}

options = {
  type: 'LineString',
  style: linestring_style,
  showSegments: true,
  clearPrevious: false,
  stopmeasure_callback: callback_measurestoped
}

gwsJS.startMeasure(options);

.stopMeasure

측정 작업을 종료한다.

Kind: instance property of OrangeGwsJS

.startDrawShapes

객체를 입력한다. 입력가능한 객체는 Point, LineString, Polygon, Circle, Box, Square

Kind: instance property of OrangeGwsJS

ParamTypeDescription
type‘Point’ | ‘LineString’ | ‘Polygon’ | ‘Circle’ | ‘Box’ | ‘Square’입력 타입
optionsShapeOption입력 옵션

Example

ShapeOption {
  features {ol.Collection} : 편집 용 객체들 (기본값 undefined)
  onlyEditMode {boolean} : 신규 입력 없이 편집만 가능 (기본값 false), features가 대상이다.
  drawOnlyOnce {boolean} : 한 번만 그리기(한 개의 객체만 그릴 수 있음)(기본값은 false)
  clearPrevious {boolean} : 지금까지 입력된 객체를 삭제하고 신규로 입력할지 여부(기본값은 false)
  style {StyleLike} : 객체 입력 스타일
  drawend_callback {function} : 하나의 객체 입력이 끝나면 호출되는 함수로 입력된 객체 정보를 전달
  modifyend_callback {function} : 한번의 편집이 끝날때 마다 호출된다.
  stopdraw_callback {function} : 전체 입력작업이 종료된 후 호출된다.
}

StyleLike {
  fill {FillStyle} : color <- Polygon, Circle, Box, Square 채움 표출에 사용됨
  stroke {StrokeStyle} : color, width <- LineString 표출에 사용됨, Polygon, Circle, Box, Square 라인 표출에 사용됨
  image {ImageStyle} : src, CircleStyle <- Point 표출에 사용됨
}

let options = {
  style : {image : {src: 'image/marker.png'}},
  drawOnlyOnce : true,
  clearPrevious : true,
  drawend_callback : drawend_callback,
}

gwsJS.startDrawShapes("Point", options);

function drawend_callback(geometry) {
  console.log(geometry.toText()); // POINT (955035.8498133523 1955042.398029111)
  console.log(geometry.getEnvelopeInternal()); // {_minx: 955035.8498133523, _maxx: 955035.8498133523, _miny: 1955042.398029111, _maxy: 1955042.398029111}
}

function modifyend_callback(olFeatures) {
  for (let feature of olFeatures) {
    let geometry = feature.getGeometry();
    console.log(geometry.toText()); // POINT (955035.8498133523 1955042.398029111)
    console.log(geometry.getEnvelopeInternal()); // {_minx: 955035.8498133523, _maxx: 955035.8498133523, _miny: 1955042.398029111, _maxy: 1955042.398029111}
  }
}

function stopdraw_callback() {
  console.log("shape draw is stopped!")
}

let options = {
  style : {
     image : {
       fill: { color:'rgba(255,255,255,0.3)' },
       stroke: { color:'rgba(255,255,255,0.3)', width:2 },
       radius: 5
     }
     stroke: { color:'rgba(255,255,255,0.3)', width:2 },
  },
  clearPrevious : true,
  modifyend_callback : modifyend_callback,
  drawend_callback : drawend_callback,
}

gwsJS.startDrawShapes("LineString", options);

let options = {
  style : {
     image : {
       fill: { color:'rgba(255,255,255,0.3)' },
       stroke: { color:'rgba(255,255,255,0.3)', width:2 },
       radius: 5
     }
     fill: { color:'rgba(255,255,255,0.3)' },
     stroke: { color:'rgba(255,255,255,0.3)', width:2 },
  },
  clearPrevious : true,
  drawend_callback : drawend_callback,
  stopdraw_callback : stopdraw_callback,
}

gwsJS.startDrawShapes("Polygon", options); // Polygon, Circle, Box, Square

.getDrawnFeatures ⇒ Array.<ol.Feature>

현재까지 그려진 객체를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: Array.<ol.Feature> - 현재까지 그려진 객체를 반환한다.
Example

const features = gwsJS.getDrawnFeatures();
features.forEach((feature) => {
  console.log(feature.getId());
});

.stopDrawShapes

객체 입력 모드를 종료한다.

Kind: instance property of OrangeGwsJS

.addLayerClickStyle

마우스 클릭시 스타일을 주고 싶을 때 사용한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
layerNamestring스타일을 반영할 레이어
styleLikeStyleLike스타일 문자열
labelArray.<string> | undefined라벨필드 목록으로 없어도 됨

Example

StyleLike {Style} {Array<Style>} {StyleFunction} Style, Style 배열, Style 함수

Style {
  fill {Fill|undefined} :,
  stroke {Stroke|undefined} :,
  image {Image|undefined} :,
  text {Text|undefined} :
}

Fill {
  color {string} : rgb, rgba, #color
}

Stroke {
  color {string} : rgb, rgba, #color,
  width {number} : 1.25
}

Image {Icon} {Circle}

Icon {
  anchor {Array<number>(defaults to [0.5, 0.5])} {string} : "center-center"
  anchorXUnits {'fraction'} {'pixels'}: 'fraction',
  anchorYUnits {'fraction'} {'pixels'}: 'fraction',
  color {string} : rgb, rgba, #color,
  src {string|undefined} : 'image/pin.png'
}

Circle {
  radius {number}: 반경
  fill {Fill}: 채우기
  stroke {Stroke}: 선형
}

Text {
  text {string|fundtion} : 
  font {string}: 'bold 10px sans-serif',
  textAlign {string}: 'left', 'right', 'center',
  textBaseline {string}: 'bottom', 'top', 'middle'
  offsetX {number}: 0,
  offsetY {number}: 0,
  fill {Fill|undefined}:
  stroke {Stroke|undefined}:
  backgroundFill {Fill|undefined}
  backgroundStroke {Stroke|undefined}
}

let style = {
  fill: { color: 'rgba(255,255,255,0)' },
  stroke: {
    color: color: 'rgb(255,0,0)',
    width: 3,
  },
};

gwsJS.addLayerClickStyle('admin_sid.geo', style);

.removeLayerClickStyle

이미 등록된 마우스 클릭시 스타일 변경할 레이어를 삭제한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
layerNamestring삭제할 레이어 명

.moveGeoLocation

현재 자기 위치를 찾아 지도를 이동시켜 준다

Kind: instance property of OrangeGwsJS
Example

gwsJS.moveGeoLocation();

.wfsQueryProperties ⇒ Array.<ol.Feature>

gdx에 등록된 레이어에 대한 WFS 쿼리를 수행하며 속성정보만 가져온다.

Kind: instance property of OrangeGwsJS
Returns: Array.<ol.Feature> - 검색된 결과

ParamTypeDescription
gdx_namestringGDX이름
layer_namestringGDX내의 레이어이름
where_conditionstringSQL Where절에 해당(지원 : =, <, >, <>, <=, =>, and, or, is, like[%,?])
sort_conditionstring | undefinedSQL Sort절에 해당

Example

wfsQuery("COMMON.xml", "adm_sid", "admcode='1100000000'")
let properties = wfsQuery("COMMON.xml", "adm_sid", "admcode like '11%'", "admcode asc, sidname desc")
for (let property of properties) {
  let name = property["name"];
  let score = property["score"];
}

.wfsQueryFeature ⇒ Promise.<Array.<ol.Feature>>

gdx에 등록된 레이어에 대한 WFS 쿼리를 수행하며, 결과에 geometry를 포함한다.

Kind: instance property of OrangeGwsJS
Returns: Promise.<Array.<ol.Feature>> - 검색된 결과

ParamTypeDescription
gdx_namestringGDX이름
layer_namestringGDX내의 레이어이름
where_conditionstringSQL Where절에 해당(지원 : =, <, >, <>, <=, =>, and, or, is, like[%,?])
sort_conditionstring | undefinedSQL Sort절에 해당

Example

wfsQuery("COMMON.xml", "adm_sid", "admcode='1100000000'")
let features = wfsQuery("COMMON.xml", "adm_sid", "admcode='1100000000'", "admcode asc, sidname desc")
for (let feature of features) {
  let geom = feature.geometry;
  let name = feature.properties["name"];
}

.setSelect

이미 선택된 Feature 목록에서 특정 Feature만 선택된 것으로 보이도록 하거나, 전체 선택된 것으로 되돌린다.

layerName이 undefined 이거나 id가 undefined 이면 전체 선택모드로 되돌린다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
layerNamestring선택할 feature가 포함된 레이어명
idint | string | undefined선택할 Feature의 id

Example

// 조건 : 이미 선택된 목록이 있을 때만 동작한다

// 선택된 Feature 목록에서 특정 위치에 있는 Feature를 선택
function selectFeature(layerName, id) {
  gwsJS.setSelect(layerName, id);
}

// 선택된 Feature 목록으로 다시 변경
function unSelectFeature() {
  gwsJS.setSelect();
}

.setSelectFeature

선택된 Feature 목록에서 특정 Feature에 대해 단일선택이 되도록 한다.

layerName이 undefined 이거나 id가 undefined 이면 전체 선택모드로 되돌린다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
layerNamestring선택할 feature가 포함된 레이어명
idint | string | undefined선택할 Feature의 id
selectboolean단일선택모드 여부

Example

// 선택 모드 실행
const options = {
  gdxLayers: {},
  select_callback: selectFeatures,
  remove_callback: removeFeatures,
};
gwsJS.startSelectMode(options);

// 선택시 선택된 feature들을 저장
const selectedFeatures = [];
function selectFeatures(features) {
  for (let feature of features) {
    selectedFeatrues.push(feature);
  };
}

// 선택된 Feature 목록에서 특정 위치에 있는 Feature를 선택
function mouseOver(layerName, id) {
  gwsJS.setSelectFeature(layerName, id, true);
}

// 선택된 Feature 목록에서 특정 위치에 있는 Feature를 선택해제
function mouseLeave(layerName, id) {
  gwsJS.setSelectFeature(layerName, id);
}

.addSelectFeatureById ⇒ Array.<ol.Feature>

id 값으로 쿼리한 feature를 선택해준다. gdxName, layerName이 선택 레이어에 들어 있지 않으면 선택을 수행하지 않는다.

Kind: instance property of OrangeGwsJS
Returns: Array.<ol.Feature> - 선택된 객체

ParamTypeDescription
gdxNamestringgdx이름
layerNamestring레이어 이름
idstring | number선택할 객체의 id

Example

let features = gwsJS.addSelectFeatureById('MOIRA.xml', 'ac_build_bld.shape_geo', '(3,4)');
features.forEach((feature) => {
  console.log(feature.getId());
});

.addSelectFeatureByKeyValue ⇒ Array.<ol.Feature>

key 값으로 쿼리한 feature를 선택해준다. gdxName, layerName이 선택 레이어에 들어 있지 않으면 선택을 수행하지 않는다.

Kind: instance property of OrangeGwsJS
Returns: Array.<ol.Feature> - 선택된 객체

ParamTypeDescription
gdxNamestringgdx이름
layerNamestring레이어 이름
keystring | number선택에 사용할 필드명
valuestring | number선택할 필드 값

Example

let features = gwsJS.addSelectFeatureByKeyValue('MOIRA.xml', 'ac_build_bld.shape_geo', 'name', '초등학교');
features.forEach((feature) => {
  console.log(feature.getId());
});

.startSelectMode

객체 선택 모드로 만든다. 단, 반경선택등의 객체 선택이 있을 경우에는 객체 선택 모드로 넘어가지 않는다. 우선 선택 정보를 해제한 후 작업이 가능하다.

Kind: instance property of OrangeGwsJS
See: getSelectedFeatures

ParamTypeDescription
optionsselect_options객체선택모드 옵션

Example

select_options {
  gdxLayers {GdxLayers}: gdxLayers 객체 선택이 가능한 레이어 목록( {} 빈 Object를 넘기면 checked 이면서 selectable 인 레이어가 대상이 된다.)
  select_callback {function}: select_callback(Array<feature> features) 선택이 발생하면 호출되는 함수
  remove_callback {function}: remove_callback(Array<feature> features) 선택이 해제되면 호출되는 함수
  stopselect_callback {function}: 선택모드가 종료되었을 때 호출되는 함수
}

GdxLayers {
  gdxName{string} : {Array<string>} layer 목록
}

drag_box의 스타일은 map.css  .ol-dragbox 에서 설정

let gdxLayers = {
  'COMMON.xml' : ['ac_adm_sid.center_geo', 'ac_adm_sgg.center_geo', 'ac_adm_emd.center_geo'],
  'MOIRA.xml' : ['ac_build_bld.center_geo', 'ac_build_bld.shape_geo', 'ac_build_eqb']
}

function onFeatureSelected(features) {
  console.log("Selected", features.length);
  for (let feature of features) {
    let values = [];
    let field_info = feature.get("#layer").get("fieldInfo");
    for (let column of field_info.scheme) values.push(`[${column.alias}:${field_info.get(feature, column.name)}]`);
    console.log("selected", `[${feature.getId()}]-${values.join("")}`);
  }
}

function onFeatureRemoved(features) {
  console.log("Removed", features.length);
  for (let feature of features) {
    let values = [];
    let field_info = feature.get("#layer").get("fieldInfo");
    for (let column of field_info.scheme) values.push(`[${column.alias}:${field_info.get(feature, column.name)}]`);
    console.log("selected", `[${feature.getId()}]-${values.join("")}`);
  }
}

function onStopSelectMode() {
  console.log("select mode is stopped");
}

let options = {
  gdxLayers: gdxLayers,
  select_callback: onFeatureSelected,
  remove_callback: onFeatureRemoved,
  stopselect_callback: onStopSelectMode
}

gwsJS.startFeatureSelectMode(options);

필요시 현재 선택된 객체 모두를 얻는 함수는 getSelectedFeatures()

.stopSelectMode

객체 선택 모드를 해제한다.

Kind: instance property of OrangeGwsJS
Example

gwsJS.stopSelectMode()

.isSelectMode ⇒ boolean

현재 객체선택모드인지를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: boolean - true(현재 선택모드), false(선택모드 아님)
Example

let isSelectMode = gwsJS.isSelectMode();
isSelectMode : true(현재 선택 모드), false(현재 기본 모드)

.getSelectModeLayers ⇒ GdxLayers

선택모드의 대상이 되는 레이어목록을 반환한다.

Kind: instance property of OrangeGwsJS
Returns: GdxLayers - 선택모드의 대상이 되는 레이어목록
Example

GdxLayers {
  gdxName{string} : Array<string> 레이어 목록,
}

let target_layers = { 'MOIRA.xml' : ['layer_name1', 'layer_name2', 'layer_name3'] };
function callback(features){}

gwsJS.startSelectMode(layers, callback);

let target_layers = gwsJS.getSelectModeLayers();
target_layers : { 'MOIRA.xml' : ['layer_name1', 'layer_name2', 'layer_name3'] }

.getLayerFromFeature ⇒ ol.Layer

Select 모드에서 선택된 객체의 레이어를 확인할 때 사용

Kind: instance property of OrangeGwsJS
Returns: ol.Layer - feature가 속해 있는 레이어를 반환한다.

ParamTypeDescription
featureol.Feature선택된 객체

Example

let layer = gwsJS.getLayerFromFeature(feature);
if (layer) console.log(layer.get("layerName"));

.getSelectedFeatures ⇒ Collection.<Feature>

현재 선택된 모든 객체를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: Collection.<Feature> - 선택된 객체 전체
Example

let features = gwsJS.SelectedFeatures();
features.forEach((feature) => {
  let layer = feature.get("#layer");
  // layer.get("gdxName");
  // layer.get("layerName");
  // layer.get("title");
  // layer.get("fieldInfo");
  if (layer) {
    let field_info = layer.get("fieldInfo");
    if (field_info) {
      let values = [`[${feature.getId()}]`];
      for (let column of field_info.scheme) values.push(`[${column.alias}:${feature.get(column.name)}]`);
      console.log("selected", values.join(""));
    } else console.log("not found fieldinfo");
  } else console.log("not found layers");
});

.selectFeaturesByGeometry ⇒ SelectedFeatures

주어진 레이어 목록에서 주어진 객체로 Feature를 검색해 반환한다.

Kind: instance property of OrangeGwsJS
Returns: SelectedFeatures - 레이어별 선택된 객체 전체

ParamTypeDescription
gdxLayersGdxLayers검색할 레이어이름 또는 레이어이름 목록
geometryol.geom.Geometry검색할 geometry

Example

GdxLayers {
  gdxName{string} : {Array<string>} 레이어이름 목록
}

SelectedFeatures {
  layerName : {Array<ol.Feature>} 레이어명이 key 이고, 선택된 목록을 반환한다.
}

let geometry = new ol.geom.Circle([x, y], radius);
let selectedFeatures = gwsJS.selectFeaturesByGeometry({'MOIRA.xml' : ['layer_name1', 'layer_name2']}, geometry);

.clearSelectedFeatures

화면에 선택된 객체들을 지운다. 선택모드에서도 동작한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
removeLayersArray.<string> | undefined삭제할 레이어 목록이다.

Example

gwsJS.clearSelectedFeatures();

gwsJS.clearSelectedFeatures(['BUILDING_LAYER']);

.refreshLayer

강제로 레이어를 리프레시 한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
gdxLayersGdxLayers리프레시 할 레이어

Example

GdxLayers {
  gdxName{string} : {Array<string>} layer 목록
}

case 1) 갱신할 레이어가 많을 때
let gdxLayers = {
  'COMMON.xml' : ['ac_adm_emd.center_geo'],
  'MOIRA.xml' : ['ac_build_bld.shape_geo', 'ac_build_eqb']
}
gwsJS.refreshLayer(gdxLayers);

case 2) 레이어명이 유일할 때 'ac_adm_emd.center_geo'
gwsJS.refreshLayer('ac_adm_emd.center_geo');

case 3) 레이어명이 유일한 레이어가 여러개 일 때
gwsJS.refreshLayer(['ac_adm_emd.center_geo', 'ac_build_eqb']);

case 2), case 3) 의 경우 레이어 명이 유일하지 않으면 같은 이름을 가진 다른 gdx의 레이어도 강제로 갱신된다.

.focus

원이 줄어드는 모습의 포커스 에니메이션을 수행한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
coordinateArray.<number, 2>포커싱 할 위치

Example

gwsJS.focus([x, y]);

.focusLonLat

원이 줄어드는 모습의 포커스 에니메이션을 수행한다.

Kind: instance property of OrangeGwsJS

ParamTypeDescription
lonlatArray.<number, 2>포커싱 할 경위도 위치

Example

gwsJS.focus([127.1234032, 35.1234]);

.toJstsGeometry ⇒ Geometry

OpenLayers Geometry를 JSTS Geometry형태로 변환해 반환한다. OpenLayers Geometry는 Circle 같은 경우 중점과 반경으로 구성되어 있어 OGC 표준 9IM 연산을 수행할 수 없다. JSTS Geometry로 변환해 사용하면 모든 OGC 표준 연산을 사용할 수 있다.

Kind: instance property of OrangeGwsJS
Returns: Geometry - 변환된 jsts Geometry

ParamTypeDescription
olGeometryol.geom.GeometryOpenLayers Geometry
projectionstring입력하지 않으면 화면 Projection으로 설정한다.

Example

drawend_callback(olGeometry) {
  let jstsGeometry = gwsJS.toJstsGeometry(olGeometry);
  console.log("OpenLayers Extent : " + olGeometry.getExtent());
  console.log("JSTS Envelope : " + jstsGeometry.getEnvelopeInternal());
}

> OpenLayers Extent : [minx, miny, maxx, maxy]
> OpenLayers Extent : 955258.1840211638,1953949.8303541064,963471.0895517233,1959298.968825319
> JSTS Envelope : {_minx, _maxx, _miny, _maxy}
> JSTS Envelope : Env[955258.1840211638 : 963471.0895517233, 1953949.8303541064 : 1959298.968825319]

.readGeometry ⇒ ol.geom.Geometry

WKT 데이터를 ol.geom.Geometry 형태로 변환한다.

Kind: instance property of OrangeGwsJS
Returns: ol.geom.Geometry - 변환된 geometry

ParamTypeDescription
wktstringOGC WKT Format String
dataProjstringwkt 데이터의 srid로 기본값은 ‘EPSG:4326’
featureProjstring | undefinedfeature 의 srid (ex. ‘EPSG:5179’), 정의하지 않으면 dataProj와 동일하게 취급

Example

let wkt = 'POLYGON((10.689 -25.092, 34.595 -20.170, 38.814 -35.639, 13.502 -39.155, 10.689 -25.092))';
let geom = gwsJS.readGeometry(wkt);

.readFeature ⇒ ol.Feature

WKT 데이터를 ol.Feature 형태로 변환한다.

Kind: instance property of OrangeGwsJS
Returns: ol.Feature - 변환된 Feature

ParamTypeDescription
wktstringOGC WKT Format String
dataProjstringwkt 데이터의 srid로 기본값은 ‘EPSG:4326’
featureProjstring | undefinedfeature 의 srid (ex. ‘EPSG:5179’), 정의하지 않으면 dataProj와 동일하게 취급

Example

let wkt = 'POLYGON((10.689 -25.092, 34.595 -20.170, 38.814 -35.639, 13.502 -39.155, 10.689 -25.092))';
let feature = gwsJS.readFeature(wkt);

.writeGeometry ⇒ string

ol.geom.Geometry 형태의 데이터를 OGC WKT 포맷의 문자열로 변환한다.

Kind: instance property of OrangeGwsJS
Returns: string - 변환된 wkt 문자열

ParamTypeDescription
geometryol.geom.Geometry변환할 geometry
featureProjstringgeometry 데이터의 srid로 기본값은 ‘EPSG:4326’
dataProjstring | undefinedwkt 데이터의 srid (ex. ‘EPSG:5179’), 정의하지 않으면 featureProj와 동일하게 취급

Example

let geometry = feature.getGeometry();
let wkt = gwsJS.writeGeometry(geometry);

.writeFeature ⇒ string

ol.Feature 형태의 데이터를 OGC WKT 포맷의 문자열로 변환한다.

Kind: instance property of OrangeGwsJS
Returns: string - 변환된 wkt 문자열

ParamTypeDescription
featureol.Feature변환할 feature
featureProjstringfeature 데이터의 srid로 기본값은 ‘EPSG:4326’
dataProjstring | undefinedwkt 데이터의 srid (ex. ‘EPSG:5179’), 정의하지 않으면 featureProj와 동일하게 취급

Example

let wkt = gwsJS.writeGeometry(feature);

.csvToArray ⇒ Array.<Array>

csv 파일을 배열형태로 반환한다. 모든 값은 문자열로 들어가기 때문에 나중에 숫자 처리는 해주어야 한다.

Kind: instance property of OrangeGwsJS
Returns: Array.<Array> - [[col1, col2, col3, …], [col1, col2, col3, …], [col1, col2, col3, …], …]

ParamTypeDescription
strDatastringcsv 파일 데이터
strDelimiterstring | undefined구분자

.addGeoTiffLayer ⇒ Promise.<Array.<ol.Layer>>

Kind: instance property of OrangeGwsJS
Returns: Promise.<Array.<ol.Layer>> - 생성된 ol.layer, 동일한 이름의 레이어가 있다면 해당 레이어를 반환한다. 레이어를 생성할 수 없으면 null 리턴

ParamType
layerNamestring
optionsLayerOption

Example

LayerOption {
  domain: {Array<number,2>} 값 최대 범위,
  thresholds: {Array<number>} 값 구간,
  interpolate: {boolean} 보간여부 (기본값=true)
  alphaValue: {number} (0~1), 투명도값
  callback: {function(x, y, value)} x, y는 Map 좌표, value : 마우스 커서 위치의 값, 값이 없을 때는 null
  sources: {Array<string>} GeoTiff source url
  useWebGL: {boolean} webGL 사용여부, default:true 
}

case 1) geotiff pixel이 연속된 값이고, 범위에 따라 색상을 달리 표시하고자 할 때
const pathloss_option = {
  domain: [0, 200],
  thresholds: [0, 70, 75, 80, 85, 90, 95, 100, 105, 110, 115, 120, 130, 140, 150, 160],
  interpolate: true,
  alphaValue: 0.7,
  colorsDefs: [
    '#0d0d73',
    '#0000c0',
    '#0000ff',
    '#4040ff',
    '#4080ff',
    '#8080ff',
    '#99ccff',
    '#ccffff',
    '#ccffcc',
    '#ffff99',
    '#ffff00',
    '#ffcc99',
    '#ff8000',
    '#ff4000',
    '#ff0000',
    '#b81414',
  ],
  sources: ['./samples/pathloss.tiff', './samples/pathloss_no_display.tiff'],
  callback: value_callback,
};

case 2) geotiff pixel이 개별 값이고, 각 값별로 색상을 달리 표시하고자 할 때
이 예제에서는 값이 [0, 1, ..., 249] 있다고 가정하고, 각 값 별로 난수의 색상을 생성해준다.
const bastserver_option = {
  domain: [0, 255],
  thresholds: [],
  interpolate: false,
  alphaValue: 0.7,
  colorsDefs: [],
  sources: ['./samples/bestserver.tiff'],
  callback: value_callback,
};

for (let i = 0; i < 256; i++) {
  let r = parseInt(Math.random() * 256);
  let g = parseInt(Math.random() * 256);
  let b = parseInt(Math.random() * 256);
  bastserver_option.thresholds.push(i);
  bastserver_option.colorsDefs.push([r, g, b]);
}

사용법)

function value_callback(x, y, value) {
  console.log("VALUE", x, y, value);
}

const pathloss_option = {
  domain: [0, 200],
  thresholds: [0, 70, 75, 80, 85, 90, 95, 100, 105, 110, 115, 120, 130, 140, 150, 160],
  interpolate: true,
  alphaValue: 0.7,
  colorsDefs: [
    '#0d0d73',
    '#0000c0',
    '#0000ff',
    '#4040ff',
    '#4080ff',
    '#8080ff',
    '#99ccff',
    '#ccffff',
    '#ccffcc',
    '#ffff99',
    '#ffff00',
    '#ffcc99',
    '#ff8000',
    '#ff4000',
    '#ff0000',
    '#b81414',
  ],
  sources: ['https://s3.ap-northeast-2.amazonaws.com/mybucket/pathloss.tiff'],
  callback: value_callback,
};

const bastserver_option = {
  domain: [0, 255],
  thresholds: [],
  interpolate: false,
  alphaValue: 0.7,
  colorsDefs: [],
  sources: ['https://s3.ap-northeast-2.amazonaws.com/mybucket/bestserver_grid1.tiff', 'https://s3.ap-northeast-2.amazonaws.com/mybucket/bestserver_grid2.tiff',],
  callback: value_callback,
};

for (let i = 0; i < 256; i++) {
  let r = parseInt(Math.random() * 256);
  let g = parseInt(Math.random() * 256);
  let b = parseInt(Math.random() * 256);
  bastserver_option.thresholds.push(i);
  bastserver_option.colorsDefs.push([r, g, b]);
}

let pathlossLayer = null;
let bestserverLayer = null;
gwsJS.addGeoTiffLayer("PATHLOSS", pathloss_option).then(layer => { pathlossLayer = layer });
gwsJS.addGeoTiffLayer("BESTSERVER", bastserver_option).then(layer => { bestserverLayer = layer });

레이어 켜고/끄기)
let isVisible = pathlossLayer.getVisible();
pathlossLayer.setVisible(isVisible ? false : false); // toggle

화면에 표시된 분석결과 데이터 얻기
// 분석결과 저장하는 부분 구현
let layer = gwsJS.getCustomLayer("PATHLOSS");
let func = layer.get("getSource");
let source = [];
for (let s of func()) {
    let line = []
    for (let h = 0; h < s.height; h++) {
        let t = [];
        let a = s.data.slice(h * s.width, (h + 1) * s.width);
        for (let w = 0; w < s.width; w++) {
            t.push(a[w] === s.nodata ? '' : a[w].toString());
        }
        line.push(t.join(','));
    }
    let d = { width: s.width, height: s.height, value: line }
    source.push(d);
}
let json = JSON.stringify(source);
var blob = new Blob([json], {
    type: 'octet/stream'
});
var anchor = document.createElement('a')
anchor.download = 'result.txt';
anchor.href = window.URL.createObjectURL(blob);
anchor.click();

.getCustomLayers ⇒ Object.<string, ol.Layer>

현재까지 만들어진 사용자 레이어를 반환한다.

Kind: instance property of OrangeGwsJS
Returns: Object.<string, ol.Layer> - 사용자 레이어 객체

.removeCustomLayer ⇒ ol.Layer

등록된 Custom 레이어를 삭제한다.

Kind: instance property of OrangeGwsJS
Returns: ol.Layer - 삭제된 레이어

ParamTypeDescription
layerNamestring삭제할 레이어명

.getCustomLayer ⇒ ol.Layer

주어진 레이어명의 커스텀 레이어를 반환한다. 없으면 null을 반환한다.

Kind: instance property of OrangeGwsJS
Returns: ol.Layer - 커스텀레이어

ParamType
layerNamestring

.getImageSources ⇒ Array.<string>

화면에 그려진 이미지의 아이콘 소스 목록을 반환한다.

Kind: instance property of OrangeGwsJS
Returns: Array.<string> - 이미지 소스 목록

ParamTypeDescription
featureol.Feature이미지를 얻을 Feature

.registerOnLoadStart(handler)

화면 그리기 시작할 때 호출될 함수를 등록한다.

Kind: instance method of OrangeGwsJS

ParamTypeDescription
handlerfunction: 화면 그리기 시작시 호출될 함수

.unregisterOnLoadStart()

화면 그리기가 시작될 때 호출될 함수의 등록을 해제한다.

Kind: instance method of OrangeGwsJS

.registerOnLoadEnd(handler)

화면 그리기가 종료된 때 호출될 함수를 등록한다.

Kind: instance method of OrangeGwsJS

ParamTypeDescription
handlerfunction: 화면 그리기가 종료된 때 호출될 함수

.unregisterOnLoadEnd()

화면 그리기가 종료된 때 호출될 함수의 등록을 해제한다.

Kind: instance method of OrangeGwsJS

.copyMap()

화면을 클립보드에 복사한다. 화면저장은 허용된 경우만 가능하다.(KAKAO_MAP은 불가)

Kind: instance method of OrangeGwsJS

.saveMap()

화면을 저장한다. 화면저장은 허용된 경우만 가능하다.(KAKAO_MAP은 불가)

Kind: instance method of OrangeGwsJS

.printMap()

화면을 출력한다. 화면출력은 허용된 경우만 가능하다.(KAKAO_MAP은 불가)

Kind: instance method of OrangeGwsJS

.exportMapBySize(newWidth, newHeight, imageName, returnImageURL, copyClipboard, callbacks) ⇒ Promise.<void>

지정한 사이즈와 동일한 해상도로 이미지를 추출한다. 지정한 사이즈가 실제 지도의 사이즈보다 클 경우, 이미지를 지정한 사이즈로 확장해서 추출함. 지정한 사이즈가 실제 지도보도 작을 경우, 이미지를 지정한 사이즈로 잘라서 추출함. 추출한 이미지의 해상도는 지도맵 해상도와 동일함. 프린트가 필요하면 일정한 사이즈의 이미지를 추출하고 프린트 하면 됨.

Kind: instance method of OrangeGwsJS
Returns: Promise.<void> - 이미지 추출이 끝나면 호출

ParamTypeDefaultDescription
newWidthnumber | null저정한 넓이 px, 지정하지 않으면 현재 화면의 넓이
newHeightnumber | null저정한 높이 px, 지정하지 않으면 현재 화면의 높이
imageNamestring | null추출한 이미지 파일 이름, 지정하지 않으면 ‘orange-map-image’
returnImageURLboolfalse생성된 이미지 url을 돌려줄지 여부
copyClipboardboolfalse생성된 이미지를 클립보드에 복사할지 여부
callbacksfunction{before, after} 이전/이후 호출용 이미지 추출이 끝나면 호출

Example

gwsJS.exportMapBySize(
 2480, // 넓이
 2480, // 높이
 "orange-map-image", // 저장할 이미지 이름
 false, // 이미지 URL
 true, // 클립보드 복사 유무
 {
   before: (mapDetails) => { console.log(mapDetails); }, // 현재 화면의 맵 상태
   after: (mapDetails) => { console.log(mapDetails); } // 현재 화면의 맵 상태
 },
);

ENGINE_TYPE

지원하는 엔진 타입

Kind: global constant
Example

ENGINE_TYPE {
  OPENLAYERS: 오픈레이어스,
  MAPBOX: 맵박스,
}

EVENT_NAMES

로딩과정에 발생하는 이벤트 목록

Kind: global constant
Example

EVENT_NAMES {
  LOADED_CATALOG: 카탈로그 로드 완료,
  LOADED_GDX: GDX 로드 완료,
  LOAD_LAYERINFO: 레이어정보 로드 완료,
  LOADED : 모든 정보 로드 완료,
}

POS_DISPLAY_TYPE

마우스 위치 표시 방법

Kind: global constant
Example

POS_DISPLAY_TYPE {
  UTM: 'x m , y m',
  DEG: 'E lon_degrees N lat_degrees',
  DMS: 'E lon_d lon_m lon_s N lat_d lat_m lats',
}