[OpenLayers] 지도에 스케일(scale) 표시하기 (ft. Scale control, ol-ext)

- OpenLayers를 이용하여 Map위에 스케일(scale) 표시하기 -

---

앞서 배경지도 vworld를 띄웠으며

지도만 있으면 허전하니 그럴싸하게 만들어보자

우선 스케일(scale)를 표시할 수 있게 간단하게 지원을 해주고있는데

 ol-ext 라고 openlayers-extensions 가 존재한다.

openlayers를 이용하여 여러가지 기능이 입혀져있는것을

우리가 가져다 쓰면된다.

<script type="text/javascript">
    var map = new ol.Map({
            target: 'map',
            layers: [
            new ol.layer.Tile({
            source: new ol.source.XYZ({
            url: 'http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png'
         })
      })
    ],
    view: new ol.View({
            center: [14126669.41589247, 4493404.190498611],
            zoom: 7,
            minZoom: 7,
            maxZoom: 19
        })
  });

    // Control
    var ctrl = new ol.control.Scale({  });
    map.addControl(ctrl);
    map.addControl(new ol.control.ScaleLine());
</script>

지도 배경지도 띄우는건 앞서 해봤고

그 지도를 담아둔 변수 위 예제에서는 map 변수이다.

이 map 변수에 Scale 을 보여주는 Control을 추가해주기만 하면 끝이다.(아래 3줄)

추가적으로 설명하자면 아래 3줄 중에서 

var ctrl = new ol.control.Scale({  });

    map.addControl(ctrl);

이부분은 사진에서 흰색바탕을 가진(1/3,668,700) scale 이며

map.addControl(new ol.control.ScaleLine());

이부분은 아래에 [100km] 라고 쓰여있는 scale이다.

코드 예제 아래에 컨트롤 3줄을 사용하기 위해서는 ol-ext 에서 제공하는 js와 css가 필요하다.

<link rel="stylesheet" href="../testPrj/ol-ext.css" />
<script type="text/javascript" src="../testPrj/ol-ext.js"></script>

이런식으로 선언을 해주었는데 파일은 못찾겠고 그냥 ol-ext 사이트에서 가져오면 된다.

https://viglino.github.io/ol-ext/?q=scale

여기거 ol-ext 사이트지만 scale을 검색한 결과이다.

여기에 들어가서 js 와 css의 소스를 가져왔다.

---

그 외의 여러가지 기능들을 제공해주는

ol-ext

여기를 통해 쉽고 유용하게 이것저것 적용시켜보자.