Class DrawControl

DrawControl : 드로우 컨트롤
지도 위에 올릴 수 있는 드로우 컨트롤입니다. 드로우 컨트롤에서는 일부 측정 기능도 제공합니다. 생성되는 기본 위치는 top-right입니다.

드로우 컨트롤에서 제공하는 그리기 관련 기능은 다음과 같습니다.

  1. point, lineString, polygon 3가지 feature를 그릴 수 있습니다.
  2. lineString, polygon의 경우 생성한 vertex 다시 클릭하거나 enter 키를 사용하여 feature를 완성시킬 수 있습니다. (이외에 부가적인 keybindings 옵션은 keybindings를 확인해주세요.)
  3. 각 feature를 선택할 수 있습니다. (shift키를 사용하여 여러 feature를 동시에 선택할 수 있습니다.)
  4. feature를 선택한 후 trash 버튼을 클릭하거나 delete, backspace 키를 사용하여 feature를 삭제할 수 있습니다.
  5. 여러 feature를 선택한 후 combine 버튼을 클릭해 feature를 결합할 수 있습니다.
  6. 결합시켰던 feature를 선택한 후 uncombine 버튼을 클릭해 feature를 분리할 수 있습니다.
  7. feature를 선택한 후 scaleRotate 버튼을 클릭해 크기를 변경하거나 회전시킬 수 있습니다.(point feature는 해당 기능을 사용할 수 없습니다.)
  8. feature를 두 번 클릭해 direct_select 모드로 변경 후 vertex를 추가하거나 수정할 수 있습니다.
  9. DrawControl class에서 제공하는 함수를 사용하여 feature 정보를 얻을 수 있습니다.

드로우 컨트롤에서 제공하는 측정 관련 기능은 다음과 같습니다.
(드로우 컨트롤에서 측정 기능을 사용하기 위해선 measure가 true로 설정되어야합니다.)

  1. lineString을 그려서 해당하는 길이를 측정할 수 있습니다.
  2. polygon을 그려서 polygon에 포함되는 면적의 넓이와 둘레 길이를 측정할 수 있습니다.
  3. feature에 vertex를 추가하거나 수정했을 때 바뀐 feature 정보를 얻을 수 있습니다.
  4. DrawControl class에서 제공하는 함수를 사용하여 feature의 측정 정보를 얻을 수 있습니다.

DrawControl로 사용할 수 있는 기본 옵션은 DrawOptions를 확인해주세요.


[DrawControl 생성 방법]
DrawControl은 Map 생성 후 addControl로 생성할 수 있습니다.
Map 생성 시 MapOptions으로도 DrawControl을 설정할 수 있으며, 더 자세한 설명은 Map과 MapOptions을 통해 확인할 수 있습니다.

Example

map.addControl(new ktGms.control.DrawControl({}));

map.addControl(new ktGms.control.DrawControl({
 keybindings: true, 
 boxSelect: true, 
 clickBuffer: 2, 
 displayControlsDefault: false, 
 // controls: {"point": true}, 
 measure: true,
showIcon: true,
iconRemovable: false,
resultPosition: "centroid",
resultOffset: [0.0006, 0.0003],
lengthUnit: "kilometers",
boxColor: undefined,
boxBorderColor: undefined,
boxPosition: "center",
textColor: "#000000",
draggable: false,
fixedNumber: 5,
}), 'top-left');

See

Hierarchy

  • DrawControl

Implements

  • IControl

Constructors

constructor

Methods

addDrawEventListener removeDrawEventListener getLength getArea getFeatureList changeMode getMode combineFeatures uncombineFeatures trash getFeature getSelected setDrawOptions setPaintOption

Constructors

constructor

  • DrawControl class의 생성자입니다.

    Parameters

    Returns DrawControl

Methods

addDrawEventListener

  • DrawControl에 대한 콜백 리스너를 추가할 수 있습니다.// 내용 추가해야함

    Parameters

    • type: string

      수신할 이벤트 유형입니다. 이벤트 종류에는 "create", "delete", "selectionchange"가 있습니다.

      • create : feature 생성을 성공적으로 마쳤을 때 발생합니다.
      • delete : feature를 삭제했을 때 발생합니다.
      • selectionchange : 선택한 feature가 변경되었을 때 발생합니다. feature를 선택했다가 선택 취소한 경우나 shift키를 활용하여 여러 feature를 선택한 경우에도 발생합니다.
      • update : feature가 update되었을 때 발생합니다. feature의 좌표를 변경하거나, scale, rotate한 경우에 발생합니다.
    • listener: Listener

      이벤트가 발생했을 때 호출되는 콜백함수입니다. 반환되는 이벤트 객체는 MapGeoJSONFeature[] 입니다.

    Returns void

    Example

    // `draw_point`, `draw_line_string`, `draw_polygon` 모드를 통해 도형을 생성할 때, 생성된 feature를 출력하는 콜백 리스너가 호출됩니다.
    let consoleFunc = function(e){console.log(e);}
    drawControl.addDrawEventListener('create', consoleFunc);

