화면 기록 2023-05-12 오전 11.57.53.mov

개발 과정

  1. 먼저 OpenLayers Example에 들어가서 ScaleLine의 예제들을 찾아봤습니다.

    https://openlayers.org/en/latest/examples/?q=scale

    디자인 시안과 같이 ScaleLine을 고정시키는 예제는 찾을 수 없었습니다.

  2. ScaleLine의 스타일을 Fix 시키는 시도를 해보았습니다.

    .ol-scale-line 클래스 직접 조작 시도 → scaleLine의 width 조작 가능

  3. Attribution의 타입 확인 → string, string [], Attribution(string 또는 string[]을 반환하는 함수)

    아래와 같이 ScaleLine을 같이 넣을 수 없었습니다 Attribution type

    Untitled.png

  4. ScaleLine에서 제공하는 className 속성을 사용해보기!

    className을 직접 주면 기본 제공 스타일이 없어지고 개발자가 스타일을 직접줘야했습니다.

화면 기록 2023-04-12 오전 11.08.52.mov

1차 구현

Untitled.png

2차 구현

화면 기록 2023-04-12 오후 5.32.30.mov

3차 구현

화면 기록 2023-04-19 오후 3.26.13.mov