removeDrawEventListener

  • addDrawEventListener에서 추가했던 이벤트에 대한 콜백 리스너를 제거합니다.

    Parameters

    • type: string

      제거할 이벤트 유형입니다.

    • listener: Listener

      제거할 이벤트 리스너(콜백함수)입니다.

    Returns void

    Example

    // `draw_point`, `draw_line_string`, `draw_polygon` 모드에서 측정을 위해 도형을 생성할 때, 생성된 feature를 출력하는 콜백 리스너를 제거합니다.
    let consoleFunc = function(e){console.log(e.features);}
    drawControl.removeDrawEventListener('create', consoleFunc);

getLength

  • feature의 길이를 계산하는 함수입니다.

    Parameters

    • feature: MapGeoJSONFeature | Feature | FeatureCollection<Geometry, {
          [name: string]: any;
      }>

      GeoJSON의 Feature, FeatureCollection 형식을 입력으로 사용할 수 있습니다.

    • unit: string

      계산할 길이의 단위입니다. kilometers나 miles를 입력으로 사용할 수 있습니다.

    Returns number

    feature의 길이를 number 형식으로 반환합니다.

getArea

  • feature의 면적을 계산하는 함수힙니다.

    Parameters

    • feature: MapGeoJSONFeature | Feature | FeatureCollection<Geometry, {
          [name: string]: any;
      }>

      GeoJSON의 Feature, FeatureCollection 형식을 입력으로 사용할 수 있습니다.

    Returns number

    feature의 면적을 number 형식으로 반환합니다. feature의 geometry 타입이 polygon이 아닌 경우 0을 반환합니다.

getFeatureList

  • 현재까지 DrawControl을 통해 그린 feature 리스트를 반환합니다.

    Returns FeatureCollection<Geometry, {
        [name: string]: any;
    }>

    type이 FeatureCollection인 GeoJSON 객체를 반환합니다.

    Example

    {
     type: "FeatureCollection",
     features: [{...}]
    }

changeMode

  • DrawControl의 모드를 변경할 수 있는 함수입니다.

    Parameters

    • nextMode: string

      변경할 모드입니다. 사용 가능한 값은 draw_point, draw_line_string, draw_polygon, simple_select, direct_select, SRMode 입니다.

      • simple_select 모드는 feature를 select, delete, drag할 수 있는 상태입니다.
      • direct_select 모드는 같은 feature를 두 번 선택하여 feature의 꼭지점을 수정할 수 있는 상태입니다.
      • SRMode 모드는 feature를 scale, rotate할 수 있는 상태입니다.

    Returns void

getMode

  • DrawControl에서 현재 사용하고 있는 모드를 string으로 반환합니다. 반환되는 string은 changeMode에서 설정할 수 있는 모드와 동일합니다.

    Returns string

    현재 활성화된 모드를 string으로 반환합니다.

combineFeatures

  • 선택된 feature를 하나로 묶어주는 함수입니다. 동일한 type의 feature를 선택한 후 해당 함수를 호출해 features를 결합할 수 있습니다. (point + polygon 결합 불가능)

    Returns void

uncombineFeatures

  • 결합된 feature를 다시 분해하는 함수입니다. 결합했던 feature를 선택한 후 해당 함수를 호출해 feature를 원래대로 분리할 수 있습니다.

    Returns void

trash

  • 선택한 feature를 삭제할 수 있습니다. 삭제하고 싶은 feature를 선택한 후 해당 함수를 호출해 feature를 삭제할 수 있습니다.

    Returns void

getFeature

  • 특정 id를 가진 feature 객체를 반환하는 함수입니다.

    Parameters

    • featureId: string

      feature의 id

    Returns Feature<Geometry, {
        [name: string]: any;
    }>

    feature 객체를 반환합니다.

getSelected

  • 현재 선택하고 있는 feature 리스트를 FeatureCollection 형식으로 반환합니다.

    Returns FeatureCollection<Geometry, {
        [name: string]: any;
    }>

setDrawOptions

  • DrawOptions를 바꾸는 함수입니다. 측정 옵션과 관련된 옵션만 변경 가능합니다. keybindings, boxSelect, clickBuffer, displayControlsDefault, controls 옵션은 변경할 수 없습니다.

    Parameters

    Returns void

setPaintOption

  • DrawControl을 사용하여 그리는 feature의 paint 속성을 변경할 수 있습니다.

    Parameters

    • type: string

      fill, line, circle 옵션을 사용하여 변경하고 싶은 layer를 선택할 수 있습니다.

      • 옵션이 fill인 경우 polygon 내부의 스타일을 지정하는 layer가 선택됩니다.
      • 옵션이 line인 경우 polygon, lineString의 line의 스타일을 지정하는 layer가 선택됩니다.
      • 옵션이 circle인 경우 polygon의 vertex, midpoint / lineString의 vertex, midpoint / point의 스타일을 지정하는 layer가 선택됩니다.
    • selected: boolean

      옵션이 true인 경우 feature가 선택되었을 때의 스타일을 지정하는 layer의 paint 속성을 변경합니다. 옵션이 false인 경우 feature가 선택되지 않았을 때의 스타일을 지정하는 layer의 paint 속성을 변경합니다.

    • name: string

      변경하고 싶은 paint 옵션의 key값

    • value: string

      변경하고 싶은 paint 옵션의 value값

    Returns void

    Example

    drawControl.setPaintOption('fill', true, 'fill-color', '#000000');
    // 사용자가 선택한 feature의 내부 스타일을 지정하는 layer의 paint 옵션 중에 'fill-color' 옵션을 `#000000`으로 변경

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc